Создаем реалистичный дизайн мобильного телефона в стиле Blackberry с нуля - Дизайн и рисование - Уроки фотошоп/ Photoshop lessons - ..:: Музыка Фильмы Игры Дизайн ::.. - ..::Скачать бесплатно фильмы, игры, софт, скрипты::..
Понедельник, 24.05.2010, 11:47
Приветствую Вас Блудный
Категории раздела
Смешно...))
Абонент находится на зоне и временно недоступен.
Реклама
FRIENDS
Мини-ЧАТ



Главная
» Файлы » Уроки фотошоп/ Photoshop lessons » Дизайн и рисование
[ Добавить материал ]

Создаем реалистичный дизайн мобильного телефона в стиле Blackberry с нуля
[ ] 03.06.2009, 19:46

Шаг 1

Создайте новый документ размером 1000х400 с черным фоном. Выберите Rounded Rectangle Tool (U) и нарисуйте прямоугольник приблизительно 600x 1000 пикселей. Заметьте, что угловой радиус не имеет значения, поскольку мы собираемся редактировать фигуру.

Выберите White Arrow Tool (A) и перетаскивайте габаритные указатели до тех пор, пока вам не понравится форма. Заметьте, что мне понадобилось удалить некоторые, чтобы получить большие закругленные углы, используя Delete Anchor Tool.

create-a-realistic-blackberry-style-mobile-phone-from-scratch1.gif

Шаг 2

Теперь, когда наша основная фигура готова, нам нужно придать ей эффекты для того, чтобы создать иллюзию. Градиент от светло-серого до черного в режиме Overlay симулирует освещение, а сочетание эффектов Bevel и Hard Inner Glow создаст мягкую округлую рамку. Чтобы применить эти эффекты, убедитесь, что выбран слой с фигурой и кликните на кнопке Effect на вашей палитре слоев, используя такие настройки:

create-a-realistic-blackberry-style-mobile-phone-from-scratch2.gif

Шаг 3

Вот то, что мы уже сделали.

create-a-realistic-blackberry-style-mobile-phone-from-scratch3.gif

Шаг 4

На что будет похож Blackberry без большого экрана? Давайте используем Rectangle Tool (U) и нарисуем прямоугольник в верхней части фигуры. Используйте немного Gradient Overlay и Inner Shadow снова.

create-a-realistic-blackberry-style-mobile-phone-from-scratch4.jpg

Шаг 5

Чтобы сделать экран ещё более блестящим, давайте добавим ещё одно отражение. Продублируйте слой с экраном и, используя Transform Tool (Control+T), сделайте его чуть меньше (примерно на 3-4 пикселя). Затем измените цвет на белый,  Transparency на 5%, и Blending Mode на Multiply.

Это превратит все белые пиксели в прозрачные, показывая слой под ними. Наш слой станет более прозрачным, оставляя видимым только эффект. Отредактируйте Overlay и замените его с белого на прозрачный. Поставьте Opacity на всю и угол на 45 градусов.

Теперь кликните на path в вашей палитре слоев и поиграйте с White Arrow и Convert Point Tool, чтобы создать красивую кривую.

create-a-realistic-blackberry-style-mobile-phone-from-scratch5.jpg

Шаг 6

Чтобы создать центральную кнопку, мы будем использовать нагромождение из кругов. Первый круг имеет градиент по краям, так же, как и Overlay Gradient, в остальных кругах используются Inner и Drop Shadow.

create-a-realistic-blackberry-style-mobile-phone-from-scratch6.gif

Шаг 7

Используя Rectangle Tool, нарисуйте то, что позже станет нашими основными кнопками прямо под экраном. Используя Convert Point Tool, добавьте кривую к нижней части вашего прямоугольника и поменяйте его цвет на темно-серый (#131313).

Используя Rectangular Marquee Tool (M), создайте два выделения шириной 5 пикселей на равном расстоянии от центра. Зажав клавишу Alt, кликните на Mask в вашей палитре слоев (зажатый Alt автоматически инвертирует вашу маску). Поздравляю, вы создали кнопки! Теперь давайте добавим им стили.

create-a-realistic-blackberry-style-mobile-phone-from-scratch7.gif

Шаг 8

Просмотрите слои и выберите вашу главную фигуру. Затем просмотрите список использованных в слое эффектов (используйте маленькую стрелочку справа). Кликните правой кнопкой на Gradient Overlay и скопируйте Layer Style. Вернитесь к вашей новой фигуре, кликните на неё правой кнопкой и вставьте Layer Style.

Добавьте легкую Drop Shadow с Distance 0, Opacity 90%, и размером 25 пикселей. Также добавьте к ней черный инвертированный inner glow. Это придаст ей легкие блики света по краям.

create-a-realistic-blackberry-style-mobile-phone-from-scratch8.gif

Шаг 9

Добавьте толстую линию размером 10 пикселей, чтобы отделить кнопки от экрана. Затем добавьте белый Inner Glow.

create-a-realistic-blackberry-style-mobile-phone-from-scratch9.gif

Шаг 10

Продублируйте слой с кнопкой, сотрите маску слоя и эффекты и поменяйте его цвет на белый. Сдвиньте его немного вниз, на пару пикселей, и используйте Delete Anchor Tool, чтобы удалить верхние две точки, но оставьте нижнюю кривую. Используйте Convert Point Tool, чтобы настроить путь (path), как показано внизу.

create-a-realistic-blackberry-style-mobile-phone-from-scratch10.gif

Шаг 11

Примените настройки Drop Shadow и Inner Glow, как показано внизу. Продублируйте фигуру три раза, используя  Distribute Vertical Spacing Tool, создайте группу (Control+G), и переключите его Blend Option на Multiply, чтобы смягчить края.

create-a-realistic-blackberry-style-mobile-phone-from-scratch11.gif

Шаг 12

Используя Pen Tool (P), нарисуйте нижнюю часть телефона. Используя тот же самый трюк с копированием стиля слоя, примените Drop Shadow, который применялся в шаге 5, к этой фигуре. Добавьте Radial Gradient Overlay от светло-серого к темно-серому. Затем, используя мышь, передвиньте градиент ближе к центру.

Теперь продублируйте этот слой, смените его цвет на белый и его Blending Option на Multiply (снова для того, чтобы убрать белые пиксели). Отредактируйте эффект Radial Gradient и переместите его в другой угол. Поиграйте с Opacitу, пока у вас не получится одинаковое количество освещения на каждой стороне.

create-a-realistic-blackberry-style-mobile-phone-from-scratch12.gif

Шаг 13

Для создания мини-клавиатуры, давайте продублируем слой с кнопкой. Затем измените размер каждой кнопки, чтобы они убрались между белыми разделителями. Удалите Mask, потяните Guides из Vertical Ruler, и поработайте с сеткой (Grid), чтобы сформировать десятистолбцовую широкую клавиатуру. Используя тот же метод, что и в шаге 5, создайте новую версию этой маски.

create-a-realistic-blackberry-style-mobile-phone-from-scratch13.gif

Шаг 14

Используйте Pen Tool для создания последнего ряда клавиш. Используйте стили и технику с масками, которую мы применяли, для разделения их между собой.

create-a-realistic-blackberry-style-mobile-phone-from-scratch14.gif

Шаг 15

Используя ваш любимый шрифт, расположите каждую букву на соответствующей клавише. Некоторые из клавиш (backspace, возврат, shift, стрелочки) уже существовали в моей библиотеке, но вы всегда можете поискать в шрифтах.

create-a-realistic-blackberry-style-mobile-phone-from-scratch15.gif

Шаг 16

Клавиши теперь на месте, хотя ещё не все готов, потому что нам нужно больше света! Продублируйте первый слой с клавишами. Затем очистите стили и примените простой градиент от черного к белому так, чтобы белый лишь слегка проглядывал снизу. Не забывайте, что вы можете кликнуть и протянуть градиент по всему документу. Наконец, измените Opacity на 70%.

create-a-realistic-blackberry-style-mobile-phone-from-scratch16.gif

Шаг 17

Создайте маску (Mask) в этом новом слое. Затем выберите Elliptical Marquee Tool. Начиная слева, нарисуйте круг, который проходит через верхнюю правую и нижнюю левую часть клавиши. Затем залейте маску черным. Повторите процесс для всех клавиш, но зеркально отражайте маску из центра.

create-a-realistic-blackberry-style-mobile-phone-from-scratch17.gif

Шаг 18

Продублируйте слой дважды. Расположите получившиеся слои поверх каждого ряда клавиш. Повторите тот же шаг для создания слоя с отражением в нижнем ряду. Для пробела сделайте два круглых выделения по сторонам и добавьте прямоугольник посередине.

create-a-realistic-blackberry-style-mobile-phone-from-scratch18.gif

Шаг 19

Нашему телефону Blackberry не хватает динамика. Нарисуйте Rounded Rectangle с большим радиусом угла. Выберите светло-серый тон и добавьте Inner Shadow.

create-a-realistic-blackberry-style-mobile-phone-from-scratch19.gif

Шаг 20

Мы почти закончили! Давайте добавим немного текстуры на фоне. Я выбрал кожу чтобы акцентировать внимание на престижности и высоком качестве.

Я скачал эту фотографию с istockphoto, потому что она была как раз той, что я искал. Хотя нам понадобится немного подправить цвет. Загрузите фото в Photoshop. Затем зайдите в Image > Adjustments > Hue/Saturation (Control+U) и применяйте De-Saturate, пока не получите изображение только с оттенками серого.

Добавьте Mask и нарисуйте большой круговой от белого к черному градиент. Если нужно, используйте Free Transform Tool, чтобы настроить его (Control + T), но не забудьте разблокировать Mask сначала, кликнув на иконку со звеном. Затем добавьте новый фоновый слой, залейте его черным и слейте оба слоя.

create-a-realistic-blackberry-style-mobile-phone-from-scratch20.gif

Шаг 21

Давайте добавим текстуру к вашему основному дизайну. Расположите её над черным фоном и поставьте её blending mode на Screen. Это сделает прозрачными черные пиксели, проявляя нижний слой. Продублируйте его и поверните (Rotate) на 180 градусов. Затем вернитесь в основную фигуру и добавьте немного Drop Shadow.

create-a-realistic-blackberry-style-mobile-phone-from-scratch21.gif

Результат

Создаем реалистичный дизайн мобильного телефона в стиле Blackberry с нуля

Категория: Дизайн и рисование | Добавил: dakota
Просмотров: 92 | Загрузок: 0 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email:
Код *:

Admin Меню
  • Нам нужны люди,присоеденяйтесь
    Подробности тут

  • Самому активному пользователю сайта в конце месяца будет выдаваться 7-ми значный ICQ номер
    Подробности тут

  • Наш тулбар

  • Обмен баннерами

  • Как качать с файлообменников?
  • Профиль
    Привет: Блудный

    Сообщения:

    Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
    Логин:
    Пароль:
    Поговорим?
    Опросник
    Кто из знаменитостей вам больше нравится (м)?
    Всего ответов: 9
    Помощь сайту
    Кошельки:
    R 270966599442
    Z 416518274191

    Статистика


    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0


    Сегодня нас посетили:
    Наша кнопка
    Если вам понравился наш сайт, поставьте в благодарность себе нашу кнопку



    код кнопки:


    Для красивого отображения этого блока требуется Flash Player 9 или выше.