Витрина ваших работ

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


Портфолио web-дизайна


Шаг 1
Откройте любую страницу web-сайта в Photoshop. Создайте новый документ размером 200х120 пикселей, вырежьте в него область названия сайта с логотипом. Потом создайте ещё один документ такого же размера и вырежьте другой дизайн сайта. Продолжайте делать это, пока не получите нужное количество логотипов.


Витрина ваших работ


Шаг 2
Я выбрал 9 работ web-дизайна. Теперь нужно расположите эти сайты таблицей (3х3). Она будет размером 600х360 пикселей. Но расстояние между элементами таблицы будет 20 пикселей, значит нужно добавить 40 пикселей к ширине и высоте.
Создайте новый документ размером 640х400 пикселей и вставьте первый логотип. Его нужно будет уменьшить в режиме Масштабирования (Transform – Scale). Введите значения в настройках сверху, как показано ниже (X и Y – координаты слоя). Нужно правильно указать, где будет начинаться логотип (0 пикселей от края холста) + половина ширины объекта (100 пикселей это половина 200 пикселей – ширины логотипа), иначе все объекты будут расположены некорректно. Мы прибавляем половину ширины потому, что центр преобразования находится в середине. То есть начало координат – в середине слоя.


Витрина ваших работ


Шаг 3
Расположите остальные 8 логотипов. Второй логотипа расположите так:
X: 320 пикселей — 20 пикселей – отступ от первого логотипа, 200 – ширина логотипа и 100 пикселей — половина ширины объекта (смещение относительно середины).
Y: 60

Таким образом, расположите остальные элементы:


Витрина ваших работ


Шаг 4
Объедините все слои с иконками web-сайтов, перейдите в режим Перспективы (Transform – Perspective) и измените слой, как показано ниже:


Витрина ваших работ


Шаг 5
В режиме Масштабирования (Transform – Scale), на этот раз нам нужны значения Ш и В (W и H) – это размеры слоя. Установите значение ширины – 50% и вы получите такой результат:


Витрина ваших работ


Шаг 6
Перейдите в меню Изображение»Размер холста (Image > Canvas Size) и увеличьте холст вниз на 100 пикселей. Расположите иконки у левого края холста, создайте новый слой (Create New Layer) под слоем с иконками и назовите его ‘background’, залейте его тёмным цветом, чтобы он лучше сочетался с вашими иконками.


Витрина ваших работ


Шаг 7
Теперь к слою с иконками сайтов примените стиль Внешнее свечение (Layer Style — Outer Glow):


Витрина ваших работ


Шаг 8
Сделайте копию слоя с иконками, отразите по вертикали (Transform — Flip Vertical), затем перейдите в режим Искажения (Transform – Distort) и измените копию так, чтобы создать отражение оригинального слоя с иконками. У меня заняло некоторое время, чтобы создать правильно реалистичное отражение. Когда закончите, скройте эффект внешнего свечения с копии.


Витрина ваших работ


Шаг 9
Уменьшите Непрозрачность (Opacity) слоя с отражением до 30%. Перейдите в меню Слой»Слой-маска»Показать все (Layer > Add Layer Mask > Reveal All). Сделайте заливку градиентом цветом от чёрного к прозрачному справа налево. Правая часть отражения будет постепенно исчезать.


Витрина ваших работ


Шаг 10
Создайте новый слой (Create New Layer) над фоновым слоем, но под слоем с иконками. Назовите его ‘clouds’. Примените фильтр Облака (Clouds Filter) и установите Непрозрачность (Opacity) – 25%. Выберите большой мягкий ластик и сотрите большую часть облаков, оставив интенсивную область далеко в конце иконок.


Витрина ваших работ


Шаг 11
Создайте новый слой (Create New Layer) над слоем ‘clouds’ и назовите его ‘lights’. Выберите большую мягкую кисть и сделайте несколько мазков в конце таблицы иконок разного цвета. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 30%.


Витрина ваших работ


Шаг 12
Создайте новый слой (Create New Layer) над слоем с иконками и назовите его ‘light lines’. Инструментом Перо (Pen Tool) нарисуйте длинную волнистую линию вокруг иконок, как показано ниже. Потом выберите инструмент Кисть (Brush Tool), установите его размер – 1 пиксель, затем инструментом контура кликните на холсте правой кнопкой и выберите Обводка контура (Stroke Path). В появившемся окне выберите Кисть (Brush). У вас получится линия толщиной 1 пиксель.


Витрина ваших работ


Шаг 13
Выберите слой с иконками и кликните где-нибудь на фоне инструментом Волшебная палочка (Magic Wand Tool). Это сделает выделение области вокруг иконок. Сделайте Инверсию выделения (Select – Inverse), чтобы выделить сами иконки. Выберите слой ‘light lines’ и нажмите Delete. Ваша белая линия будет находиться позади иконок.


Витрина ваших работ


Шаг 14
К слою с белой линией примените стиль Внешнее свечение (Layer Style — Outer Glow):


Витрина ваших работ


Шаг 15
Установите Непрозрачность (Opacity) слоя с линией – 15%.


Витрина ваших работ


Шаг 16
Вставьте в документ изображения человека, смотрящего в направлении иконок. Я вырезал девушку из этой фотографии. Девушка на фотографии была тёмной, но если ваша фотография светлая, то затемните её, так как источник света находится на иконках.


Витрина ваших работ


Шаг 17
Сделайте копию слоя с девушкой, и мы перейдём к созданию тени. Мы воспользуемся тем же способом, что и для создания отражения иконок. Когда закончите, поместите слой с тенью под слой с девушкой, установите Непрозрачность (Opacity) – 30% и примените стиль Наложение цвета (Layer Style — Color Overlay), цвет – чёрный:


Витрина ваших работ


Залючение:
В конце можете подтереть конец тени, чтобы она переходила постепенно в фон.


Портфолио web-дизайна





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

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

17 декабря 2017

17 декабря 2017

17 декабря 2017