Воскресенье, 24.11.2024, 11:02
Massiveattack
Приветствую Вас Гость | RSS




Меню сайта
Наш опрос
Вы вернетесь к нам на сайт?
Всего ответов: 421
Главная » 2008 » Август » 28 » Уроки Photoshop // Дизайн Nokia 5200
Уроки Photoshop // Дизайн Nokia 5200
13:46
С помощью этого урока Вы научитесь создавать дизайн мобильного телефона, используя множество векторных форм, стили и различные инструментаж. Дизайн телефона довольно хороший, а урок объясняет даже самые мелкие детали.






Начните работу с создания нового файла размером 1280×1024 пикселей

Новый файл

Примените следующие параметры для слоя. Для этого нажмите правой кнопкой мышки на рабочий слой и выберите ГРАДИЕНТ.

Карта Градиента

Примените параметры

Градиент

После применения параметров Градиента, Ваш файл должен выглядить вот так:

Градиент

Далее мы должны выбрать инструмент Прямоугольник с закруглёнными краями (радиусом 55 пиксейлей) для того, чтобы нарисовать форму телефона. Далее используем тот же инструмент, но с радиусом 2 пикселя для того, чтобы нарисовать боковые кнопки телефона.

Форма телефона

После этого Ваша картинка должна выглядеть так:

7.jpg

Применяем к слою параметры. Для этого правой кнопко мыши щёлкаем на рабочий слой и выбираем НАСТРОЙКИ СМЕШИВАНИЯ. Выбираем Внутренние тени, и применем следующие параметры:

Внутренние тени

Затем Пременяем параметры для Внутреннего отблеска:

Внутренний отблеск

И применяем параметри для Штрихования:

Штрихование

Для градиента применяем следующие параметры:

Градиент

Ваш рисунок должен иметь вот такой вид:

Форма

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

зона экрана

На панеле слоёв, на этом же слое нажмите Alt и кликните мышкой между красным слоем и слоем с корпусом телефона.

слои

Должно получиться так:

Телефон

Затем нужно выбрать Инструмент прямоугольник с закруглёнными угалами с радиусом 40 пикселей для того, чтобы создать новый слой на панеле телефона. Используйте более тёмный цвет, чем цвет основной панели.

панель

В панеле слоёв нажимаем правой кнопкой мыши на рабочий слой и выбираем Настройки смешивания. Выбираем Штрихование и применяем следующие параметры:

Штрихование

Должно получиться так:

телефон

С помощью Инструмента Прямоугольник создаём новый слой. Цвет выбираем белый. Это будет сам экран телефона.

экран

На этом слое жмём правой кнопой мыши и выбираем Настройки Смешивания. Там выбираем наложение градиента и применяем следующие параметры:

20.jpg

Для градиента применяем параметры:

211.jpg

Должно получиться так:

22.jpg

Выбираем Иструмент Прямоугольник для того, чтобы изобразить зону экрана.

23.jpg

Правой кнопкой мыши жмём на новый слой с экраном и выбираем Настройки смешивания. Там выбираем Наложение градиента, и применяем следующие параметры:

24.jpg

25.jpg

Затем настройки смешивания- Штрихование

26.jpg

С параметрами градиента:

27.jpg27.jpg

Теперь телефон выглядит так:

28.jpg

Затем по очереди используя инструменты Прямоугольник и Карандаш нарисуйте значки белого цвета на боковых кнопках телефона:

29.jpg

Проведите линию на панеле телефона с помощью инструмента Линия:

30.jpg

Тем же инструментом Линия нарисуйте более светлую линию под тёмной, чуть заходя на неё:
311.jpg

Теперь нужно нарисовать кнопку управления. Для этого выберите инструмент Прямоугольник с закруглёнными углами с радиусом 30 пикселей. с помощью свободной трансформации исправьте форму кнопки:

32.jpg

К этому сою применяем настройки смешивания.

Внутренний отблеск:

33.jpg

Штриховка:

34.jpg

Должно получиться так:

35.jpg

Теперь нужно сделать кнопку выпуклой. Для этого используем инструмент Прямоугольник с закруглёнными углами, радиусом 30 пикселей:

36.jpg

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

Насыщение ставим 0%

В настройках смешивания выбираем наложение градиента:
37.jpg

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

38.jpg

Теперь кнопка выглядит так:

39.jpg

Теперь нам нужно сделать внутреннюю часть кнопки телефона. Создаём следующий слой с помощью инструмента Прямоугольник с закруглёнными углами радиусом 10 пикселей.

40.jpg

В Настройках Смешивания этого слоя идём в Штрихование и применяем следующие парметры:

41.jpg

Теперь кнопка телефона выглядит так:
42.jpg

Продублируйте последний сделанный слой.

На этом слое с помощью Инструмента Прямоугольник с закруглёнными углами радиусом 10 пикселей, нарисуйте кнопки телефона:

47.jpg

На этом слое Примените параметры:

Настройки смешивания- внутренний отблеск:

48.jpg

Наложение градиента:

49.jpg

Штриховка:

50.jpg

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

51.jpg

теперь кнопка должна выглядить так:

52.jpg

Скопируйте кнопку на другую сторону от центральной кнопки.

53.jpg

Дублируйте этот слой ещё два раза для того, чтобы создать ещё две кнопки.

Левая нижняя кнопка будет иметь параметры слоя:

Настройки Смешивания- Наложение Градиента:

55.jpg

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

56.jpg

Параметры Правой нижней кнопки:

Настройки смешивания- Наложение Градиента:

57.jpg

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

58.jpg

Кнопки должны выглядить так:
54.jpg

С помощью инструмента Прямоугольник с закруглёнными углами можно сделать динамик. Затем, удерживая Alt, воспользуйтесь инструментом Прямоугольник, как показано на рисунке:

59.jpg

К этому слою примените параметры

Натройки смешивания-Наложение Градиента:

60.jpg

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

61.jpg

Должно получиться так:

62.jpg

Теперь нужно нарисовать отверстие в динамике. Это можно сделать предыдущим способом, так же как и был нарисован сам динамик:

63.jpg

К этому слою применяем параметры

Настройки смешиванияя- Наложение градиента:

64.jpg

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

65.jpg

Должно получиться так:

66.jpg

Скопируйте отверстие на другую сторону динамика:

67.jpg

Теперь делаем Панель с кнопками телефона. Для этого используем инструмент Прямоугольник с закруглёными углами. Новый получившийся слой нужно поместить под слоем с панелью телефона:

68.jpg

Для этого слоя применям параметры

Настройки смешивания- Внутренний отблеск:

69.jpg

Наложение градиента:

70.jpg

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

71.jpg

Должно получиться так:

72.jpg

С помощью Свободной трансформации создаём новый слой, цвет слоя выбираем белый. Этот слой помещаем над предыдущим слоем, но ниже остальных слоёв.

73.jpg

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

74.jpg

Параметры этого слоя

Настройки смешивания- наложение градиента:

75.jpg

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

76.jpg

Должно получиться так:

77.jpg

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

78.jpg

Повторите это действие ещё раз:

79.jpg

примените для этого слоя праметры

Настройки Смешивания- Наложение Градиента:

80.jpg

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

81.jpg

Теперь телефон должен выглядить так:

82.jpg

С помощью инструмента Прямоугольник с закруглёнными краями радиусом 15 пикселей, выделяем зону с кнопками на телефоне. Затем исправьте форму прямоугольника:

83.jpg

К новому слою применяем параметры:

Насыщение 0%

Настройки смешивания- Штрихование:

84.jpg

Должно получиться так:

85.jpg

Используйте инструмент Прямоугольник для того, чтобы обозначить границы верхней кнопки на телефоне. Затем исправьте форму по контуру панели телефона:

86.jpg

Для этого слоя применяем параметры

Насыщенность 0%

Настройка смешивания- Штрихование:

87.jpg

Должно получиться так:

88.jpg

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

89.jpg

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

90.jpg

Теперь с помощью инструмента Прямоугольник с закруглёнными углами радиусом 15 пикселей, создаём сами кнопки. В каждой ячейке по кнопке:

91.jpg

Применяем к этому слою параметры:

Настройки смешивания- внутренний отблеск:

92.jpg

Наложение градиента:

93.jpg

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

94.jpg

Штрихование:

95.jpg

Должно получиться так:

96.jpg

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

97.jpg

Продублируйте слой с кнопками. Нажав Alt, с помощью инструмента прямоугольник с закруглёнными краями радиусом 5 пикселей, вырезаем часть кнопки как показано на рисунке:

98.jpg98.jpg

Пронумеруйте кнопки, сохраняя настройки как на рисунке:

99.jpg

Должно получиться так:

100.jpg

Теперь на кнопки нужно поместить алфавит:

101.jpg

Должно получиться так:

102.jpg

Вставляем символ #

103.jpg

Вот так:

104.jpg

С помощью инструмента Линия, размерром 1 пиксель можно нарисовать символ *:

105.jpg

Затем рисуем +, используя параметры:

106.jpg

Теперь кнопки должны выглядить так:

107.jpg

Затем с помощью инструмента прямоугольник создаём символ Пробел:

108.jpg

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

110.jpg

Свободная трансформация изменит форму символа звука:
1101.jpg

Затем на кнопке с цифрой 1 нужно создать символ голосовой почты. Для этого используем инструмент Линия, проводим линию.

111.jpg

Затем используем инструмент Эллипс и рисуем два эллипса по бокам линии. С помощью инструмента прямоугольник нужно убрать лишнюю часть эллипса. Для этого нажав Alt, рисуем два прямоугольника под линией, таким образом убираем лишние части эллипсов:

1121.jpg

Для этого слоя используем параметры:

Насыщенность 0%

Настройки смешивания- Штрихование:

113.jpg

теперь так должна выглядить кнопки:

114.jpg

И так должен выглядить весь телефон:

115.jpg

Теперь нужно скомбинировать слои, которые относятся к панели телефона. Для этого нажмите Ctrl, чтобы выделить нужный слой и удерживая нажатой левую кнопку мыши, таким образом создавая новую группу. Сделайте копию этой новой группы слоё. Нажмите Ctrl, чтобы выделить группу копии и нажмите Ctrl+E. Используя Своодную трансформацию, выключите последний обработанный слой и поместите его ниже, чем слой с панелью телефона.116.jpg

Встаньте на слой в самом низу панели слоёв. Добавьте маску к слою и используйте градиент для того, чтобы сделать отражение телефона темнее:

117.jpg



Источник: www.artzmania.ru

Просмотров: 601 | Добавил: Franz | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Календарь новостей
«  Август 2008  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Поиск
Друзья сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright Massiveattack © 2024Хостинг от uCoz