—»     —»   Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Вот и мы, друзья, с очередным отличным Photoshop-пособием - на этот раз по построению симпатичной плоской iOS 7-иконки попиксельной выверки. Кроме того, данное пособие поможет вам освоить полезные приёмы, следуя пошаговой инструкции по построению иконки попиксельной выверки формата 256 х 256 пкс для мобильных ресурсов.

Вот как будет выглядеть эта иконка в готовом виде.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Часть 1. Основа иконки

Сначала задаём размеры нового документа - 1024 х 1024 пкс и цвет фона - # fcf2da. В меню редактирования последовательно открываем Edit > Preferences > Guides, Grids & Slices, задаём плотность сетки (Grid) 256 пкс, подразделяем сетку (Subdivision) на квадраты в 16 пкс.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Через опцию построения прямоугольника с округлыми углами Rounded Rectangle Tool (U) задаём контур нового слоя-фигуры размером 512 х 512 пкс с радиусом скругления 120 пкс. Этот слой должен быть именно "фигурой". (В меню выбора режима вычерчивания контура Pick Tool Mode вверху слева выберите опцию "фигура" - Shape, если она не выбрана заранее.) Задайте цвет фигуры # c47420, назовите слой "основой иконки" - “icon base”.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Оттените слой вовнутрь (Inner Shadow), как показано на рисунке ниже.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Теперь нанесём полноценную тень в основание иконки. Для этого вычертим прямоугольник через опцию Rectangle Tool (U) и подложим этот слой под слой “icon base” нажатием на клавиши Ctrl/Command + [ (открытая скобка). Повернём слой-прямоугольник на - 44 градуса и выровняем верхний край прямоугольника по диагонали, как показано ниже.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Теперь, чтобы тень у нас выглядела гуще под фигурой и постепенно бледнела по мере удаления от неё, добавим эффект объёмности (gradient), выраженный следующими значениями. Убедитесь, что значение заливки слоя (Layer Fill) задано у вас в 0 %, а значение матовости слоя (Layer Opacity) в 30 %.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

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

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Часть 2. Построение изображения листков блокнота

Итак, на втором этапе построения иконки рисуем листки блокнота. Их будет несколько, начнём с нижнего. Задействуем опцию построения прямоугольника с округлыми углами Rounded Rectangle Tool (U) и вычерчиваем обтекаемую фигуру размером 448 х 448 пкс с радиусом скругления 100 пкс. Двойным кликом выделяем слой этой фигуры и задаём ей цвет # d9d9d9.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Теперь скопируем слой (Ctrl/Command + J) и урежем листок по нижнему краю на 16 пкс. Быстро уменьшить фигуру по высоте можно следующим приёмом: выбрать опцию направленного выделения Direct Selection Tool (A) и выделить слой фигуры кликом по нему. Затем, удерживая нажатой правую кнопку мыши, провести курсором в режиме опции Direct Selection Tool по нижнему участку контура, чтобы задать опорные точки. Задав их, нажать на клавиатуре клавишу со стрелкой вверх и подтянуть уголки вверх на 16 пкс.

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

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Расчертить листок в линейку просто. Делается это так. Удерживая нажатой клавишу Shift на клавиатуре, проведите 6 чёрных (#000000) линий толщиной в 2 пкс, как показано ниже. Если вы пользуетесь CS6 или CS5, то линии можно прочертить по одной, а затем выделить слои линий и свести их в единый слой фигуры - кликнуть правой кнопкой мыши по выбранным слоям и задать их слияние через Merge Shapes в панели опций. А командой Ctrl / Command + E выбранные слои фигур можно совместить ещё быстрее.

Теперь вы видите, что линейки тянутся у вас за края бумаги, это выглядит странно. Чтобы спрятать лишние участки линеек из вида, кликните правой кнопкой мыши по слою линеек и выберите в панели опций наложение маски - Create Clipping Mask. Вы увидите, как отсекутся лишние "хвосты" линеек. Осталось приглушить матовость слоя линеек до 20 % для большей реалистичности и просто для красоты.

Вот как на данном этапе выглядит иконка.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Часть 3. Построение изображения карандаша

На этом третьем и последнем этапе мы сконструируем плоское изображение карандаша и длинной тени от него. Начнём с корпуса карандаша. Через опцию построения прямоугольника Rectangle Tool (U) задаём прямоугольный контур размера 192 х 96 пкс. Меняем цвет слоя на # 00da67 или любой другой на ваш вкус.

Теперь задаём ещё один слой прямоугольной фигуры той же ширины, но высотой в 32 пкс. Меняем цвет на чёрный (#00000) и снижаем матовость слоя до 25 %. Копируем слой и задаём значение его матовости в 10 %. Совмещаем оба слоя, как показано ниже, чтобы органично вписать их в криволинейные контуры.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Далее конструируем заточенный кончик карандаша и грифель. Кончик вычерчиваем в виде треугольника со сторонами 96 х 96 пкс. Меняем цвет слоя на коричневый древесный (#e39a4d) и совмещаем правую грань треугольника с левым краем корпуса карандаша. Укрупняем этот участок и вплотную, без зазора, приставляем их друг к другу.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Грифель строим через опцию Rectangle Tool в виде квадрата размером 32 х 32 пкс, окрашиваем его в тёмно-серый цвет (#474f57). Надвигаем квадрат на самую верхушку треугольника и обрезаем слой маской, кликнув по нему правой кнопкой мыши и выбрав в панели опций Create Clipping Mask.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Переходим к построению стёрки. Сначала рисуем прямоугольник с округлыми углами размером 64 х 96 пкс и радиусом скругления 20 пкс. Задаём слою цвет # f78879 и придвигаем его вплотную к правому краю корпуса карандаша. Присваиваем слою название Rubber (Резинка).

Конструируем залоснившееся пятнышко на стёрке. Рисуем небольшую вертикальную фигурку обтекаемой формы размером 10 х 40 пкс. Окрашиваем её в белый цвет и снижаем матовость до 30 %, помещаем её на слой стёрки вверху справа.

Задаём ещё один слой вертикальной прямоугольной фигуры размером 32 х 96 пкс. Окрашиваем его в светло-серый цвет (# d5d5d5). Накладываем его поверх слоя резинки, совмещая их, как показано ниже.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Пора пририсовать карандашу длинную тень. Рисуем чёрный прямоугольник от кончика карандаша до края стёрки. Размер ему можно задать 352 х 160 пкс. Присваиваем слою название “Long Shadow” ("Длинная тень").

Поскольку у нас уже сконструирован слой длинной тени от основания иконки, скопируем значения эффекта объёмности оттуда и присвоим их слою длинной тени от карандаша. Вот что у нас получится.

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Что-то наша иконка с длинной тенью смотрится не ахти, да? Давайте внесём последний штрих. Выделим все слои изображения карандаша и слой его длинной тени, сложим их в папку под названием Pencil (Карандаш) - (Ctrl / Command + G). Выделим эту папку и последовательно откроем в меню опцию поворота объекта - Edit > Free Transform (Ctrl / Command + T), зададим величину угла совместного поворота объектов (Set Rotation) в -45 %. Настроим размещение объектов в папке Pencil - вынесем их в центр иконки.

Наша иконка готова

Уроки Photoshop: Построение в Фотошоп плоской иконки iOS 7-приложения

Надеемся, пособие вам понравилось. Конструируйте собственные плоские иконки, используя описанные в нём приёмы, делитесь ими в разделе комментариев. Если у вас есть ко мне вопросы, не стесняйтесь, спрашивайте.

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

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

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







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