• www.ARTScroll.ru
   Пользователь
Логин:

Пароль:

Запомнить? 
   ГАЛЕРЕИ
» Стать другом сайта
» Группа "В Контакте"
   
   9275 художников
   1792 биографий
   7547 подборок картин
   276435 картин [101.96GB]
   1566 уроков
   457 другие статьи
   3906 пользователей
   445 комментариев
   358 тем на форуме
   841 сообщений на форуме

Библиотека | Обучение | Adobe PhotoShop | Рисуем Nokia 5300 Просмотреть комментарии

 
 
]]>
Опубликовал: HolyKirka   Дата: 2009-03-03 22:02 Рекомендовать:
]]>
Nokia 5300 Cell phone interface


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

Начнем работу с создания нового файла (File>New) размером 1280x1024 px и 72 dpi.

Теперь нам нужно выбрать Rectangle Tool (U) чтобы отметить будущий фон нашей картинки.
Установим следующие параметры для слоя,кликнув мышкой на панели слоев на слое,с которым мы работаем.

Blending Options>Gradient Overlay


Параметры градиента:




Далее берем Rounded Rectangle Tool (U) (радиус 55 px) чтобы нарисовать телефон. Затем жмем SHIFT,пока снова используем тот же инструмент радиусом 2 px и в это время намечаем положение трех боковых кнопочек телефона. Используя Add Anchior Point Tool, возможно добавить еще одну вершину в нижней части для получения правильной формы. Цвет слоя #E4E5E6





Blending Options>Inner Shadow


Blending Options>Inner Glow


Blending Options>Stroke


Параметры градиента:


Итог:


Выбираем Rectangle Tool (U) чтобы отметить зону экрана, цвет #E21E25


Жмемс Alt на том же слое и кликаем между красным слое и слоем с самим телефоном (на панели слоев).




Далеe берем Rounded Rectangle Tool (U) радиусом 40 px и делаем выделение следующего за слоем с телефоном слоя как показано ниже. Снова используем Add Anchior Point Tool для добавления еще одной вершины. Выбираем Convert Point Tool для коррекции на форме слоя. Цвет #D1D3D4..


Параметры слоя:

Blending Options>Stroke




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


Blending Options>Gradient Overlay


Параметры градиента:




Выбираем предыдущий инструмент чтобы продолжить создание экрана телефона.


Blending Options>Gradient Overlay


Параметры градиента:


Blending Options>Stroke


Параметры градиента:




Используя Rectangle Tool (U) и Pen Tool (P), рисуем символы белым цветом на боковых кнопочках.


Выбираем Line Tool (U) чтобы нарисовать линию, разделяющую кнопки ниже экрана телефона. Цвет слоя #909295...


Снова с помощью Line Tool (U) рисуем белого цвета,находящуюся под предыдущей.


Далее нам нужно нарисовать джойстик, используя Rounded Rectangle Tool (U) (радиус 30 px). Затем применим Convert Point Tool для коррекции элементов фигуры. Цвет слоя #E6E6E6.


Blending Options>Inner Glow


Blending Options>Stroke




Сейчас давайте нарисуем с помощью Rounded Rectangle Tool (U) радиусом 30 px некоторый отблеск на джойстике.


Параметры слоя: Fill 0%
Blending Options>Gradient Overlay


Параметры градиента:


На следующем новом слое мы нарисуем внутреннюю часть джойстика. Для этого используем Rounded Rectangle Tool (U) радиусом 10 px. Convert Point Tool поможет вам сделать корректировки элементов. Цвет слоя #D9DBDC


Blending Options>Stroke


Вот что получается


Делаем копию последнего слоя и выбираем Free Transform чтобы сделать копию меньше и также изменяем параметры слоя

Fill 0%
Blending Options>Gradient Overlay


Параметры градиента:



Взяв Rounded Rectangle Tool (U) радиусом 10 px, рисуем кнопки нашего телефона.


Blending Options>Inner Glow


Blending Options>Gradient Overlay


Blending Options>Stroke


Параметры градиента:



Делаем копию раннее созданного слоя и выбираем Free Transform чтобы расположить копию как показано ниже:


Делаем еще две копии слоя и,выбрав the Free Transform,располагаем их как показано ниже и меняем параметры.


Параметры для зеленой кнопочки:
Blending Options>Gradient Overlay (остальные параметры должны оставаться такими же)


Параметры градиента:


Теперь для красной кнопочки:
Blending Options>Gradient Overlay (также больше ничего не трогаем)


Параметры градиента:


Снова берем Rounded Rectangle Tool (U) (радиус15 px) и рисуем выпуклость для динамика. Потом жмемс Alt и применив Rectangle Tool (U) стираем ненужные элементы.


Параметры для слоя:
Blending Options>Gradient Overlay


Параметры градиента:


Итог:


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


Blending Options>Gradient Overlay


Параметры градиента:




Делаем копию этого слоя и выбираем Free Transform чтобы расположить копию как показано ниже:

Сейчас нам надо нарисовать панель с кнопоками. В случае если необходимо берем Rounded Rectangle Tool (U) (радиус of 55 px). Используя Add Anchior Point Tool, делаем вершину на дне. И снова выбираем Convert Point Tool для коррекции. Этот новый слой мы должны поместить под всеми предыдущими слоями с телефоном.


Blending Options>Inner Shadow


Blending Options>Gradient Overlay


Параметры градиента:


Итог:


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


Делаем копию и от этого слоя и с помощью Free Transform еще уменьшаем ее.


Blending Options>Gradient Overlay


Параметры градиента:



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


И еще одна копия, и снова делаем ее меньше, и располагаем как показано ниже:


Blending Options>Gradient Overlay


Параметры градиента:



Чтобы сделать зону с кнопочками, применим Rounded Rectangle Tool (U) (радиус 15 px). С помощью Add Anchior Point Tool и Convert Point Tool делаем те же операции,которые делали раньше - добавление вершины и коррекция элементов.


Fill 0%
Blending Options>Stroke




И снова Rectangle Tool (U) берем и линию,ограничивающую горизонтальный ряд кнопок.. Add Anchior Point Tool и Convert Point Tool для коррекции линии.


Fill 0%
Blending Options>Stroke



Делаем две копии слоя с линией и с помощью Free Transform располагаем их воть так:


Взяв Rectangle Tool (U), рисуем две вертикальные линии цвета #8B8D90


А теперь рисуем сами кнопки,выбрав для этого Rounded Rectangle Tool (U) (радиус 15 px).


Blending Options>Inner Shadow


Blending Options>Gradient Overlay


Параметры градиента:


Blending Options>Stroke




Дублируем кнопку десять раз и с помощью Free Transform немножечко повернем кнопки с левой и правой стороны и расположим их воть так:


И еще одну копию! Жмем Alt и выбираем Rounded Rectangle Tool (U) (радиус 5 px)чтобы вырезать нижнюю часть кнопки как показано на следующей картинке:


А затем пишем циферки...



...и буковки...


..и символы.


А чтобы нарисовать символ * и + , берем Line Tool (U) (1 px),цвета #414142.



Используя Rectangle Tool (U), попробуем нарисуем символ "пробел", цвет #5B5C5D. Жмем SHIFT пока используем предыдущий инструмент чтобы добавит выпуклости слева и справа.


Теперь давайте нарисуем еще два символа..с помощью Custom Shape Tool (U) и Line Tool (U) (1 px) - звук, а с помощью Pen Tool (P) - стрелочку. Цвет #414142 для обоих символов.


Используя опцию Free Transform меняем форму символа звука.


А сейчас рисуем символ голосовой почты. В этом случае мы будем использовать Line Tool (U) (1 px) чтобы нарисовать горизонтальные линии и Ellipse Tool (U) чтобы сделать по одному колечку слева и справа. Нажимаем Alt и с помощью Rectangle Tool (U) вырезаем колечки под линией..цвет #414142



Fill 0%
Blending Options>Stroke




Ну а теперь комбинируем все слои,принадлежащие сотовому телефону, в группу (нажмите Ctrl чтобы отметить необходимые слои и держа левую кнопку мыши перетаскиваем на иконку создания новой группы). Делаем копию созданной группы.Жмемс Ctrl чтоб отметить копию и Ctrl+E. Используя Free Transform,перевернем слой и опустим его ниже чем телефон.


На том же слое внизу панелии применим опцию Add a Mask. Используя Gradient Tool (G), осветлим отражение.


результат


Автор: Adobe Tutorialz
Перевод : Immortal Lintu
Источник
Комментарии: 0
1
Пока комментариев нет
1
 
   
   
Arts.In.UA АртНау - художники и картины Яндекс цитирования Яндекс.Метрика