Web дизайн блога

В результате мы получим такой результат:


Web дизайн блога


1. Создайте новый документ размером 1024×852 пикселей и разрешением 72 dpi. Инструментом Градиент (Gradient Tool) сделайте заливку фона, как показано ниже:


Web дизайн блога


2. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру, как показано ниже:


Web дизайн блога


3. Примените к фигуре стиль Наложение градиента (Layer Style — Gradient Overlay) (Режим – Нормальный; Стиль – Линейный):


Web дизайн блога

Web дизайн блога


4. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру цветом #4ECF24. Потом инструментом Прямоугольник (Rectangle Tool), удерживая Alt, создайте фигуру, как показано ниже. Это действие отрежет нижнюю часть первого прямоугольника.


Web дизайн блога


5. К слою с зелёной фигурой примените стиль Наложение градиента
(Layer Style — Gradient Overlay):


Web дизайн блога

Web дизайн блога


6. Используя два предыдущих инструмента, проделайте то же самое, чтобы получить такой результат:


Web дизайн блога


7. Перейдите в меню Стилей слоя (Layer Style — Blending Options) для слоя с полученной фигурой и примените эти стили:

Внутренняя тень (Режим – Умножение):


Web дизайн блога


Сделайте слой с зелёной фигурой невидимым. Наложение градиента:


Web дизайн блога

Web дизайн блога


8. Создайте фигуру, показанную ниже, цветом #005782, используя инструмент Прямоугольник (Rectangle Tool):


Web дизайн блога


9. К фигуре примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Web дизайн блога

Web дизайн блога


10. Сделайте слой с зелёной фигурой видимым и расположите слои, как показано ниже:


Web дизайн блога


11. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру, как показано ниже:


Web дизайн блога


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


Web дизайн блога

Web дизайн блога


13. Инструментом Прямоугольник (Rectangle Tool) создайте кнопку цветом #289FCE.


Web дизайн блога


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


Web дизайн блога


15. К созданной фигуре примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Web дизайн блога

Web дизайн блога


16. Инструментом Перо (Pen Tool) нарисуйте треугольник цветом #C3C3C3 на маленьком прямоугольнике.


Web дизайн блога

Web дизайн блога


17. Инструментом Линия (Line Tool) #C3C3C3 нарисуйте линии, как показано на рисунке:


Web дизайн блога


18. Инструментом Карандаш (Pencil Tool) нарисуйте треугольник цветом #888888:


Web дизайн блога

Web дизайн блога


19. Сделайте копию треугольника 5 раз и расположите треугольники так:


Web дизайн блога


20. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта, используя эти настройки:


Web дизайн блога

Web дизайн блога


21. К текстовому слою примените стиль Отбрасывание тени (Layer Style — Drop Shadow):


Web дизайн блога


22. Добавьте ещё одну часть названия сайта:


Web дизайн блога

Web дизайн блога


23. К написанному тексту примените стиль Отбрасывание тени (Layer Style — Drop Shadow):


Web дизайн блога


24. Подпишите кнопки меню:


Web дизайн блога

Web дизайн блога


25. Используя эти настройки, напишите основной текст блога:


Web дизайн блога

Web дизайн блога


26. Подпишите меню, расположенное сверху:


Web дизайн блога

Web дизайн блога





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

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

17 января 2019

Дата анонса: 2007/05/21 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 176

17 января 2019

Дата анонса: 2012/10/24 Эффективное разрешение, МП: 14.2 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 338

17 января 2019