Уроки Фотошоп
Создание простой иконки iOS 7

В данном уроке я научу вас создавать простейшую, стандартную иконку iOS 7 для iPhone.

Уровень сложности – простой.

Время на создание иконки – не более 5-10 минут.


#Урок Фотошоп #Photoshop #iOS 7 icon



Для простоты и ускорения, а также для того, чтобы Вы быстрее научились работать более плодотворно в фотошопе, я буду использовать по максимуму "горячие клавиши". Поверьте, это намного ускоряет работу. Запомнить основные комбинации весьма несложно.

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




Думаю все, у кого есть iPhone узнали эту иконку. Иконка выполнена в стиле iOS 7. Первым делом открываем фотошоп, и создаем новый документ. Я использую английскую версию. File > New или Ctrl+N. Размеры 1024х1024 px на 72 dpi.



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



Далее заливаем фон в любой цвет, чтобы белая иконка не терялась. Я взял, к примеру, вот этот: #00b1ff



Создаем основу иконки. Выбираем инструмент Rounded Rectangle Tool, выбираем белый цвет в палитре и нажимаем на наше рабочее поле, появляется диалоговое окно, вводим данные как на картинке ниже. 1024х1024 px размер и 220 px закругления (это стандарт для ios 7)



Получаем результат. Основа для нашей иконки готова.



Теперь начинается самое интересное. Создаем первый "лепесток". Тем же самым инструментом - Rounded Rectangle Tool, нажимаем на документ и в тако же (см. выше) диалоговом окне задаем следущие параметры 195 (ширина) x 415 (высота) px при тех же закруглениях в 220 px. Нажимаем OK и "лепесток" появляется в новом слое, можно сразу же покрасить его в нужный цвет, а именно - #faa733. Ставим его по центру вертикали и чуть выше центральной горизонтальной линии.



Далее нам нужно продублировать этот "лепесток" 7 раз по кругу, и задать цвет для каждого "лепестка". Цвет можно задать после того как мы продублируем все "лепестки", либо сразу каждый, тут по желанию. В данном случае мы раскрасим их после. Делается это очень просто. Приступим. Копируем слой - Ctrl+J. В новом слое нажимаем Ctrl+T (трансформация), выбираем центральную точку и тянем ее в центр документа:



Затем берем за правый верхний угол и поворачиваем, с зажатой клавишей shift, на 45 градусов, нажимаем Enter, готово. Второй "лепесток" на своем месте. Зададим ему свой цвет позже.



Далее, по такому же сценарию, мы копируем оставшиеся "лепестки" по кругу. Даже еще проще, используя команду Transform Again: Ctrl+J (копируем предыдущий слой), Ctrl+Shift+T (автоматически трансформируем еще раз как предыдущий слой), жмем Enter, вуаля. Видим такую картину:



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

1. #faa733
2. #f26967
3. #d486ad
4. #a38ec3
5. #79abdb
6. #6cc198
7. #b3d557
8. #f8e32b

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



Следующим эпатом, мы выделяем все слои с "лепестками" и задаем им перекрытие Multiply.



Далее группируем слои с "лепестками" нажимая Ctrl+G и нажимаем кнопку Add Layer Style. Там выбираем Gradient Overlay...



В окне задаем следующие параметры:



Жмем OK и все, наша иконка готова!



Данный урок в видео формате:



Всем спасибо за внимание, надеюсь данный урок был полезен. Подписывайтесь на мой канал на youtube, буду еще выкладывать уроки. И заходите почаще ко мне на сайт. Успехов!




для связи