Рисуем iPhone 4 - Форум о поисковых системах и социальных сетях

Страница 1 из 3
1
2
3
»

Рисуем iPhone 4

Dix2m

Суббота, 03.09.2011, 12:58

Проверенный

Сообщения: 606

Репутация: 817

Решил выложить этот урок.
Вот что получилось у меня (слева оригинал, справа- моё творение)

ДЛЯ ЛЕНИВЫХ МОЙ PSD ФАЙЛ МОЖНО СКАЧАТЬ >>>>>Здесь<<<<<
Начнём:
Прежде чем рисовать iPhone 4, советую детально просмотреть, как он выглядит.

Шаг 1: Передняя часть iPhone
Создайте новый документ размером 1800х1600 пикселей. Лучше использовать большой холст, так как для реалистичности нужно будет чётко прорисовать все мелкие детали. Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 60 пикселей нарисуйте чёрную фигуру:

Инструментом Свободное трансформирование (Ctrl+T), удерживая Alt потяните правую верхнюю точку трансформации вниз.

Запомните основное правило перспективы при рисовании. Чем дальше элемент, тем меньше он должен быть. Поэтому левый нижний угол тоже нужно сделать

Сделайте копию фронтальной части и измените её, как показано ниже:

Примените стиль Наложение градиента (Layer Style - Gradient Overlay): Режим – Осветление, Стиль – Линейный.

Шаг 2 – Создание боковой стороны
Сделайте копию предыдущей фигуры, расположите её под двумя слоями и сдвиньте влево. Измените цвет на #dedbdc.

Примените стиль Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Шаг 3 – Затемнение боковой стороны
Создайте новый слой (Create New Layer) над слоем с боковой стороной. Создайте на нём обтравочную маску (Ctrl+Alt+G). Теперь всё, что мы нарисуем на этом слое, не выйдет за пределы боковой стороны. Выберите инструмент Кисть (Brush Tool) с непрозрачностью 20-25% и нарисуйте тень в нижней части iPhone.

Повторите этот процесс для создания теней и свечений в других частях боковой стороны. Я советую каждую тень или свечение рисовать на отдельном слое. Это позволит вам настраивать непрозрачность каждой тени или подтирать её, при этом не повредив другие свечения или тени. Я использовал около 10 слоёв, чтобы добиться такого результата:

[img]http:/www.egraphic.ru/images/drawing/429/11.jpg[/img]

Шаг 4 – Край боковой стороны
Сделайте выделение бокового слоя (Ctrl+Click):

Создайте новый слой (Create New Layer) и перейдите в меню Редактирование»Выполнить обводку (Edit > Stroke)

Шаг 5 – Применение стальной текстуры
iPhone 4 отличается от предыдущих моделей тем, что имеет сбоку металлическую панель, которая является антенной телефона. Она сделала из стали и поэтому сейчас мы создадим нужную текстуру. Создайте новый слой и залейте его белым цветом. Примените фильтр Добавить шум (Add Noise Filter):

Потом фильтр Размытие в движении (Motion Blur Filter):

Поместите этот слой над слоем с боковой стороной, но под слоями со свечениями и тенями. Установите Режим наложения этого слоя – Умножение (Blending Mode – Multiply):

Шаг 6 – Создание правого края боковой стороны
Сделайте выделение слоя с передней частью (Ctrl+Click), сдвиньте его на 2 пикселя влево.

Создайте новый слой и залейте его белым цветом.

Сделайте выделение слоя, который мы только что залили. Перейдите в меню Редактирование»Выполнить обводки (Edit > Stroke).

Примените фильтр Размытие по гауссу (Gaussian Blur Filter):

Шаг 7 – Затемнение нижней части
Инструментом Кисть (Brush Tool) нарисуйте тень в нижней части телефона.

Шаг 8 – Создание экрана iPhone
Создайте чёрный прямоугольник и инструментом Свободное трансформирование (Free Transform) измените фигуру, как показано ниже:

К слою с этим прямоугольником примените следующие стили:

Наложение градиента: Режим – Осветление, Стиль – Линейный.

Обводка: Положение – Снаружи, Режим – Осветление, Тип обводки – Градиент, Стиль – Линейный.

Ниже я увеличил изображение, чтобы Вы смогли увидеть 1-пиксельную обводку:

Шаг 9 – Тень на экране
Сделайте выделение слоя с экраном (Ctrl+Click), создайте новый слой и перейдите в меню Редактирование»Выполнить обводку (Edit > Stroke):

Примените фильтр Размытие по гауссу (Gaussian Blur Filter):

Нам нужно удалить тень с краёв экрана, отмеченных ниже. Уберите её при помощи инструмента Ластик (Eraser Tool).

Шаг 10 – Добавление картинки
Сейчас мы вставим картинку на экран телефона. (К сожалению, такой как у меня и автора урока не осталась эта картинка, поэтому поставьте свою) Она должна быть под слоем с тенью из предыдущего шага.
Созданная тень придаёт едва заметный, но важный эффект. Посмотрите на разницу:

Шаг 11 – Отражение на передней части iPhone
Сделайте копию слоя с фронтальной частью, выберите инструмент Перо (Pen Tool), в настройках сверх установите значение Область пересечения фигур (Intersect path areas) и нарисуйте треугольник, как показано ниже:

Примените стиль Наложение градиента к этому слою: Режим – Осветление, Режим – Линейный.

Шаг 12 – Создание свечения на края передней части
Сделайте выделение передней части телефона, создайте новый слой и перейдите в меню создания обводки:

Примените Размытие по гауссу (Gaussian Blur Filter):

Понизьте Непрозрачность слоя до 20%

Сделайте выделение слоя с передней частью телефона ещё раз и примените обводку:

Примените размытие по гауссу:

Теперь нужно сделать так, чтобы это свечение не попадало на экран телефона. Сделайте выделение слоя с экраном (Ctrl+Click), инвертируйте его (Select – Inverse), добавьте маску слоя (Layer Mask), чтобы скрыть белые пиксели, которые попадают на экран

Шаг 13 – Создание главной кнопки
Инструментом Эллипс (Ellipse Tool) нарисуйте круг, как показано ниже. Вообще кнопка должна быть круглой, но из-за перспективы она приобретает овальную форму

К кнопке примените эти стили:

Наложение градиента: Режим – Осветление, Стиль – Линейный.

Обводка: Положение – Снаружи, Режим – Осветление, Тип обводки – Градиент, Стиль – Линейный.

Нарисуйте закруглённый прямоугольник на кнопке (заливка этого слоя = 0%).

Примените стиль Обводка: Положение – Внутри, Режим – Осветление, Тип обводки – Цвет.

Шаг 14 – Рисование фронтальной камеры
Инструментом Эллипс (Ellipse Tool) нарисуйте фигуру, показанную ниже:

Примените эти стили:

Наложение градиента: Режим – Осветление, Стиль – Линейный.

Обводка: Положение – Снаружи, Режим – Осветление, Тип обводки – Градиент, Стиль – Линейный.

Шаг 15 – Рисование динамика
Нарисуйте чёрный прямоугольник с закруглёнными углами и в режиме Искажения (Transform – Distort) настройте перспективу:

Шаг 16 – Рисование боковой кнопки
На iPhone 4 есть кнопка переключения режима телефона. Она находится в верхней части боковой стороны. Нарисуйте её инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool), а потом инструментом Свободное трансформирование (Free Transform) настройте перспективу

Шаг 17 – Кнопки регулировки звука
Инструментом Эллипс (Ellipse Tool) нарисуйте такую фигуру:

Нарисуйте знак “+” при помощи двух прямоугольников:

Сделайте тоже самое, но уе со знаком "-"

Шаг 18 – Создание разделителя
Нарисуйте чёрный прямоугольник ближе к основанию телефона. Инструментом Перо (Pen Tool) добавьте якорных точек и измените наклон, чтобы создать правильную перспективу.

Вот и готово!!!
Огромное спасибо за урок порталу http://www.egraphic.ru/

Нашёл видео (не с урока)