close

Вход

Забыли?

вход по аккаунту

?

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

код для вставкиСкачать
Создаём дизайн рекламы для сайта в Фотошоп
1
Создам дизайн рекламы для сайта в Фотошоп
Конечный результат:
Для урока нам понадобятся эти файлы:
Набор текстур бумаги в стиле Винтаж
Кисти облаков
iPhone
Шрифт Futura
Шрифт Cheyenne Hand
Фотография профиля (используйте свою)
Шаг 1 –
Настройка документа
Создайте новый документ с параметрами, показанным
и ниже.
2
Теперь нужно создать направляющие. Для этого нам понадобятся линейки: перейдите в меню Просмотр -
Линейки
(View > Rulers) (Ctrl+R).
Кликните правой кнопкой на линейках и выберите единицу измерения -
Пиксели
(Pixels). Отведите мышью направляющие от линеек. Они должны быть на расстоянии 40 пикселей от каждого края.
Шаг 2 –
Создание фона
Из набора бумажных текстур, загруженных в начале урока, 3
откройте текстуру “TEXTURE C” и вставьте в наш документ. Растяните текстуру по всему холсту при п
омощи инструмента Свободное трансформирование (Ctrl + T). Установите Режим наложения слоя с текстурой –
Умножение
(Multiply). Вставьте текстуру “TEXTURE A” и также растяните е по холсту. Установите Режим наложения –
Замена тмным
(Darken) и Непрозрачность
–
60%.
Нужно создать узор. Создайте новый документ размером 4х4 пикселя. Инструментом Карандаш (Pencil Tool) (P) нарисуйте узор, показанный ниже.
4
Потом перейдите в меню Редактирование –
Определить узор
(Edit > Define Pattern) и сохраните узор под им
енем “Stripes”. Вернитесь в основной документ, создайте новый слой (Ctrl + Shift + N) над слоем “TEXTURE A” и назовите его “Stripes”. Перейдите в меню Редактирование –
Заливка
(Edit > Fill) и выберите любой цвет. Кликните дважды на слое “Stripes” и у Вас п
оявится окно Параметры наложения. Там установите значение Заливки (Fill Opacity) –
0% и примените стиль Наложение узора (Pattern Overlay): узор “Stripes” и Режим –
Умножение (Multiply) (остальные значения можете посмотреть на картинке ниже):
5
6
Фон закончен. Объедините слои фона в группу (Ctrl + G) и назовите е “Textures”.
Шаг 3 –
Создание фона для иконки
Соз
дайте новый слой над группой “Textures”. Поместите его в новую группу “App”. Выберите инструмент Прямоугольник с закругленными углами
(Rounded Rectangle Tool) (U) и настройте его, как показано ниже.
Создайте прямоугольник и перейдите в меню Слой
–
Стиль
слоя
–
Наложение
градиента
(Layer > Layer Style > Gradient Overlay): 277282a –
#5092a5.
Сделайте копию слоя с прямоугольником и уменьшите его высоту и ширину на 2 пикселя (90х90 пикселей). Измените цвета стиля Наложение градиента
на #8dc2c4 –
#c8f5ff.
Сделайте копию верхнего слоя с прямоугольником и уменьшите его стороны ещ на 2 пикселя (88х88 пикселей). Измените цвета стиля Наложение гради
ента
на #49849d –
#91ced9. Сделайте копию этого прямоугольника и кликните дважды на нм, чтобы перейти в меню Параметры наложения: установите Заливку (Fill Opacity) –
0%. Примените стиль Наложение узора
(Pattern Overlay): узор “Stripes”. Выберите все прямо
угольники и расположите их в центре холста при помощи инструмента Перемещение
(Move Tool) (V).
7
8
Шаг 4 –
Создание силуэта на иконке
Откройте Вашу фотографию и сделайте выделение головы и плеч. Не нужно делать его слишком аккуратным, т.к. мы потом уменьшим фотографию, и неровности будут не видны. Примените маску слоя, чтобы скрыть всю область за пределами выделения.
9
10
Перетащите только выделенную часть в наш документ и измените размер слоя, как показано ниже. Примерно это 90х90 пикселей.
Удерживая клавишу Ctrl, кликните на иконке слоя “Stripes”, чтобы сделать выделение этого слоя. Потом выберите слой с фотографией и примените маску слоя. Кликните дважды на слое фотографии и примените следующие стили: Отбрасывание тени (Тень), Внутреннее свечение, Наложение градиента
(настройки показаны ниже).
11
12
Мы почти закончили создание иконки. Осталось создать свечение. Создайте новый слой над слоем с фотографией и назовите его “Highlight”. Выберите инструмент
Эллипс
(Ellipse Tool) (U) и создайте белый овал, как показано ниже.
Кликните дважды на слое с белым эллипсом и введите значение стилей, показанные ниже:
13
Удерживая клавишу Alt
, перетащите маску слоя “Stripes” на слой “Highlight”. Таким
образом, мы скопировали маску одного слоя на другой. Потом примените стиль Отбрасывание тени:
14
15
Шаг 5 –
Создание кнопки загрузки
Прежде чем мы начнм рисовать кнопку, перейдите по ссылке загрузки шрифта “Futura” и з
агрузите:
Light, Medium, Bold и Extra Bold.
Кнопку создадим таким же способом, как и в шаге 3. Создайте три закруглнных прямоугольника размерами: 302х76 пикселей, 300х74 пикселей и 298х72 пикселей. Ко всем трм прямоугольникам примените те же стили, что и в шаге 3. Сделайте копию верхнего прямоугольника и примените те стили, которые мы применяли к слою “Stripes” (можно просто скопировать их).
Выберите текстовый инструмент и, используя шрифт Futura Extra bold, напишите “Free Download!”. Размер шрифта –
22pt. Примените такие же стили, как и к слою с фотографией. При помощи инструмент Перемещение
(Move Tool) (V) расположите текст по центру (используйте кнопки выравнивания на панели инструмента). К нижнему слою кнопки примените стиль Отбра
сывание тени, который мы применяли к нижнему слою группы “app”.
Когда закончите, объедините все слои кнопки в группу “Button”.
16
Шаг 6 –
Описание к загрузке Текстовым инструментом напишите "Download the new iDeitch App for FREE", используя шрифт Futura
Ligh
t. Размер –
30pt. Измените слово “iDeitch” на Futura
Medium.
Шаг 6 –
Иконка iTunes
Создайте прямоуголь
ник с закруглнными углами
размером 147х48 пикселей цветом #6d6d6d. Шрифтом
Myriad Pro напи
шите
"Available on the iPhone". Размер
–
7,5pt. Потом напишите "iTunes Store" размером 18pt.
Создайте внутри прямоугольника ещ один небольшой закруглнный прямоугольник
размером 18х32 пикселей (мы сделаем из него iPhone).
На нм создайте ещ один прямоуг
ольник размером 13х19 пикселей (экран). Потом создайте под последним прямоугольником круг размером 3х3 пикселя (кнопка меню).
Сделайте выделение всех слов иконки iTunes, кроме фонового слоя (базовый прямоугольник), перейдите на слой с фоном иконки и кликн
ите на иконке маски слоя в нижней части палитры слов, удерживая Alt. У Вас должна получиться маска слоя, залитая чрным цветом. Сделайте выделение слов с экраном и меню iPhone и залейте его белым цветом на маске слоя с фоном иконки. Объедините все слои в
группу “iTunes Store”.
17
Объедините следующие слои и группы в одну группу: "iTunes Store", "Download the
new iDeitch App for FREE.", "Button",и "App". Назовите общую группу "Download".
Шаг 8 –
Вставляем иконку в iPhone
Откройте документ с iPhone в Фотошопе. Скройте или удалите слои, выделенные ниже:
18
Все остальные группы и слои (кроме фонового) объедините в группу и назовите е “iPhone”. Перетащите эту группу в основной документ и измените размер на 348х680 пикселей. Расположите его, исполь
зуя левые направляющие, как показано ниже.
19
Сделайте копию группы “App” и вставьте е в группу “iPhone”
> "Springboard Components" >
"Springboard Icons". Уменьшите размер копии группы “App” до 55%, скройте стиль Отбрасывание тени
(Тень) (Drop Shadow) с нижнего слоя группы, объедините группу “App copy” в один слой (Ctrl + E) и примените стиль Отбрасывание т
ени ещ раз. Текстовым инструментом подпишите иконку "iDeitch" и примените тот же стиль Отбрасывание тени к тексту. Настройки шрифта показаны ниже:
20
Переименуйте иконку в “iDeitch” и объедините иконку и текст в одну группу “iDeitch”.
21
Шаг 9 –
Добавление комментария на iPhone
Выберите текстовый инструмент и напишите "Download Now!" при помощи шрифта Cheyenne H
and Font размером 16pt. Поверните текст на 25 градусов при помощи инструмента Свободное трансформирование
(Ctrl + T).
Сейчас мы нарисуем стрелку. Создайте новый слой и назовите его “Arrow”. Инструментом Перо (Pen Tool) (P) нарисуйте контур, показанный ниже.
22
Выберите инструмент Кисть
(
Brush Tool) (B), установите диаметр –
2 пикселя и жсткость –
100%, цвет –
чрный. Выберите снова инструмент Перо
(Pen Tool) (P) и кликните правой кнопкой на контуре, выберите Выполнить обводку контура
(Stroke Path). В появившемся окне выберите Кисть
(Brush). Из контура получится чрная линия. Чтобы сделать стрелку, дорисуйте контур, показанный ниже, и выполните его обводку.
23
Объедините надпись “Download Now!” и слой со стрелкой в одну группу “Comment”. Расположите эту группу над группой “iPhone” в палитре слов.
Шаг 10 –
Создание цветного заголовка и фона Сейчас нам понадобится набор кистей облаков. С
оздайте новый слой под группой “Textures” и назовите его “Clouds”. Выберите первую кисть из набора кистей и обрисуйте слой, как показано ниже, цветами #ffed21, #fd43f2, #3fcbee
24
Создайте новый слой, выберите текстовый инструмент и напишите "iDeitch", создайте ещ один слой и напишите “ NEW APP”. Настройки шрифта показаны ниже. Цвет текста -
#ffed21. 25
Объедин
ите оба текстовых слоя в группу ”Yellow”. Сделайте копию группы “Yellow” и переименуйте е в “Blue”. Сдвиньте группу “Blue” немного вправо и вверх. Потом примените следующие стили: Отбрасывание тени и Наложение цвета.
26
27
Объедините группы “Yellow” и “Blue” в одну группу “Title”.
Шаг 11 –
Создание подписи "Made By Ofek Deitch"
Создайте новый слой и поместите ег
о в новую группу “Made By” (если забыли как это делается, выберите слой и нажмите Ctrl + G). На этом слое текстовым инструментом напишите “Made By”, используя настройки шрифта, показанные ниже. Потом создайте ещ один слой внутри группы и напишите "OFEK" (
настройки показаны ниже). Создайте последний слой и напишите "DEITCH".
Поверните слой “OFFEK” на 90 гр
адусов против часовой стрелки. Чтобы это сделать перейдите в режим Свободного трансформирования слоя (Ctrl + T), кликните правой кнопкой на холсте и выберите Поворот (Rotate). Расположите слои текста, как показано ниже.
28
Шаг 12 –
Копирайт в нижней части рекламы
Создайте новый слой и напиши
те "Copyright © 2011 by Ofek Deitch. All rights reserved.". Настройки шрифта показаны ниже.
Шаг 13 –
Ра
сположение слов Прежде чем перейдм к расположению слов, взгляните на порядок слов на данный момент:
29
Начнм! Скройте все слои кроме фонового “Background” и группы “Textures”. Потом сделайте видимым слой “Clouds”, потом группу “iPhone”. iPhone должен быть расположен в левой части холста. Сделайте видимой группу “Download”, но скройте все слои и группы в
нутри не. Сделайте видимой группу “Button” и расположите е в нижней части холста рядом с правой направляющей. Сделайте видимой группу “iTunes Store” и привяжите е к правой направляющей, вертикально по центру относительно кнопки “Free Download”. Далее сд
елайте видимым текст внутри группы “Download” и расположите его на 50 пикселей выше кнопки “Free Download”. Начало текста должно быть на одной линии начала кнопки. Потом сделайте видимой группу “App” и расположите е горизонтально по
центру относительно г
руппы “iTunes Store” и вертикально по центру относительно текстового слоя.
30
31
Если Вы правильно расположи
ли слои, то результат должен быть как на картинке 7 выше.
Сделайте видимой группу “Title”, перейдите в режим Свободного трансформирования (Ctrl + T) и на панели сверху введите значения, показанные ниже.
Потом проделайте то же самое с группой “Made By”.
В завершении сделайте видимым слой с текстом о правах и привяжите его начало к левой направляющей. По вертикали расположите его между нижней границей холста и нижней направляющей.
32
Кон
ечный результат
Автор
mila997
mila9971660   документов Отправить письмо
Документ
Категория
Фотография
Просмотров
218
Размер файла
1 837 Кб
Теги
для, рекламы, созда, фотошоп, сайта, дизайн
1/--страниц
Пожаловаться на содержимое документа