Создаём темную Wordpress тему

1. Создайте новый документ размером 1280×1400 px и разрешением 72 dpi. При помощи инструмента Заливка (Paint Bucket Tool) залейте фон цветом #252525.



Создаём темную Wordpress тему


2. Выберите инструмент Линия (Line Tool) и нарисуйте границы белого цвета между разделами блога.



Создаём темную Wordpress тему


3. Загрузите с Интернета набор кистей brushes для Adobe Photoshop, называемые Scratchygrunge_drowningheart_stock, и используйте их на новом слое (Create New Layer). Сотрите границы блога. Цвет кисти — #252525.



Создаём темную Wordpress тему


Создаём темную Wordpress тему


4. При помощи инструмента Линия (Line Tool) создайте панель поиска цветом #A8A8A8 на правой части заголовка блога.



Создаём темную Wordpress тему


5. Вставьте название блога и меню заголовка, соблюдая настройки ниже (используйте этот шрифт font). Настройки для “MYBLOG”:



Создаём темную Wordpress тему


Названия кнопок меню. Настройки для названий кнопок:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


6. Создайте новый слой (Create New Layer) и используйте кисти Scratchygrunge_drowningheart_stock для создания логотипа сайта. Цвет кисти — #252525.



Создаём темную Wordpress тему


7. Напишите название раздела блога. Настройки для “25”:



Создаём темную Wordpress тему


Для “sep”:



Создаём темную Wordpress тему


Для “My New Post”:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


8. Объедините в группу все слои, содержащие названия разделов. Сделайте 3 копии группы и в режиме Свободного трансформирования (Free Transform) расположите их, как на рисунке ниже:



Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


Создаём темную Wordpress тему


10. Вставьте ссылку на основании раздела. Настройки для “Read more…”:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


11. При помощи инструмента Эллипс (Ellipse Tool) создайте значок слева ссылки.



Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


Создаём темную Wordpress тему


14. Объедините в группу все слои, содержащие слои ссылки и её значка. Сделайте 3 копии группы и инструментом Свободное трансформирование (Free Transform) расположите их, как показано ниже:



Создаём темную Wordpress тему


15. Вставьте надпись на правую сторону, соблюдая требования ниже. Настройки для “about me”:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


16. Слева надписи создайте крестик белого цвета с помощью инструмента Прямоугольник (Rectangle Tool). Сначало создайте линию, затем, удерживая Shift, вставьте вторую часть тем же инструментом.



Создаём темную Wordpress тему


17. Под созданным крестиком нарисуйте аватар автора:



Создаём темную Wordpress тему


18. На правой стороне аватара напишите описание:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


19. При помощи инструмента Линия (Line Tool) создайте под аватаром разделы дополнительного меню цветом #D3D3D3.



Создаём темную Wordpress тему


20. Создайте новый слой (Create New Layer) и ранее используемой кистью сотрите линию меню. Цвет кисти — #252525.



Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


22. Напишите названия разделов дополнительного меню:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


23. При помощи инструмента Перо (Pen Tool) нарисуйте символ белого цвета на линии меню.



Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


25. При помощи инструмента Произвольная фигура (Custom Shape Tool) нарисуйте маленькую звезду цветом #F4E782.



Создаём темную Wordpress тему


Создаём темную Wordpress тему


26. Примените для звезды стиль Внутреннее свечение (Layer Style — Inner Glow).



Создаём темную Wordpress тему


Создаём темную Wordpress тему


27. Сделайте 5 копий слоя звезды и инструментом Свободное трансформирование
(Free Transform) расположите копии так:



Создаём темную Wordpress тему


28. Создайте ссылку, расположенную под аватаром и возле звезды:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


29. Теперь вставьте названия категорий. Настройки указаны ниже:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


30. Также впишите псевдонимы пользователей и их комментарии в разделе “Comments”. Настройки для псевдонимов пользователей:



Создаём темную Wordpress тему


Для комментариев:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


31. Напишите название на панеле поиска. Настройки для “SEARCH”:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


32. На новом слое (Create New Layer) выберите кисти Scratchygrunge_drowningheart_stock и немного подотрите панель поиска. Цвет кисти — #252525.



Создаём темную Wordpress тему


33. Вставьте надпись в панель поиска:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


34. Создайте несколько дополнительных ссылок на основании сайта:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


36. Примените для кнопки стиль Внешнее свечение (Layer Style — Outer Glow):



Создаём темную Wordpress тему


Внутреннее свечение:



Создаём темную Wordpress тему


Наложение цвета:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


38. Используя инструмент Произвольная фигура (Custom Shape Tool), нарисуйте белую стрелу. Инструментом Свободное трансформирование (Free Transform) переверните стрелу и направьте её вверх:



Создаём темную Wordpress тему


Создаём темную Wordpress тему


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



Создаём темную Wordpress тему


Создаём темную Wordpress тему


Создаём темную Wordpress тему








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

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

16 ноября 2018

16 ноября 2018

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

16 ноября 2018

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