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

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


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


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-дизайн

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

24 сентября 2018

Байонет: Canon EF Тип объектива: телеобъектив Фокусное расстояние: переменное

24 сентября 2018

Светосильный стандартный объектив для работы в любых жанрах от пейзажа для репортажа. При использовании с цифровыми APS-C камерами имеет классическое портретное фокусное расстояние 75 мм. Прочная и надежная конструкция, уникально высокая светосила, круглая диафрагма, многослойное просветление линз, быстрый и точный автофокус, минимальная дистанция фокусировки 45 см.

24 сентября 2018

Дата анонса: 2011/09/15 Эффективное разрешение, МП: 12.1 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 193