Дизайн портфолио

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


Дизайн портфолио


1. Создайте новый документ с холстом размером 800х750 пикселей , кликните дважды на фоновом слое, чтобы разблокировать его. Потом примените стиль Наложение градиента (Layer Style — Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Дизайн портфолио


2. В верхней части холста создайте прямоугольное выделение высотой 33 пикселя на всю ширину холста. Используйте для этого инструмент Прямоугольная область (Rectangular Marquee Tool). Залейте выделение любым цветом в новом слое и примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

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


Дизайн портфолио


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


Дизайн портфолио

Дизайн портфолио


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


Дизайн портфолио


4. Кликните правой кнопкой на контуре и выберите Выполнить заливку контура (Fill Path), цвет не имеет значения. Потом инструментом Перо (Pen Tool) кликните правой кнопкой на контуре и выберите Удалить контур (Delete Path). К слою с прямоугольником примените такие стили слоя:

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


Дизайн портфолио


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


Дизайн портфолио


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


Дизайн портфолио


Установите Непрозрачность слоя – 50%:


Дизайн портфолио


5.Внутри созданного прямоугольника напишите заголовок сайта. Я использовал шрифт “Arial”, жирный (bold). Справа напишите название нескольких разделов.


Дизайн портфолио


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


Дизайн портфолио


7. Примените к ней такие стили слоя:

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


Дизайн портфолио


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


Дизайн портфолио


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


Дизайн портфолио


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


Дизайн портфолио


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


Дизайн портфолио


9. Потом перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните ваш узор. Вернитесь в основной документ, создайте новый слой (Create New Layer), сделайте выделение слоя с большим прямоугольником (Ctrl+Click) и залейте его сохранённым узором в новом слое, используя инструмент Заливка (Paint Bucket Tool). Установите Непрозрачность слоя с узором – 21% и примените стиль Наложение цвета (Layer Style — Color Overlay): цвет – белый.


Дизайн портфолио


10. Создайте ещё один прямоугольник внутри первого.


Дизайн портфолио


11. Примените к нему такие стили слоя:

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


Дизайн портфолио


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


Дизайн портфолио


12. Сделайте выделение слоя с последним внутренним прямоугольником (Ctrl+Click), примените Сжатие (Modify – Contract) со значением 8 пикселей. Найдите какую-нибудь картинку, которую вы хотите вставить в эту область и скопируйте её в буфер обмена. Перейдите в меню Редактирование»Вклеить в (Edit > Paste into).


Дизайн портфолио


13. К слою с изображением примените стиль Внутренняя тень (Layer Style — Inner Shadow):

Режим – Умножение


Дизайн портфолио


14. На правой стороне напишите заголовок и текст новости.


Дизайн портфолио


15. Сделайте копию слоя с областью контента столько раз, сколько нужно. Также скопируйте верхнюю полоску и поместите её вниз. Она будет футером, добавьте туда нужную информацию.


Дизайн портфолио





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

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

11 декабря 2018

11 декабря 2018

Выбор камеры для отпуска – одна из самых популярных тем летом. А уж выбор зеркальной камеры – вообще особый разговор. Сегодня мы сравним две популярные зеркальные камеры начального уровня. Речь пойдет о Nikon D5000 и Canon 500D.

11 декабря 2018

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