Дизайн блога Wordpress

Конечный результат:


Дизайн блога Wordpress


1. Создайте новый документ с холстом размером 900х1300 пикселей и залейте фон цветом #0f181f, используя инструмент Заливка (Paint Bucket Tool). Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольник на всю ширину холста высотой 70 пикселей. Установите цвет заливки — #18222e, цвет фона — #101921, залейте выделение зеркальным градиентом в новом слое, используя инструмент Градиент (Gradient Tool). Потом примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

Отбрасывание тени (Режим – Умножение):


Дизайн блога Wordpress


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):


Дизайн блога Wordpress

Дизайн блога Wordpress


2. В верхней части холста создайте выделение высотой 1-2 пикселя на всю ширину холста. Залейте выделение цветом #1d8dcf.


Дизайн блога Wordpress


3. Напишите заголовок сайта и слоган справа от него. Напишите слова “MY” и “WORDPRESS” в отдельных слоях.


Дизайн блога Wordpress


4. К слою со словом “WORDPERSS” примените следующие стили:

Отбрасывание тени (Режим – Умножение):


Дизайн блога Wordpress


Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Дизайн блога Wordpress


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн блога Wordpress


5. Для слоя со словом “MY” примените те же стили, но при наложении градиента используйте оттенки белого цвета. Потом напишите разделы меню сверху справа от слогана. Отделите начало меню от слогана двумя линиями разного цвета. Также нужно подсветить активный раздел “HOME” под слоем с текстом создайте фигуру инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей. Залейте эту фигуру градиентом (цвета показаны ниже):


Дизайн блога Wordpress


6. В конце меню также создайте две линии, как и в начале и добавьте иконку RSS.


Дизайн блога Wordpress


7. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста высотой 180-190 пикселей. Установите цвет заливки — #0576bb и цвет фона — #3ea6e5. Сделайте заливку этого выделение линейным градиентом.


Дизайн блога Wordpress


8. Найдите в интернете кисти облаков и обрисуйте залитую голубую область.


Дизайн блога Wordpress


9. Поверх слоя с облаками напишите цитату (или оставьте эту область пустой). К тексту примените те же стили слоя, что и для заголовка. Только Отбрасывание тени было изменено.


Дизайн блога Wordpress


10. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) в режиме контуров и установите значение радиуса – 10 пикселей. Также установите значение Добавить к области контура (Add to path area)


Дизайн блога Wordpress


11. Справа создайте прямоугольник, как показано ниже. Цвет этой фигуры должен быть таким же, какой и у большого прямоугольника. Мой цвет — #3ea6e5.


Дизайн блога Wordpress


12. В этом прямоугольнике добавьте лупу, создайте поисковую строку и кнопку “Go!”. Можете ещё написать текст, дающий пользователям понять, что это за область.


Дизайн блога Wordpress


13. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте две фигуры на обеих сторонах поисковой области, как показано ниже. Залейте их тем же цветом, что и фон.


Дизайн блога Wordpress

Дизайн блога Wordpress


14. Ниже создайте ещё одну область и над ней напишите название.


Дизайн блога Wordpress


15. Добавьте туда иконки (свои я взял с сайта dryicons.com) и немного текста.


Дизайн блога Wordpress

Дизайн блога Wordpress

Дизайн блога Wordpress


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


Дизайн блога Wordpress


17. Также скопируйте название сайта и слоган, перетащите копии вниз и добавьте информацию о правах.


Дизайн блога Wordpress


18. Добавьте виджеты и создайте разделители между ними.


Дизайн блога Wordpress


19. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 20 пикселей создайте небольшой прямоугольник для области контента. Залейте его цветом #0b1116 и добавьте 1-пиксельную обводку цветом #15222c. Создайте новый слой (Create New Layer) над этим слоем и объедините их (Ctrl+E). После этого нельзя будет редактировать стили слоя. Теперь добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом снизу вверх, чтобы получить такой результат.


Дизайн блога Wordpress


20. Заполните этот прямоугольник текстом и картинкой.


Дизайн блога Wordpress


21. Таким же образом создайте ещё несколько областей с новостями и добавьте навигацию по страницам внизу.


Дизайн блога Wordpress


Финальный результат:


Дизайн блога Wordpress





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

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

16 декабря 2017

В декабре на DVD-носителях выйдет немало интересных фильмов, которые стали лидерами проката в 2007 году в России: «Трансформеры», «Рататуй», «Хитмэн» и другие.

16 декабря 2017

16 декабря 2017

Байонет: Nikon F Тип объектива: широкоугольный Фокусное расстояние: постоянное