Профессиональный мобильный портал

В этом уроке мы научимся создавать профессиональный шаблон веб-портала:



Профессиональный мобильный портал


1. Создайте новый документ размером 1024×955 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон веб-сайта.



Профессиональный мобильный портал


2. Примените для фона стиль Наложение градиента (Layer Style — Gradient Overlay).



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


3. Используя предыдущий инструмент Прямоугольник (Rectangle Tool), создайте полосу на нижней части фона, цветом #0F2F47.



Профессиональный мобильный портал


4. Снова выберите инструмент Прямоугольник (Rectangle Tool) и выделите те места, которые находятся под названиями разделов нашего сайта (цвета указаны ниже).



Профессиональный мобильный портал


Профессиональный мобильный портал


5. С помощью того же инструмента создайте тень под слоем, предназначенным для названия раздела.



Профессиональный мобильный портал


Профессиональный мобильный портал


Профессиональный мобильный портал


6. Установите Заливку (Fill) слоя — 0% и примените для тени стиль Наложение градиента
(Layer Style — Gradient Overlay).



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


7. Скопируйте созданный слой 3 раза. Первые 2 копии оставьте такими же, а третью копию обработайте инструментом Свободное трансформирование (Free Transform), изменяя её размер вытягиванием вдоль цветной полосы.



Профессиональный мобильный портал


8. Скопируйте новую копию 2 раза:



Профессиональный мобильный портал


9. Установите Заливку (Fill) слоя — 0% и примените для копий стиль Наложение градиента
(Layer Style — Gradient Overlay).



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


10. Теперь нам необходимо создать узор на новом слое, предназначенном для заголовка сайта. Используя инструмент Эллипс (Ellipse Tool), сначало создайте круг, затем, удерживая Alt, инструментом Прямоугольник (Rectangle Tool) вырежьте нижнюю часть круга:



Профессиональный мобильный портал


11. Установите Заливку (Fill) слоя — 0%, Непрозрачность (Opacity) — 80% и примените для узора стиль Обводка (Layer Style — Stroke).



Профессиональный мобильный портал


12. При помощи того же инструмента Эллипс (Ellipse Tool) создайте ещё один узор, имеющий округлую форму.



Профессиональный мобильный портал


13. Установите Заливку (Fill) слоя — 0%, Непрозрачность (Opacity) — 80% и примените для узора стиль Обводка (Layer Style — Stroke).



Профессиональный мобильный портал


14. Используя инструмент Эллипс (Ellipse Tool), нам необходимо нарисовать часть круга цветом #1C5683, как показано в рисунке ниже:



Профессиональный мобильный портал


Профессиональный мобильный портал


15. При помощи инструмента Прямоугольник (Rectangle Tool) создайте первичный слой, предназначенный для меню сайта, расположенный на заголовке сайта:



Профессиональный мобильный портал


16. Установите Заливку (Fill) слоя — 0% и примените для слоя стиль Отбрасывание тени
(Layer Style — Drop Shadow).



Профессиональный мобильный портал


Наложение градиента:



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


17. Предыдущим инструментом Прямоугольник (Rectangle Tool) создайте ещё один слой, предназначенный для панели меню:



Профессиональный мобильный портал


18. Установите Заливку (Fill) слоя — 0% и примените для слоя стиль Отбрасывание тени
(Layer Style — Drop Shadow).



Профессиональный мобильный портал


Наложение градиента:



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


19. Теперь при помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте кнопку:



Профессиональный мобильный портал


Профессиональный мобильный портал


20. Установите Заливку (Fill) слоя — 0% и примените для кнопки стиль Наложение градиента (Layer Style — Gradient Overlay).



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


21. Сделайте 3 копии нового слоя и 2 последние копии подкорректируйте в режиме Свободного трансформирования (Free Transform).



Профессиональный мобильный портал


22. Другую копию также следует исправить инструментом Свободное трансформирование
(Free Transform).



Профессиональный мобильный портал


Профессиональный мобильный портал


23. Установите Заливку (Fill) слоя — 0% и примените для копии стиль Наложение градиента (Layer Style — Gradient Overlay).



Профессиональный мобильный портал


Настройки градиента:



Профессиональный мобильный портал


24. При помощи инструмента Линия (Line Tool) нарисуйте разделительные горизонтальные полосы цветом #345C7A, как показано на рисунке ниже:



Профессиональный мобильный портал


25. Заполните разделы сайта соответствующими картинками:



Профессиональный мобильный портал


26. Теперь напишите название сайта. Настройки для “Mobile Portal”:



Профессиональный мобильный портал


Настройки для “mobile world’s Novelties”:



Профессиональный мобильный портал


Профессиональный мобильный портал


27. Теперь напишите названия для кнопок меню сайта. Настройки для “site blog”:



Профессиональный мобильный портал


Настройки для названий других кнопок:



Профессиональный мобильный портал


Профессиональный мобильный портал


28. Вставьте названия разделов сайта, соблюдая нижеуказанные требования:



Профессиональный мобильный портал


Профессиональный мобильный портал


29. Заполните разделы соответствующим текстом. Настройки указаны ниже:



Профессиональный мобильный портал


Профессиональный мобильный портал


30. Теперь напишите остальной текст для других разделов. Настройки для “Lorem ipsum dolor sit amet.”:



Профессиональный мобильный портал


Настройки для основного текста:



Профессиональный мобильный портал


Настройки для “Praesent vestibulum molestie”:



Профессиональный мобильный портал


Настройки для зелёного текста:



Профессиональный мобильный портал


Настройки для названий параграфов текста разделов:



Профессиональный мобильный портал


Профессиональный мобильный портал


31. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте 3 прямоугольника цветом #4B86B0, и инструментом Эллипс (Ellipse Tool) создайте 3 маленьких круга цветом #25E217.



Профессиональный мобильный портал


32. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите необходимый элемент, как показано ниже:



Профессиональный мобильный портал


Нарисуйте звезду белого цвета около логотипа:



Профессиональный мобильный портал


Профессиональный мобильный портал


33. Сделайте 6 копий последнего слоя и в режиме Свободного трансформирования
(Free Transform) немного уменьшите их и расположите так, как показано в следующем рисунке:



Профессиональный мобильный портал






Делаем Web-дизайн

Вас может также заинтересовать:

17 декабря 2017

Дата анонса: 2008/01/24 Эффективное разрешение, МП: 8 Диагональ ЖК-дисплея, дюймы: 2.5

17 декабря 2017

Новинка F660EXR не больше прежней модели и использует фирменную 16-мегапиксельную матрицу EXR CMOS с самой современной и признанной технологией обработки изображения Fujifilm. Среди многочисленных усовершенствований трехдюймовый ЖК-дисплей с разрешением 460 000 точек и инновационная функция отслеживания лиц, которая обеспечивает фокусировку по вашему требованию. Отличительным свойством моделей серии F от Fujifilm является безупречное качество изображений при съемке в условиях недостаточной освещенности. Благодаря объективу Fujinon с 15-кратным оптическим зумом и стильному, надежному корпусу камера FinePix F660EXR станет незаменимым компаньоном в любом путешествии.