Создаем аккуратный макет портфолио в Фотошоп. Портфолио в фотошопе


Создаем изящный макет портфолио в Фотошоп

Еще один урок по созданию портфолио, друзья, поскольку регулярно появляются все больше новичков, пытающихся создать свой первый дизайн сайта. Сегодня мы создадим изящный макет портфолио в Фотошопе.

Примечание: В источнике урока отсутствуют некоторые изображения. В архиве вы найдёте альтернативный вариант материалов для выполнения урока.

Начинаем наш урок по созданию макета изящного портфолио! 

Шаг 1

Создайте новый документ и установите для него следующие размеры: Ширина (Width) 980, Высота (Height) 1606 пикселей. Далее, полностью залейте холст цветом #F1F1F1.

Шаг 2

Возьмите Инструмент Прямоугольная область (Rectangular marquee tool (М)) и выделите прямоугольник высотой в 50 пикселей от самого верхнего края холста, это будет ваша шапка сайта (хедер). Залейте его цветом #212121.

Шаг 3

С левой стороны мы создадим наш текстовый логотип. Для этого воспользуйтесь шрифтом Pacifico, размер 39 пунктов, цвет #ffffff.

Шаг 4

Далее, кликаем дважды по слою с логотипом и в открывшемся диалоговом окне выбираем пункт Тень (Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #000000
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 138
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 5
  • Размах (Spread): 0
  • Размер (Size): 5

Шаг 5

С правой стороны мы нарисуем наше навигационное меню. Для него используйте шрифт Arial Bold, размер 14 пунктов, цвет #ffffff.

Шаг 6

Далее, кликаем дважды по слою с навигацией и в открывшемся диалоговом окне выбираем пункт Тень (Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) установите такие же, как и для логотипа:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #000000
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 138
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 5
  • Размах (Spread): 0
  • Размер (Size): 5

Шаг 7

Теперь, создайте новый слой и назовите его, например, "slide-bg" (фон слайда). Залейте его цветом #F46554.

Шаг 8

Возьмите инструмент Область (горизонтальная строка) (Single Row Marquee Tool (M)), нарисуйте линию на границе между шапкой сайта (хедером) и слоем "slide-bg" (фон слайда) и залейте созданное выделение цветом #fa9588.

Шаг 9

Теперь, добавим текст на нашу домашнюю страничку. Для основного текста используем шрифт League Gothic, размер 83 пункта, цвет #FFFFFF, для текста пониже возьмите шрифт Pacifico, размер 42 пункта, цвет #FFFFFF.

Шаг 10

Применим Стиль слоя (layer style) и ставим галочку рядом с пунктом Тень (Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #cf4a3a
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 138
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 1

Шаг 11

На данном этапе мы должны разместить наши изображения (возьмем те, что были использованы в предыдущих уроках). Разместите их так, чтобы одно из них находилось над другими (см. скриншот ниже).

Шаг 12

Для изображений из портфолио применим Стиль слоя (layer style) и выберем уже привычную для нас Тень (Drop shadow).

Примечание переводчика:

Настройки для тени (Drop shadow) выставьте такие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #000000
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 138
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 11
  • Размах (Spread): 0
  • Размер (Size): 29

Шаг 13

Возьмите инструмент Прямоугольная область (Rectangular marquee tool (М)) и создайте выделение размером примерно так, как это показано на скриншоте ниже.

Шаг 14

Создайте новый слой, назовите его, например, website-black и залейте его цветом #212121.

Шаг 15

Для слоя website-black примените стиль слоя (layer style) и выберите сначала Тень (drop shadow), а затем Обводку (Stroke).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #8E8D8D
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): -90
  • Снимите галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 5
  • Размах (Spread): 0
  • Размер (Size): 5

Примечание переводчика:

Характеристики для Обводки (Stroke) должны быть следующие:

  • Размер (Size): 3
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blending Mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки(Fill type): Цвет(Color)
  • Цвет (Color): #323232

Шаг 16

Далее, мы используем иконки, которые мы загрузили ранее. Для заголовков рядом с иконками используйте шрифт PT Sans, размер 20 пунктов, цвет #FFFFFF.

Шаг 17

Для слоя с текстом применим Стиль слоя (layer style).

Примечание переводчика:

Настройки для тени (Drop shadow) должны быть следующие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #000000
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 138
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 5
  • Размах (Spread): 0
  • Размер (Size): 5

Шаг 18

Также, нам нужно добавить какой-нибудь текст (примечание переводчика: можете воспользоваться для этого генератором текста lorem ipsum). В результате у вас должно получиться нечто похожее на скриншот внизу.

Шаг 19

После слоя website-black создайте новый слой и на нем нарисуйте прямоугольник с помощью все того же инструмента Прямоугольная область (Rectangular marquee tool (М)) и залейте его белым цветом (#FFFFFF).

Шаг 20

Далее через Стиль слоя (layer style) добавьте обводку (stroke).

Примечание переводчика:

Параметры для Обводки (Stroke) должны быть следующие:

  • Размер (Size): 1
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blending Mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки (Fill type): Цвет(Color)
  • Цвет (Color): #dddddd

Шаг 21

Теперь, активируйте инструмент Эллипс (Ellipse Tool (U)) и с зажатой клавишей SHIFT нарисуйте круг, назовите этот слой avatar-holder.

Выберите изображение, которое будете использовать (например, свою фотографию) и разместите ее над слоем avatar-holder.

Шаг 22

Правой кнопкой мыши кликните по изображению и в появившемся меню выберите Создать обтравочную маску (create clipping mask) или же просто нажмите комбинацию клавиш Ctrl+Alt+G.

Шаг 23

У вас должно получиться что-то вот такое.

Шаг 24

Далее, добавьте пару строчек текста. Для него используйте шрифт PT Sans, размер 14 пунктов, цвет черный (#000000).

Шаг 25

Теперь, нам нужно создать форму для размещения постов. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) и установите радиус скругления 5 пикселей. Залейте фигуру белым цветом (#FFFFFF).

Шаг 26

Возьмите изображение вот из этого урока (http://sanjaykhemlani.com/create-coming-soon-page-with-countdown-timer/) и поместите выше слоя с прямоугольником. Далее, кликните правой клавишей мыши по нему и выберите пункт Создать обтравочную маску (create clipping mask).

Шаг 27

Теперь, с помощью Стиля слоя (layer style) примените Обводку (stroke) к нашему слою с прямоугольником.

Примечание переводчика:

Параметры для Обводки (Stroke) установите следующие:

  • Размер (Size): 1
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blending Mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки(Fill type): Цвет(Color)
  • Цвет (Color): #ededed

Шаг 28

Объедините в группу слой с прямоугольником и слой с изображением (Ctrl+G) и продублируйте ее два раза. Затем просто поменяйте изображения и расположите группы так, как показано на скриншоте ниже. Для заголовков используйте шрифт PT Sans Bold, размер 14 пунктов, цвет черный (#000000), для категории возьмите шрифт PT Sans Italic, цвет #868686.

Шаг 29

Далее, мы нарисуем подвал сайта (футер) с помощью все того же инструмента Прямоугольная область (rectangular marquee tool(М)) и залейте его цветом #212121. Теперь, нарисуйте нижнюю часть футера и залейте ее цветом #000000. Убедитесь, что вы сделали это на новом слое. По сути, подвал он должен быть разделен на три колонки.

Шаг 30

В первой колонке мы добавим немного текста. Для заголовка возьмите шрифт PT Sans Bold, размер 14 пунктов, цвет #FFFFFF. Для самого текста шрифт PT Sans Regular, размер 12 пунктов.

Шаг 31

Для следующей колонки мы создадим изображение пользователя. Возьмите инструмент Эллипс (Ellipse Tool (U)), нарисуйте круг и залейте его белым цветом (#FFFFFF).

Шаг 32

Далее, добавьте фото и нажмите правой клавишей мыши по нему. В появившемся окне выберите пункт Создать обтравочную маску (create clipping mask).

Шаг 33

Теперь, с помощью Стиля слоя (layer style) применим Обводку (stroke) к нашему слою с изображением пользователя.

Примечание переводчика:

Параметры для Обводки (Stroke) установите следующие:

  • Размер (Size): 3
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blending Mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки (Fill type): Цвет (Color)
  • Цвет (Color): #ffffff

Шаг 34

Объедините в группу слой с кругом и слой с изображением (Ctrl+G) и продублируйте ее три раза. Затем поменяйте изображения. И у вас должна получиться вот такая вторая колонка:

Шаг 35

В третьей колонке у нас будет секция с новостной рассылкой. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) и установите радиус скругления 10 пикселей. Залейте фигуру черным цветом (#000000).

Шаг 36

Создайте на новом слое аналогичный прямоугольник со скругленными углами и отрежьте от него левую часть примерно на 2\3. Оставшуюся правую часть залейте цветом #F46554. Это будет наша кнопка отправки данных.

Шаг 37

С помощью Стиля слоя (layer style) добавим нашей кнопке Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay) и Обводку (Stroke).

Примечание переводчика:

Внутреннее свечение (Inner Glow)

  • Режим наложения(Blending mode): Экран (screen)
  • Непрозрачность (opacity): 75%
  • Цвет (Color): #f56856
  • Метод (Technique): Мягкий (Softer)
  • По краям (Edge)
  • Размер (Size): 4

Наложение градиента (Gradient Overlay)

  • Для градиента используйте цвета от #d1220b k #ab1502

Обводка (Stroke)

  • Размер (Size): 1
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blending Mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки(Fill type): Цвет (Color)
  • Цвет (Color): #8f1202

Шаг 38

Вот такая получилась кнопка. Также нужно добавить текст в поле для ввода. Шрифт возьмите PT Sans, размер 13 пунктов, цвет #FFFFFF.

Шаг 39

Для самой кнопки тоже надо добавить текст (например, Submit), шрифт возьмите такой же, как и в предыдущем шаге.

Шаг 40

Для текста кнопки добавим Тень (Drop shadow)

Примечание переводчика:

Настройки для тени (Drop shadow) должны быть следующие:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #000000
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 90
  • Уберите галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 1

Шаг 41

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

А вот и наш конечный результат!

Наш изящный макет портфолио закончен. Мы использовали при работе над ним различные базовые техники и разные подходы. Надеюсь, вы нашли для себя что-то новое при работе над этим макетом и сможете его использовать в своих персональных проектах.

Автор: sanjay

photoshop-master.ru

Создаем аккуратный макет портфолио в Фотошоп

Если вы находитесь в поисках работы в Интернете, вам необходимо иметь, как минимум, две вещи. Первое, это ваша квалификация, так называемые "скиллы", вторая вещь, которая вам обязательно потребуется, это портфолио с вашими уже выполненными работами, которые вы могли бы показать вашим потенциальным клиентам, чтобы склонить их к положительному решению заказать работу именно у вас. Хотя, вы можете получить определенный небольшой объем работы и без портфолио, но многие из клиентов все же предпочитают заказывать работу у тех, у кого портфолио все-таки есть. С ростом спроса в веб-индустрии, то тут, то там появляются много новых веб-дизайнеров, и соответственно, конкуренция среди них становится очень жесткой.

Единственный верный способ привлечь к себе внимание клиентов - это показать им вашу квалификацию, используя портфолио. Поэтому сегодня мы, как раз, и научимся создавать макет портфолио в программе Фотошоп, который вы сможете в дальнейшем использовать, чтобы заполучить себе работу.

Ниже вы можете увидеть конечный результат нашего урока, нам нужно, чтобы макет был аккуратный и фокусировал внимание на наших выполненных в прошлом работах:

Перед тем, как мы начнем, нам необходимо подготовиться:

Примечание: В источнике урока отсутствуют некоторые изображения. В архиве вы найдёте альтернативный вариант материалов для выполнения урока.

Что касается используемых изображений, то просто кликните правой кнопкой мыши по нужному вам изображению и сохраните его. Желательно сохранять все изображения в одну папку, чтобы вы точно знали, где его потом взять.

Итак, начинаем создавать наш макет портфолио.

Шаг 1

Создайте новый документ размером 980*1302 пикселя.

Активируйте инструмент Прямоугольная область выделения (rectangular marquee tool(М)), выделите область высотой в 100 пикселей от верхнего края холста и залейте эту область цветом #db5450.

Шаг 2

Для нашего логотипа мы используем шрифт Kaushan Script (см. доп.материалы) размером 34 пункта (pt), для текста пониже используйте шрифт Orator Std размером 15 пунктов и цвет #8e201c.

В правой части нашей "шапки" сайта (хедера) мы разместим главное навигационное меню. Для него предлагаю использовать шрифт Lucida Console размером 14 пунктов и цвет #ffffff. Все слова в меню напечатайте буквами в верхнем регистре (клавиша Caps).

Шаг 3

Далее, мы должны использовать изображение приложения для айфона и разместить его прямо под нашим логотипом.

Теперь применим Стиль слоя (Layer Style) к этому изображению. Для этого нужно сделать двойной щелчок левой клавиши мыши по данному слою. В открывшемся диалоговом окне выбираем пункт Обводка (Stroke).

Параметры для обводки задайте следующие:

  • Размер (Size): 1
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки (Fill type): Цвет (Color)
  • Цвет (Color): #c9c8c7

Теперь, создайте дубликат этого слоя, нажав сочетание клавиш (CTRL + J). Уменьшите размер этой копии на 1 пиксель и сдвиньте ее вниз, дважды нажав на клавишу-стрелку вниз на вашей клавиатуре. Сделайте еще одну копию, таким образом, у вас должно оказаться еще два слоя под исходным слоем.

Вот, что у вас в результате должно получиться:

Шаг 4

В данном шаге мы должны будем добавить текст описания рядом с изображением приложения для айфона. Для этих целей в заголовке мы используем шрифт Arial Bold 17 пунктов и цвет #3b3a3a , и шрифт Arial Regular размером 13 пунктов для самого текста.

Шаг 5

Далее, под описанием нам нужно создать кнопку. Для этого воспользуемся инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установим радиус скругления размером 5 пикселей.

Теперь применим Стиль слоя (Layer Style) к кнопке. Для этого нужно сделать двойной щелчок левой клавиши мыши по данному слою. В открывшемся диалоговом окне выбираем пункт Наложение градиента (Gradient Overlay). Цвета для градиента установите от #b3ca60 к #8fa541.

Далее поставьте галочку в чекбоксе Обводка (Stroke).

Параметры для обводки задайте следующие:

  • Размер (Size): 1
  • Расположение (Position): Внутри (Inside)
  • Режим наложения (Blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Тип заливки (Fill type): Цвет (Color)
  • Цвет (Color): #859а39

Вот что у нас в результате получилось:

Шаг 6

Продублируйте слой кнопкой и отключите стили слоя, нажав на иконку глазка. Залейте копию белым цветом (#FFFFFF) и перетащите копию выше исходного, после чего уменьшите уровень заливки (fill) до 11%.

Добавьте какой-нибудь текст, например, View Website, для этого используйте шрифт Arial Bold размером 16 пунктов.

Для текста примените Стили слоя (Layer Style):

Тень (Drop Shadow) со следующими параметрами:

  • Режим наложения (Blend mode): Нормальный (Normal)
  • Цвет (Color): #ffffff
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 90
  • Поставьте галочку в чекбоксе Использовать глобальное освещение (Use Global light)
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 1

Внутренняя тень (Inner shadow) со следующими параметрами:

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #73872e
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 90
  • Снимите галочку в чекбоксе Использовать глобальное освещение (Use Global light)
  • Расстояние (Distance): 1
  • Стягивание (choke): 0
  • Размер (Size): 1

Вот, что у нас получилось:

Шаг 7

После слоя со слайдами мы должны создать блок из трех колонок. Выберите инструмент Эллипс (Ellipse Tool (U)) и нарисуйте круг. Чтобы все было ровно, воспользуйтесь направляющими.

Разместите в этом круге иконку из набора jigosoar (доп.материалы). Для заголовка используйте шрифт Arial Bold размером 16 пунктов и цвет #3b3a3a, для текста шрифт Arial Regular размером 13. Размер иконок 24*24 пикселя.

Примечание переводчика: можете объединить в группу слои, формирующие колонку, с помощью сочетания клавиш Ctrl+G, после этого продублировать группу 2 раза, заменить иконки и заголовки соответствующим образом, и расположить данные блоки, как это показано на скриншоте ниже.

Для данной секции были использованы следующие иконки 24_gallery, 24_css, 24_structure.

Шаг 8

Далее, формируем поле для связи. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установите радиус скругления 5 пикселей. Нарисуйте прямоугольник, как показано на скриншоте ниже.

Опять же воспользуйтесь иконками из набора jigosoar, выберите 48*48 пикселей иконку 48_email (конвертик), темную. Для текста используйте шрифт Arial Bold размером 16 пунктов и цвет #3b3a3a. Чтобы создать кнопку, просто скопируйте ее из предыдущих шагов (CTRL + J) и поменяйте на ней текст на Contact me.

Шаг 9

Теперь создадим еще один трехколоночный блок. Для этого опять воспользуемся инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установим радиус скругления 15 пикселей. Рисуем прямоугольник, как на скриншоте ниже, и два раза копируем его (CTRL + J). Должно получиться вот так:

На этом шаге мы добавим в наши колонки изображения (будем использовать картинки из других уроков). Переносим их в наш документ. Убедитесь, что под каждой из ваших перенесенных картинок находится слой с прямоугольником со скругленными углами. Далее стоя на слое с картинкой кликните правой клавишей мышки по нему и выберите в меню Создать обтравочную маску (create clipping mask). Подгоните изображение, чтобы оно четко вписывалось в ваш прямоугольник.

В результате должен получиться примерно вот такой результат. Да, и не забудьте добавить заголовок к каждому блоку с картинкой. Для этого используйте шрифт Arial Bold размером 16 пунктов и цвет #db5450.

Шаг 10

Теперь нарисуем подвал нашего сайта (футер). Для этого возьмите инструмент Прямоугольная область выделения (rectangular marquee tool(М)) и нарисуйте прямоугольник, а затем залейте его цветом #1a1a1a.

Содержание футера мы сделаем аналогичным шапке сайта (хедеру). Для этого просто продублируйте слои с логотипом в хедере и навигационным меню в хедере (CTRL + J), перетащите их вниз в ваш "подвал" и поменяйте цвет на #353535. Для подсвеченного элемента меню установите белый цвет (#ffffff).

Все, наше портфолио готово!

Автор: Sanjay

photoshop-master.ru

Создаём в Фотошоп макет для портфолио

Финальный результат:

Исходники к уроку:

  1. Узоры
  2. Иконки
  3. Шрифт Univers Ultra Condensed
  4. Шрифт Univers Light Condensed
  5. Шрифт Helvetica
  6. 960 Grid System

Архив

Вступление

В этом уроке мы будем использовать 960 Grid System. Скачайте и разархивируйте архив. Откройте файл “960_grid_12_col.psd” в Фотошопе (вы найдете его внутри папки "photoshop", которая находится в папке "templates").

После того как откроете .psd файл в Фотошопе Вы увидите  12 красных полос. Эту сетку мы и будем использовать в течении всего урока. Вы можете скрыть эту сетку кликнув по иконке глаза у слоя "12 Col Grid".

В течении урока Вам нужно будет создавать фигуры с определенными размерами. Поэтому откройте Инфо панель (Окно > Инфо (Window > Info)) и теперь когда будете создавать фигуру Вы сможете видеть в инфо панели её точную ширину и высоту.

Также .psd файл содержит направляющие. Чтобы скрыть их, перейдите в меню Просмотр > Показать > Направляющие (View > Show > Guides), или нажмите клавиши Ctrl + ;. Обычно я скрываю красные полосы и активирую направляющие только тогда, когда они мне нужны.

Теперь, когда мы разобрались с основами использования 960 Grid System, мы можем начинать создавать наш макет. Давайте начнём!

Шаг 1. Настройка документа

Откройте файл “960_grid_12_col.psd” в Фотошопе. Перейдите в меню Изображение > Размер холста (Image > Canvas Size) и измените ширину на 1200px, а высоту на 2400px.

Фоновый слой залейте цветом #333333. Кликните правой кнопкой мыши по фоновому слою и выберите Преобразовать в Смарт Объект (Convert to Smart Object). Перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте параметры из скриншота ниже.

Шаг 2. Создание фона шапки сайта

Создайте новую группу и назовите её “header”. Выберите инструмент Прямоугольник ( Rectangle Tool) и создайте фигуру 1200х140px и цветом #30a0b8. Назовите этот слой "header bg". Правый клик по слою и выберите Преобразовать в Смарт Объект (Convert to Smart Object). Примените фильтр Шум к слою используя параметры ниже.

Шаг 3

Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник высотой в 4px и цветом #33b9d6. Назовите слой "top bar" и переместите его к верху большего прямоугольника.

Шаг 4. Создание треугольного узора

Сейчас мы создадим узор, который будем использовать в шапке сайта. Создайте новый документ 20х8px. Увеличьте изображение, выберите инструмент Перо (Pen Tool) и создайте чёрный треугольник. Скройте фоновый слой. Перейдите в меню Редактирование > Определить узор (Edit > Define Pattern), назовите как-нибудь узор и нажмите OK. Закройте этот документ.

Шаг 5. Применение узора

Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1200х10px. Установите Заливку (Fill) слоя на 0%. Назовите слой “top pattern”. Дважды кликните по слою, чтобы открыть окно Стили слоя и используйте параметры из скриншота ниже.

Шаг 6. Изменение цвета узора

Теперь нам нужно изменить цвет треугольников и применить ещё несколько стилей слоя. Правый клик по слою “top pattern” и выберите Преобразовать в Смарт Объект (Convert to Smart Object). Откройте окно Стили слоя и используйте параметры из скриншота ниже. Для стиля Наложение цвета (Color Overlay) я использовал цвет #33b9d6.

Шаг 7. Дублирование слоя с узором

Дублируйте слой с узором и переименуйте его на “bottom pattern”. Переместите его вниз шапки. Измените цвет в стиле Наложениецвета (Color Overlay) на #30a0b8.

Шаг 8. Создание текстуры для шапки

С помощью инструмента Прямоугольное выделение (Rectangular Marquee Tool) создайте выделение над шапкой сайта. Создайте новый слой и залейте выделение цветом #aaaaaa. Нажмите Ctrl+D чтобы убрать выделение. Назовите этот слой “texture” и преобразуйте его в смарт-объект.

Нам нужно чтобы текстура была только в области шапки. Для этого зажмите клавишу Ctrl и кликните по иконкам слоёв “header bg” и “bottom pattern”. Убедитесь что слой “texture” активен и перейдите в меню Слой > Слой-маска > Показать выделенную область (Layer > Layer Mask > Reveal Selection).

Перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте параметры из скриншота ниже. Затем перейдите в Фильтр > Эскиз > Мокрая бумага (Filter > Sketch > Water Paper). Измените режим наложения на Мягкий свет (Soft Light).

Шаг 9. Добавление логотипа

Выберите инструмент Текст (Type Tool) и добавьте название сайта в левой части шапки. Активируйте направляющие, чтобы было удобнее его разместить. Я использовал цвет #e3eef2 и шрифт Univers Ultra Condensed. Добавьте стиль Тень (Drop Shadow) со следующими параметрами:

Шаг 10. Создание навигационной панели

Создайте новую группу и назовите её “navigation”. Выберите инструмент Текст (Type Tool) и добавьте свои пункты меню. Я использовал белый цвет и шрифт Univers Light Condensed размером 18pt. Для лучшего расположения пунктов меню используйте направляющие. Добавьте стиль Тень (Drop Shadow) используя параметры из скриншота ниже.

Скачайте набор иконок и выберите иконки для Вашего меню. Откройте эти иконки в Фотошопе и разместите их над меню, как показано на скриншоте ниже.

Шаг 11. Создание активного элемента меню

Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), установите радиус на 2px и создайте фигуру используя цвет #3895a8. Переместите этот слой под слой с навигацией. Назовите его “active” и в окне Стили слоя примените следующие стили:

Шаг 12. Создание диагонального узора

Создайте новый документ 4х4px. Увеличьте его, выберите инструмент Прямоугольное выделение (Rectangular Marquee Tool), зажмите клавишу Shift и создайте четыре квадратных выделения. Создайте новый слой и залейте выделение чёрным цветом. Уберите выделение. Скройте фоновый слой и перейдите в меню Редактирование > Определить узор. Закройте документ.

Шаг 13. Создание слайдера

Создайте новую группу и назовите её “slider”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1000х350px цветом #9eafb2. Назовите этот слой “slider border”. Откройте окно Стили слоя и используйте параметры указанные на скриншоте ниже. Расположите прямоугольник в центре документа.

Шаг 14

Создайте ещё один прямоугольник 980х330px белого цвета. Назовите этот слой “image_holder” и расположите прямоугольник в центре предыдущего. В этой области будут показываться изображения. Откройте какое-нибудь изображение в Фотошопе и переместите его в свой документ, поверх слоя “image_holder”. Назовите этот слой “image”, правый клик по нему и выберите Создать обтравочную маску (Create Clipping Mask).

Шаг 15. Создание переключателей

Создайте новую группу и назовите её “right arrow”. Выберите инструмент Эллипс (Ellipse Tool) и создайте круг 45х45px цветом #33b9d6. Назовите слой “circle”. Скопируйте этот символ - “»”, выберите инструмент Текст (Type Tool) и нажмите Ctrl+V, разместите символ в центре круга. Для символа стрелки я использовал шрифт Univers Condensed с цветом #f4f4f4.

Дублируйте группу “right arrow” и перейдите в меню Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Переименуйте группу на “left arrow” и переместите её в левую часть слайдера.

Шаг 16. Создание ленты для заголовка

Сейчас мы создадим ленту для заголовка. Позже мы будем использовать такие ленты и в других областях нашего шаблона.

Создайте новую группу и назовите её “headline”. Выберите инструмент Перо (Pen Tool) и нарисуйте фигуру, как на скриншоте ниже, цвет - #ac1eda. Назовите этот слой “bg” и добавьте следующие стили слоя:

Шаг 17. Добавление тени к ленте

Над слоём "bg" создайте новый слой и назовите его “shadows”. Правый клик по слою и выберите Создать обтравочную маску (Create Clipping Mask).

Выберите инструмент Кисть (Brush Tool) и мягкой, чёрной кистью с Непрозрачностью (Оpacity) 60% добавьте тени на ленту. Измените цвет кисти на белый и добавьте блики. Установите режим наложения для слоя на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 70%.

Выберите инструмент Текст (Type Tool) и на ленте напишите слово “Featured”. Я использовал белый цвет и шрифт Univers Ultra Condensed. Добавьте тень к  текстовому слою используя параметры из скриншота ниже.

Шаг 19

Выберите инструмент Линия (Line Tool) толщиной 1px и создайте чёрную горизонтальную линию шириной в 10px. Поместите эту линию в верхний левый угол ленты.Дублируйте линию и передвиньте вправо. Повторяйте это действие до тех пор, пока не дойдете до правого угла. Поместите все слои с линиями в группу и назовите её “top”. Поместите группу внутрь ещё одной и назовите её “dashed lines”.

Дублируйте группу “top” и передвиньте вниз ленты. Переименуйте группу на “bottom”. Установите режим наложения для группы “dashed lines” на Мягкий свет (Soft Light), Непрозрачность (Opacity) уменьшите до 50%.

Шаг 20

Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже. Создайте новый слой и чёрной мягкой кистью добавьте тень в левой части ленты. Уберите выделение (Ctrl+D). Назовите этот слой “shadow” и уменьшите Непрозрачность (Opacity) до 50%.

Шаг 21. Создание фона для контента

Создайте новую группу и назовите её “content bg”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1000х1670px. Высота зависит от того, как Вы будете выравнивать элементы в шаблоне. Если Вам нужна другая высота у фонового слоя, Вы сможете изменить её, после того, как добавите контент.

Преобразуйте слой в смарт-объект. Перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте параметры указанные ниже.

Шаг 22. Создание белых треугольных узоров

Создайте новый документ 20х10px. Увеличьте его и возьмите инструмент Перо (Pen Tool). Создайте белую треугольную фигуру, как на скриншоте ниже. Скройте фоновый слой и перейдите в меню Редактирование > Определить узор (Edit > Define Pattern).

Перейдите в меню Редактирование > Трансформирование > Отразить по вертикали (Edit > Transform > Flip Vertical) и инструментом Перемещение (Move Tool) переместите фигуру в нижнюю часть документа. Сохраните этот узор и закройте документ.

Шаг 23. Применение треугольных узоров

Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 1000х10px и разместите её в верхней части области контента. Назовите этот слой “top triangles” и уменьшите Заливку (Fill) до 0%. Откройте окно Стили слоя и примените узор, который Вы создали в предыдущем шаге.

Дублируйте этот слой и переместите фигуру вниз. Назовите слой “bottom triangles” и измените узор.

Шаг 24. Создание области “Services”

Создайте новую группу и назовите её “services”. Дублируйте группу “headline” и переместите её в левый верхний угол фона контента. Измените цвет ленты (в слое “bg”) на #da1e4a. Инструментом Текст (Type Tool) измените текст на “Services”.

Шаг 25. Добавление описания сервисов

Создайте новую группу и назовите её “web design”. Активируйте направляющие (Ctrl + ;). Инструментом Прямоугольник (Rectangle Tool) создайте фигуру 220х320px цветом #f4f4f4. Назовите этот слой “border”. Откройте окно Стили слоя и используйте параметры указанные ниже. Для Обводки (Stroke) я использовал цвет #d4d4d4.

Шаг 26

Создайте ещё один прямоугольник белого цвета размером 200х300px. Назовите этот слой “image_holder” и разместите его в центре слоя “border”. Добавьте 1px Обводку (Stroke) используя цвет #d4d4d4.

Шаг 27

Инструментом Текст (Type Tool) добавьте какой-нибудь контент, как на скриншоте ниже.

Шаг 28. Создание кнопки “Read More”

Создайте новую группу и назовите её “button”. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), установите Радиус на 4px и создайте фигуру 140х30px, цвет - #ac1eda. Назовите этот слой “button” и примените следующие стили слоя:

Инструментом Текст (Type Tool) напишите “Read More »” на своей кнопке. Я использовал белый цвет и шрифт Univers Light Condensed размером 16pt. Добавьте тень к слою используя параметры на скриншоте ниже.

Шаг 29

Дублируйте группу “web design” три раза. Активируйте направляющие и разместите элементы так же, как на скриншоте ниже. Инструментом Текст (Type Tool) измените названия сервисов.

Шаг 30. Создание области "Portfolio"

Следующие разделы шаблона будет легче создать, т.к. мы будем просто копировать элементы созданные в предыдущих шагах и немного редактировать их.

Создайте новую группу и назовите её “portfolio”. Дублируйте группу “headline” и переместите в группу “portfolio”. Измените цвет у слоя “bg” на #aec81e и инструментом Текст (Type Tool) напишите на ленте слово “Portfolio”. Расстояние между областью “services” и “portfolio” должно быть 60px.

Сейчас мы создадим несколько рамок для изображений. Создайте новую группу и назовите её "#1". Активируйте направляющие (Ctrl + ;). Выберите инструмент Прямоугольник (Rectangle Tool), зажмите клавишу Shift и создайте квадрат 140х140px цветом #f4f4f4. Назовите этот слой “border”. Затем скопируйте стили слоя у какого-нибудь слоя “border” из области “services” и вставьте в этот слой.Создайте ещё один квадрат 120х120px белого цвета. Назовите этот слой “image_holder” и разместите его в центре предыдущего. Добавьте 1px обводку, цвет #d4d4d4.

Дублируйте группу "#1" семь раз и разместите их так же, как на скриншоте ниже.

Дублируйте группу “button”, измените цвет кнопки на #aec81e и переместите её в нижний правый угол области “portfolio”. Измените текст на “View Portfolio »”.

Шаг 31. Создание области “About”

Создайте область “About” просто скопировав элементы из предыдущих областей и изменив их цвета. Цвет ленты и кнопки - #40b1e6. Выберите группу “ribbon” и перейдите в меню Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal) и передвиньте ленту в правый угол.

Также, я добавил текст используя шрифт Helvetica Regular размером 12pt и цветом #515151.

Шаг 32. Создание области “Blog”

Добавьте группу “ribbon” внутрь группы “blog”. Измените цвет ленты на #da7b1e и отредактируйте текст на “Blog”. Сместите ленту на 60px вниз от области “portfolio”.

Создайте новую группу и назовите её "post #1". Затем создайте рамку для картинки.  Размер рамки - 220х220px, размер внутреннего квадрата - 200х200px. Добавьте какой-нибудь текст к этому изображению и кнопку “Read More”. На скриншоте ниже указаны параметры шрифта.

Дублируйте группу "post #1" и поместите её под предыдущей. Переименуйте группу на "post #2".

Шаг 33. Создание сайдбара

Создайте новую группу и назовите её “categories”. Выберите инструмент Текст (Type Tool) и напишите слово “Categories”. Я использовал шрифт Univers Ultra Condensed, размер 36pt и цвет #515151. Выберите инструмент Линия (Line Tool) и создайте горизонтальную линию толщиной 1px и цветом #b9b9b9.

Возьмите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру 300х5px и поместите её под 1px линией. Назовите этот слой “diagonal lines” и уменьшите Заливку (Fill) до 0%. Добавьте стиль Наложение узора (Pattern Overlay) со следующими параметрами:

Инструментом Текст (Type Tool) добавьте список категорий. Я использовал шрифт Helvetica Regular, размер 12pt и цветом #515151.

Чтобы создать маркеры возле категорий, возьмите инструмент Эллипс (Ellipse Tool), зажмите клавишу Shift и создайте круг 5х5px цветом #515151. Дублируйте этот слой столько раз, сколько нужно и инструментом Перемещение (Move Tool) расположите их возле категорий. Добавьте все слои с кругами в группу и назовите её “bullet points”.

Ниже создайте ещё один список, тем же способом, что и категории.

Шаг 34. Добавление разделителей между областями контента

Создайте новую группу и назовите её “separators”. Выберите инструмент Линия (Line Tool) и создайте горизонтальную линию шириной 940px и цветом #dbdbdb. Назовите этот слой “1px line” и поместите её между областью “services” и “portfolio”.

Дублируйте этот слой и разместите его между областью “portfolio” и “blog”.

Шаг 35. Создание футера

Создайте новую группу и назовите её “footer”. Инструментом Текст (Type Tool) добавьте свои копирайты. Я использовал шрифт Helvetica Regular размером 12pt и цветом #ebebeb.

Финальный результат:

Автор: Ionut Ciursa

photoshop-master.ru

Создаём шаблон портфолио для фотографий в Фотошоп

Исходные материалы

Свадебные кисти

Свадебные гранж цветы

Свадебное фото 1

Свадебное фото 2

Свадебное фото 3

Архив

Шаг 1. Создайте новый документ в программе Photoshop размерами 1024 pix x 1024 pix с разрешением 300 DPI.

Шаг 2. С помощью инструмента «Заливка» (Paint Bucket tool (G), заполните фоновый слой оттенком #515151.

Шаг 3. С помощью инструмента «Прямоугольник» (Rectangle Shape tool (U), нарисуйте белый прямоугольник по середине документа. Убедитесь, что правая и левая сторона прямоугольника выходят за границы документа, как показано на скриншоте ниже.

Шаг 4. В стилях слоя для слоя с прямоугольником, выберите «Внутреннюю тень» (Inner Shadow).  Измените параметр «Размер» (Size) до 16 px, как показано на скриншоте ниже.

Шаг 5. Здесь же в стилях слоя для слоя прямоугольник, выберите «Наложение градиента» (Gradient Overlay).  Уменьшите значение «Непрозрачность» (Opacity) до 23%, как показано на скриншоте ниже.

Шаг 6. См. желаемый эффект ниже.

Шаг 7. Создайте новый слой градиентная заливка «Слой - Новый слой-заливка» (Layer>New Fill Layer).  В окошке «Градиентная заливка» (Gradient Fill), в стилях выберите «Радиальный» (Radial). Нажмите на мини-окошко «Градиент» (Gradient), чтобы перейти в «Редактор градиентов» Gradient Editor. Убедитесь, что цветовая гамма установлена от белого до прозрачного. Нажмите везде OK, чтобы применить установки.

Шаг 8. Уменьшите непрозрачность слоя радиальный градиент 50%.

Шаг 9. Выберите инструмент Область «горизонтальная строка» (Single Row Marquee tool (M), чтобы создать выделение по верхнему краю белого прямоугольника. Создайте новый слой, на новом слое выполните обводку «Редактирование – Выполнить обводку» (Edit>Stroke), ширина обводки (Width) 1 px, Цвет (Color) – белый и позиция относительно границ – по центру (location – Center), как показано на скриншоте ниже.

Шаг 10. Дублируйте слой с верхней обводкой и переименуйте его в нижнюю обводку. Переместите обводку с первоначальной позиции к нижнему краю белого прямоугольника, как показано ниже.

Шаг 11. Откройте и скопируйте векторный гранж цветок, который вы скачали в начале урока, на новый слой нашего документа.

Шаг 12. Уменьшите непрозрачность слоя гранжевый цветок до 10% и поменяйте режим наложения на «Мягкий свет» (Soft Light).

Шаг 13. С помощью шрифта Comfortaa, ссылка на шрифт есть в начале урока, создайте текст логотипа и текст меню.

Примечание переводчика: возможно ссылка была удалена, вы можете на своё усмотрение выбрать шрифт.

Шаг 14. В нижнем левой углу проекта, с помощью шрифта Comfortaa, напишите информацию о правообладателе.  Уменьшите непрозрачность этого слоя до 48%.

Шаг 15. С помощью свадебных кистей, которые вы скачали вначале урока, выберите белый цвет и нарисуйте кольца над логотипом и в нижней части.

Примечание переводчика: поменяйте режим наложения на «Мягкий свет» (Soft Light) и уменьшите непрозрачность этого слоя 48% как на скриншоте ниже.

Шаг 16. Создайте новую группу и назовите её «Основа» (Body), нажав иконку в нижней панели настроек. Выделите все слои кроме фонового слоя и переместите их в группу.

Шаг 17. Загрузите одно из изображений, которые вы скачали вначале урока, и переместите на наш документ поверх всех слоёв. Разместите изображение внутри белой прямоугольной области.

Шаг 18. Для слоя с изображением, откройте «Стили слоя» (layer styles). Выберите «Внутреннюю  тень» (Inner shadow) и установите параметры как на скриншоте ниже.

Шаг 19. Там же в стилях слоя, выберите «Обводку» (Stroke) и установите параметры как на скриншоте ниже.

 Шаг 20. Загрузите оставшиеся два изображения и поместите их на новые отдельные слои, которые я назвал Изображение 2 и Изображение 3.

Шаг 21. Щёлкните правой кнопкой мыши по слою с первым изображением и выберите «Скопировать стиль слоя» (Copy Layer Style), далее, щёлкните правой кнопкой мыши  сперва по одному из оставшихся слоёв, потом по другому и выберите «Вклеить стиль слоя» (Paste Layer Style).

Шаг 22. С помощью инструмента «Эллипс» (Elipse Shape tool (U), создайте маленький кружок цвета #515151 прям по середине под изображением.

Шаг 23. Продублируйте и переименуйте первоначальный кружок (продублировать можно, нажав команду Сtrl+J). С помощью инструмента «Перемещение» (Move tool (V), переместите влево от серого кружка. Дважды щёлкните по иконке слоя, чтобы вызвать палитру цветовых оттенков и поменяйте оттенок на белый.

Шаг 24. Продублируйте белый кружок и переместите его вправо от серого кружка.

Шаг 25. Выберите инструмент «Прямоугольник» (Polygon Shape tool (U), установите количество сторон 3.  Нарисуйте треугольник в левой части от изображений.

Шаг 26. Повторите предыдущий шаг и создайте ещё один треугольник в правой части от изображения. Уменьшите непрозрачность этих слоёв до 26%.

Итоговый результатВы закончили урок, который помог вам узнать технику создания шаблона для свадебной веб странички.

Автор: surfaceblur

photoshop-master.ru

Яркий шаблон для портфолио в Фотошоп

Как всегда, вот то, что мы получим в итоге:

Материалы для урока:

Текстуры

Макбук

Архив

Шаг 1

Создаем новый документ 900 на 900 пикселей.

Создадим слой “orangeheader”. Далее создаем выделение 900 на 450 пикселей и заливаем его оранжевым градиентом.

Шаг 2

Оставив выделение активным, создадим слой “headerclouds”. Жмем Filter – Render – Clouds(Фильтры – Рендеринг - Облака). Далее устанавливаем режим наложения на ColorDodge (Осветление основы) и ставим непрозрачность на 10%.

Шаг 3

Теперь откроем вот эту прекрасную текстуру. Помещаем одну из текстур поверх выделения шапки и называем слой “headertexture”.

Устанавливаем режим наложения на Overlay (Перекрытие) и ставим непрозрачность на 20%.

Шаг 4

Далее с помощью радиального градиента от белого к прозрачному создаем вот такое пятно справа.

Ставим режим наложения на ColorDodge (Осветление основы) и устанавливаем значение непрозрачности на 10%.

Шаг 5

Создаем слой “lighting 1”. С помощью лассо (Lasso) выделяем треугольник, как показано ниже, и заливаем его градиентом от белого к прозрачному.

Далее устанавливаем режим наложения на ColorDodge (Осветление основы) и ставим непрозрачность на 10%.

Шаг 6

Повторяем предыдущий шаг несколько раз, пока не получим что-то подобное:

Шаг 7

Создаем новый слой “menu”. Создаем выделение высотой 60 пикселей во всю ширину в самом верху шаблона. Заливаем его черным и понижаем непрозрачность до 40%.

Далее применяем к слою следующие стили: Drop Shadow (Тень).

Шаг 8

Добавим текст, а также разделители между пунктами меню.

Шаг 9

Открываем изображение Макбук. Размещаем изображение MacBook в правой части.

Применяем к слою следующие стили: Drop Shadow (Тень), Outer Glow (Внешнее свечение), Color Overlay (Наложение цвета).

Шаг 10

Создаем слой “macbookshadow”. Создаем выделение овала под Mac Book’ом и заливаем выделение черным. Применим для овала Filter – Blur – GaussianBlur (Фильтр – Размытие – Размытие по Гауссу). Это должно дать ощущение, будто Mac Book отбрасывает тень.

Шаг 11

Добавляем текст заголовка, я использовал шрифт Museo.

Применяем для слоя с заголовком следующие стили: Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Outer Glow (Внешнее свечение, GradientOverlay (Наложение градиента).

Шаг 12

Добавим текст подзаголовка, на этот раз я использовал Arial. Цвет выбираем такой же, как на фоне шапки, только темнее.

Drop Shadow (Тень), Inner Shadow (Внутренняя тень).

Шаг 13Теперь поработаем над формой. Создадим прямоугольник со скругленными углами для поля ввода. Применяем стили: Drop Shadow (Тень), Inner Shadow (Внутренняя тень), GradientOverlay (Наложение градиента).

 

Шаг 14

Добавляем еще одну кнопку справа от первой. На этот раз применим другие стили:

Drop Shadow (Тень), Inner Shadow (Внутренняя тень), GradientOverlay (Наложение градиента).

Шаг 15

Получится такая симпатичная форма.

Примечание переводчика: шаги 15-й и 16-й по сути одно и то же, видимо, ошибка автора. На всякий случай оставил также, чтобы не возникло путаницы.

Шаг 16

Добавим текст.

Шаг 17

Добавим контент в основной контейнер под шапкой. Я сделал так:

Шаг 18

Создаем новый слой “footer”. Создадим выделение в самом низу шаблона, показано ниже, и зальем выделение светло-серым.

Шаг 19

На новом слое создаем круглое выделение так, чтобы оно ровно наполовину заходило на футер. Заливаем выделение тем же цветом, что и футер, объединяем их в один слой и применяем следующий градиент в стилях новоиспеченного слоя.

Шаг 20

Последний штрих – добавляем в футер текст, не забывая о тенях.

И… Готово!

Я действительно надеюсь, что вам этот урок помог и хоть чему-нибудь научил. Спасибо за внимание!

Автор: Tom Ross

photoshop-master.ru


Смотрите также