—»     —»   Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп



Интернет уже пестрит заголовками статей о выпуске на рынок нового гаджета от Apple. iPad представляет собой нечто нового образа провождения времени в сети Интернет. На сегодняшний день каждому дизайнеру в наборе всегда пригодится иконка этого новшества. Так что давайте не будем терять времени, запустим Photoshop и начнем ее рисовать.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Иконка будет представлять собой простую лицевую сторону iPad. Давайте приступим к работе, руководствуясь официальным сайтом Apple.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Создайте новый документ и используйте инструмент создания прямоугольника с закругленными углами. Установите радиус угла на 20 пикселей и залейте прямоугольник белым цветом.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

CTRL+клик по миниатюре слоя для того, чтобы создать выделение. Затем, откройте меню Select > Modify > Contract и введите параметр 3 пикселя. Создайте новый слой и залейте это выделение черным цветом.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Далее двойной клик по слою с черным прямоугольником. На этот раз добавьте эффект внешнего свечения, используя светло-серый цвет, и также установите значение на 3 пикселя, а режим смешивания на Normal.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

С помощью инструмента создания прямоугольного выделения нарисуйте тоненькие кнопки в 1 пиксель в верхней части и сбоку корпуса для того, чтобы имитировать кнопки блокировки и отключения звука. Залейте их градацией плавного серого оттенка.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Дисплей iPad обычно представляет собой нечто вроде яркой фоновой картинки. Фотография с flickr от Arnar Valdimarsson, Creative Commons, отлично подойдет для этого. Используйте инструмент создания выделения для того, чтобы вырезать подходящий для нашего дисплея фрагмент.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Нарисуйте квадрат карандашом в 1 пиксель на новом слое, затем удалите его углы при помощи ластика. Понизьте уровень плотности до 25%.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Ни один продукт Apple не обойдется без отражений и бликов. CTRL+клик на миниатюре слоя с корпусом для того, чтобы создать выделение. Затем, залейте его градацией белого от правого верхнего угла. Понизьте уровень плотности слоя насколько понадобится, и передвиньте его в верхнюю часть слоя так, чтобы подлежащие элементы оказались под воздействием эффекта свечения.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Залейте прямоугольное выделение в нижней части дисплея серым цветом, а затем нажмите CTRL+T. Кликните правой кнопкой и выберите опцию перспективы, затем передвиньте верхние углы немного внутрь, чтобы имитировать панель iPad.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

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

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Примените эффект внутренней тени, чтобы создать объем. Установите параметры на светло-серый цвет и режим смешивания на normal. Установите угол -90 градусов, дистанцию на 1 пиксель, загрязнение на 27%, а размер на 2 пикселя.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Воспользуйтесь ручкой для того, чтобы нарисовать плавную фигуру вдоль панели. Закончите фигуру неровными точками по направлению к началу. Залейте фигуру белым цветом и установите уровень плотности на 13%.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

CTRL+клик по слою с панелью для того, чтобы создать выделение. Нажмите CTRL+Shift+I для того, чтобы инвертировать выделение, а затем удалите все, что находится за пределами панели на слое с отражением.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Теперь все, чего не хватает дисплею – нескольких иконок. В примере был использован привлекательный набор иконок в стиле Apple от дизайнера с Deviant Art – Ikon. Скачайте подборку и разместите иконки на дисплее.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Примените стиль тени к иконке, используя параметры значения плотности равному 50%, значение дистанции 2 пикселя и значение размера в 9 пикселей. Кликните правой кнопкой по слою и скопируйте стиль слоя, а затем примените его ко всем остальным иконкам.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

Выделите 4 иконки и скопируйте слои. Нажмите CTRL+E для того, чтобы соединить эти слои вместе, а затем нажмите CTRL+T для создания трансформации. Кликните правой и выберите опцию вертикального переворота, а затем расположите их так, чтобы имитировать отражение. Добавьте маску слоя и немного затемните изображение отражения, используя мягкую кисть или градацию, а затем понизьте уровень плотности слоя так, чтобы иконки стали похожи на отражения.

Уроки Photoshop: Рисуем детальную иконку Apple iPad в Фотошоп

И вот, наша иконка iPad готова. Не забудьте также скопировать все что получилось в итоге, перевернуть и имитировать тень всего гаджета.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: iPad, иконки, Photoshop
Опубликовал Mysterious Master   Прочитано (раз): 13468   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930