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

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


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


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

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

21 марта 2019

Дата анонса: 2010-01-10 18:38:11 Эффективное разрешение, МП: 14 Диагональ ЖК-дисплея, дюймы: 3

21 марта 2019

Человечество всегда любило делиться на группы: католики и протестанты, вегетарианцы и мясоеды, поклонники сенсорных экранов и те, кто не испытывает к ним особой тяги. К счастью, техно-гики вряд ли развяжут войну или крестовый поход против тех, кто не разделяет их точку зрения, несмотря на то, что армия приверженцев «пальцеориентированных» интерфейсов растет со скоростью развития самой технологии. Как же это все устроено?

21 марта 2019