С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание реалистичного макета iPhone 5 в Фотошопе

Создание реалистичного макета iPhone 5 в Фотошопе

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

 

В этом уроке мы покажем вам, как создать реалистичный макет iPhone 5 в Photoshop. Мы будем использовать различные инструменты, формы, фильтры и различные  стили слоя для достижения конечного результата. Итак, давайте начнем.

 

Ресурсы

 

скачать готовый PSD файл

 

Potigo Chat App By Sencer Bugrahan

 

Предварительный просмотр

 

 

Шаг 1


 

Создайте новый документ в Photoshop шириной в 600пикселей и высотой в 700 пикселей.

 

 

Шаг 2

 

Для начала мы создадим тело iPhone.  Установите цвет  # 000004 в качестве цвета переднего плана. Теперь выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), нажмите на холст, а затем вставьте следующие значения в окне настроек: ширина 285 пикселей, высота 624 пикселя и радиус в 45 пикселей.

 

 

Шаг 3

 

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

 

 

 


 

Шаг 4

 

Сделайте видимым слой «Frame1», и измените его цвет на # 767f8f. Немного увеличьте его размер с помощью инструмента Свободная трансформация (Free Transform Tool (Ctrl + T)).

 

 

Шаг 5

 

Установите цвет  # 0b0e13 в качестве цвета переднего плана. Теперь выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), нажмите на холст, а затем вставьте следующие значения в окне настроек. Проверьте, чтобы этот прямоугольник ниже остальных слоев. Назовите этот слой «Frame2».

 

 

Шаг 6

 

Создайте новый слой и выберите  мягкую круглую кисть размером в 10 пикселей, чтобы нарисовать прямую линию белым цветом. Нажмите клавишу Shift на клавиатуре во время применения кисти, чтобы получить прямую линию. После этого перейдите в меню Фильтр> Размытие> Размытие в движении (Filter> Blur> Motion Blur) и примените размытие в 30 пикселей к этому новому слою.

 

 

Шаг 7

 

Теперь перейдите в меню Редактирование> Трансформирование> Деформация (Edit> Transform> Warp). Выберите арку с 30%-ым изгибом.

 

 

Шаг 8

 

Создайте выделение на верхнем левом углу под углом помощью инструмента Свободная трансформация (Free Transform Tool (Ctrl + T)). Теперь выберите инструмент Прямолинейное лассо (Polygonal Lasso Tool (L)) и выделите треугольную область, как показано ниже. После этого перейдите в меню Редактирование> Очистить (Edit> Clear), чтобы избавиться от нижней части блика на корпусе.

 

 

Используя тот же способ сделайте так же на остальных краях корпуса телефона.

 

 

Шаг 9

 

Создайте небольшой прямоугольник, используя цвет # 1b1f22, дублируйте его три раза и расположите их, как показано на изображении ниже.

 

 

Шаг 10

 

Чтобы сделать экран для iPhone  создайте еще один прямоугольник, используя соответствующий инструмент со следующими параметрами.

 

 

Шаг 11

 

Далее мы сделаем отражение света. Нарисуйте треугольник и расположите его выше остальных слоев.

 

 

Теперь выберите основной слой и нажмите на значок Добавить маску слоя (Add Layer Mask), который находится в нижней части панели слоев. Снизьте заливку отражения до 0% и примените к нему градиент от белого до прозрачным.

 

 

 

Шаг 12

 

Далее мы сделаем кнопки. Создайте прямоугольник, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 5 пикселей и цветом # 242b33. Удерживая клавишу Ctrl  кликните на прямоугольник, чтобы сделать выделение вокруг него.  Создайте новый слой выше и примените мягкую круглую белую кисть (с 40 - 50% непрозрачности) над верхним краем в пределах выделения. После этого примените кисть на правой и левой границе.

 

 

Шаг 13

 

Сделайте боковые кнопки используя ту же технику, описанную в шаге 12.

 

 

Шаг 14

 

Далее мы сделаем камеру. Нарисуйте эллипс, используйте цвет # 1e1e1e.Чтобы сделать обводку, зажмите клавишу Ctrl и кликните на элипс, чтобы сделать выделение вокруг него. Создайте новый слой и примените мягкую круглую белую кисть на нем с 20 - 30% непрозрачностью как показано ниже. Нарисуйте маленький эллипс над ним, используйте цвет # 14171 c цвет и сделайте яркий блик над ним.

 

 

Шаг 15

 

Сделайте маленький эллипс, используя цвет # 0e1377. Добавьте некоторое затенение на новом слое с помощью черно-белой жесткой круглой кисти. Уменьшите непрозрачность до 50%.

 

 

Шаг 16

 

Далее мы сделаем динамик. Нарисуйте прямоугольник, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 20 пикселей и цветом # 191919. Сделайте блик на новом слое, используя ту же технику, а также уменьшите его непрозрачность до 50%.

 

 

Шаг 17

 

Дублируйте прямоугольник с закругленными углами, поместите дубликат над основным слоем, а также уменьшите его размер. Вы можете видеть его ниже отмеченным синим цветом. Измените его цвет заливки до 0% и примените к нему следующие настройки стиля слоя.

 

 

 

 

Вы можете сделать шаблон, используемый здесь, создав новый документ размером 2 на 2 пикселя с прозрачным фоном. Максимально увеличьте его, используя инструмент масштабирования (Z) и нарисуйте два белых пикселя, как показано ниже. После этого перейдите в меню Редактирование> Определить узор (Edit> Define Pattern) и сохраните его.

 

 

 

Шаг 18

 

Далее мы сделаем кнопку Home. Нарисуйте эллипс, используя цвет # 1b1b1d. Продублируйте его, измените его цвет на # 000004, и перетащите его вниз на один шаг. Чтобы получилось выделение в форме полумесяца, дублируйте верхний эллипс и измените цвет на более светлый серый цвет (# 4f5259). Сделайте вытянутый эллипс покрывая его сверху, как показано ниже. Теперь выберите оба эллипса и перейдите в меню Слой> Объединить формы> Вычесть переднюю форму (Layer> Combine shapes> Subtract Front Shape).

 

 

Шаг 19

 

Примените следующий градиент на форме.

 

 

 

Установите цвет # 676767 в качестве цвета переднего плана и выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме Форма (Shape) с радиусом 8 пикселей. Установите его цвет заливки на «нет» и установите штрих в 1,5-2 пункта в панели управления выбранным инструментом, чтобы сделать прямоугольную обводку.

 

 

Шаг 20

 

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

 

 

Окончательный результат

 

 

Вот и все! Макет iPhone готов отображать ваше приложение. Надеюсь, вам понравился этот урок и вы узнали кое-что интересное для себя. Поделитесь своими мыслями вы можете в комментариях к этому уроку!

 

Урок по теме - Дизайн макета сайта для мобильных устройств в Фотошопе.

 


Автор урока: Anum

 

Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 16.07.2013
  •   Просмотров: 4977
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки