Веб дизайн темы Wordpress

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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


3. Создайте новый слой (Create New Layer) и выберите инструмент Прямоугольная область (Rectangular Marquee Tool) для выделения зоны, показанной ниже, затем инструментом Заливка (Paint Bucket Tool) залейте эту область белым цветом:



Веб дизайн темы Wordpress


4. Примените для зоны фильтр Добавить шум (Add Noise Filter):



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


5. Установите Непрозрачность (Opacity) слоя — 50%, Заливку (Fill) слоя — 3% и Режим наложения – Растворение (Blending Mode – Dissolve).



Веб дизайн темы Wordpress


6. Создайте новый слой (Create New Layer) над последним слоем и объедините их (Ctrl+E). Добавьте маску слоя, кликнув на иконку внизу палитры слоёв. Затем выберите инструмент Кисть (Brush Tool) (Непрозрачность (Opacity) — 20%) чёрного цвета и немного сотрите фон заголовка.



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


7. При помощи инструмента Произвольная фигура (Custom Shape Tool) вставьте несколько лучей на заголовок сайта цветом #000E11.



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


9. Добавьте маску слоя, нажав на иконку внизу палитры слоёв. Выберите стандартную кисть чёрного цвета и сотрите середину лучей.



Веб дизайн темы Wordpress


10. Создайте новый слой (Create New Layer) и выделите зону под заголовком сайта. Залейте зону инструментом Заливка (Paint Bucket Tool) цветом #000E11.



Веб дизайн темы Wordpress


11. Используя инструмент Прямоугольник (Rectangle Tool), выделите некоторую зону на основании цветом #001118.



Веб дизайн темы Wordpress


12. Примените для слоя стиль Внутренняя тень (Layer Style — Inner Shadow).



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


15. Выберите инструмент Линия (Line Tool) и создайте несколько вертикальных разделительных линий чёрного цвета для создания границ между кнопками.



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


16. Напишите названия кнопок на заголовке сайта, соблюдая настройки ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


17. Создайте границу между заголовком и остальной страницей сайта. Используйте для этого инструмент Линия (Line Tool) (толщина — 2 рх) и цвет — #121F25.



Веб дизайн темы Wordpress


18. Напишите название сайта в середине страницы:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


22. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 5 рх), нарисуйте кнопку справа окна поиска.



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


25. Напишите название раздела. Настройки указаны ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


26. Напишите дату и автора текста. Настройки для “Thersday, 12 September 2008”:



Веб дизайн темы Wordpress


Для “Written by Administrator”:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


27. Теперь вставьте сам текст в раздел. Настройки указаны ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


28. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 5 рх) нарисуйте ещё одну кнопку под текстом:



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


30. Теперь напишите название кнопки, соблюдая требования ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


31. При помощи инструмента Прямоугольник (Rectangle Tool) создайте панель на правой стороне для меню “Categories”, “Login” и т.д. Используйте цвет — #06151C.



Веб дизайн темы Wordpress


32. Напишите название бокового меню. Настройки указаны ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


33. Выберите инструмент Карандаш (Pencil Tool) (кисть — 1 px) и нарисуйте маленькое пятно на основании названия.



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


34. Сделайте 7 копий слоя пятна и в режиме Свободного трансформирования (Free Transform) расположите их, как показано ниже:



Веб дизайн темы Wordpress


35. Вставьте названия категорий справа от точек. Настройки показаны ниже:



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


36. Теперь изобразите сияние на логотипе. Создайте новый слой (Create New Layer) и выберите инструмент Прямоугольная область (Rectangular Marquee Tool) для создания белого луча. Трансформируйте выделение (Transform Selection), немного наклонив луч. Инструментом Заливка (Paint Bucket Tool) залейте выделенную зону.



Веб дизайн темы Wordpress


37. Скопируйте слой луча и в режиме Свободного трансформирования (Free Transform) переверните копию, как показано ниже:



Веб дизайн темы Wordpress


38. Таким же методом создайте ещё 2 луча размером поменьше.



Веб дизайн темы Wordpress


39. Объедините все слои, содержащие лучи, в единый слой (Ctrl+E). Для нового слоя установите Заливку (Fill) — 0% и примените стиль Наложение градиента
(Layer Style — Gradient Overlay).



Веб дизайн темы Wordpress


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



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


40. Создайте новый слой (Create New Layer) и стандартной кистью белого цвета придайте лучам яркость.



Веб дизайн темы Wordpress


Веб дизайн темы Wordpress


Веб дизайн темы Wordpress








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

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

18 июля 2018

Дата анонса: 2010/02/03 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 2.7

18 июля 2018