Гикфо
Работа в фотошопе, цифровая фотография , создание слайд шоу

Как сделать макет iPhone в фотошоп

Продолжаем публиковать уроки photoshop  на русском языке.

В этом уроке мы будем с нуля создавать макет iPhone.

Что нам потребуется:

изображение на экране http://www.behance.net/gallery/s-e-n-s-u-a-l/222089,
металлическая текстура http://www.sendspace.com/file/qah60m

Прежде чем начать урок, давайте посмотрим на окончательное изображение:

Теперь начинаем наш урок.
Шаг 1:
Откройте в фотошоп новый документ 1000х1000 пикселей. Это будет наш фоновый слой.

Шаг 2:
Теперь залейте слой цветом # 4d4d4d.

Шаг 3:
На этом этапе мы зададим нашему фону немного текстуры, чтобы сделать это зайдите в Фильтр, Шум из выпадающего меню выберите Добавить Шум.

Шаг 4:
Установить количество шумов 7,16%, распределение будет равномерным, монохромным.

Шаг 5:
Теперь выберите прямоугольник с закругленными углами или инструмент Перо, чтобы сделать прямоугольник с закругленными углами форму, как показано на изображении ниже.

Шаг 6:
Щелкните правой кнопкой мыши на слое и выберите Тиснение в стилях слоя, затем добавить Наложение градиента. Используйте градиент, как показано на изображении ниже, чтобы придать ему металлический вид.

Шаг 7:
Получили металлический прямоугольник, как показано ниже на рисунке.

Шаг 8:
Теперь создайте еще один прямоугольник с закругленными углами же, как и раньше, но на 1px меньше с черным цветом # 000000. Добавьте градиент в стиле слоя, как на изображении ниже.

Шаг 9
получили основную форму iPhone, как показано на рисунке ниже.

Шаг 10:
Откройте это изображение, скопируйте его и используйете его в качестве экрана, как показано ниже.

Шаг 11:
Теперь мы будем работать над верхней частью нашего iPhone. Сделайте небольшой круг, используя Инструмент Эллипс цветом # 353535.

Шаг 12:
установите градиент в стиле слоя, как на изображении ниже:

Добавьте обводку, размер 2px с цветом # 202020:

Шаг14:
Выберите инструмент прямоугольник с закругленными углами и сделайте узкую горизонтальную форму с цветом # 363636, как показано ниже.

Шаг 15:
Добавьте параметры, показанные на рисунке ниже, чтобы добавить немного глубины.

Шаг 16:
Добавьте текстуры металлической сетки, установите с масштабом 1%, а глубина -87%:

Шаг17:
Теперь выберите инструмент прямоугольник и сделайте узкую полосу по экрану с цветом # oaoaoa.

Шаг18:
Здесь я сделал небольшую форму батарею, которые вы можете легко сделать с помощью пера, как я.

Шаг19:
Для изображения аккумулятора заливки, используйте инструмент прямоугольник, сделав пять небольших вертикальных полос с белым цветом # FFFFFF.

Шаг20:
Рисуем 5 белых полосок разных размеров, используя инструмент прямоугольник, чтобы показать сигнал. В середине с помощью инструмента Текст с шрифтом Calibri напишем время, настройте размер соответственно. Я также нарисовал Wi-Fi значок инструментом пером.

Шаг21:
Сделайте горизонтальную полосу цветом # 593b2f по экрану, как показано ниже.

Шаг22:
Теперь мы сделаем кнопки для нашего пользовательского интерфейса. Выберите инструмент прямоугольник с закругленными углами и нарисуйте квадратную форму. Щелкните правой кнопкой мыши на слое, перейдите в Стиль слоя, затем выберите Наложение градиента. Выберите градиент, как показано на изображении ниже.

Шаг23:
Поместите значок поиска на кнопку и сделайте кнопку Назад, как на левой стороне изображения. Используйте тот же градиент, который мы использовали для кнопки поиска.

Шаг 24:
Используйте шрифт Lucida Sans Unicode 24pt размером белым цветом # FFFFFF, чтобы написать Fasion в середине и Back на левой боковой кнопке.

Шаг25:
Теперь мы будем размещать кнопки на нижней части экрана. Сделайте полоску с использованием инструмента Прямоугольник черного цвета на экране на нижней части изображения, как показано ниже.
значки можете рисовать с помощью пользовательских фигур, цветом # 4d4d4d.

Шаг26:
Теперь введите название каждого значка с тем же шрифтом Lucida Sans Unicode шрифт, 9pt размера и с белым цветом # FFFFFF

Шаг27:
Выберите инструмент Прямоугольник, нарисуйте квадратную форму с белым цветом # FFFFFF и поместите ее на верхнюю часть любого значка. Таким образом, мы указываем активную кнопку. Уменьшите его непрозрачность до 15%.

Шаг28:
Выберите Инструмент Эллипс и сделайте круглую форму, как показано ниже с цветом # 353535.

Шаг29:
Щелкните правой кнопкой мыши на слое, перейдите в Параметры наложения, выберите Наложение градиента и укажите градиент, как показано на изображении ниже. Установить угол до 21 градусов.

Шаг30:
Установите обводку в 1px размером и цветом # 3f3f3f.

Шаг31:
Теперь выберите квадратную форму из пользовательских фигур и нарисуйте квадрат белым цветом # FFFFFF, как показано ниже.

Шаг32:
Теперь мы добавим еще несколько кнопок, одна на верхнем краю IPhone и две на левой боковой грани. Используйте градиент, как показано ниже.

Шаг33:
Пришло время добавить немного блеска на наш iPhone, для этого выберите инструмент Перо с белым цветом # FFFFFF и нарисуйте треугольную форму, показанную ниже. Заполните путь с белым цветом.

Шаг34:
Удалите контур

Шаг35:
Уменьшите прозрачность до 20%, и у вас есть блеск. Итак, наш макет iPhone с пользовательским интерфейсом готов.

Источник http://websoulz.com/learn-how-to-make-an-iphone-mock-up-with-user-interface-in-photoshop

Понравилась статья?

Не хотите пропустить следующие материалы?

Подпиcывайтесь на обновления!


   

Оставьте ответ

Ваш электронный адрес не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.