Создание стильной иконки для записной книжки в Mac OSX

Сегодня я вам покажу, как создать иконку для Mac OSX. Новичкам обычно полезно начинать с создания иконок для приобретения практических навыков. Так давайте же начнем персонализировать свои рабочие места, приступив к созданию индивидуальных иконок.

Введение

Создание качественной иконки для Mac OSX, как правило — не просто возможность воплотить в жизнь сложные дизайнерские идеи, но вообще обязательно для любого профессионала, работающего с графикой. Прежде чем начинать разработку иконки для этой ОС — нужно как минимум ознакомиться с директивами Apple Human Interface Guidelines. В них раскрываются основы философии дизайна пользовательского интерфейса Mac OSX. Вторым шагом будет уже непосредственно идея того, что вы хотите создать. И так, начнем разработку собственной иконки для записной книжки.

Теория света

Сейчас я кратко опишу основные принципы освещения. Все довольно просто. В нашем случае есть два источника света: солнечный — мощный основной источник, и свет от отражающих поверхностей — слабый, мягкий источник.

1 Шаг

Создайте новый документ, размерами 1024×1024px. Затем с помощью направляющих очертите в центре документа прямоугольник 512×512px (стандарт для иконок в Leopard).

2 Шаг

Создайте новый слой и добавьте прямоугольник со скругленными углами (20px диаметр) как Shape Layer. Это — фигура будущего блокнота. Я хотел себе блокнот красного цвета, поэтому в качестве цвета заливки я выбрал красный. Назовите этот слой "Book Cover".

3 Шаг

Все книжки, либо бумаги иконки в Mac OSX имеют специфическую перспективу. Какую — можно увидеть на рисунке ниже.

4 Шаг

Выберите инструмент Direct Selection Tool (A) и зацепите им две угловых точки (на круглых углах нужно всегда отмечать две). Затем подравняйте их по новым направляющим, так проделайте со всеми углами и далее спрячьте направляющие. Дублируйте слой "Book Cover", переименуйте его в "Paper" и спрячьте его пока что — он нам понадобится позднее.

5 Шаг

Выполняем двойной щелчок на слое "Book Cover" и в окне Layer Style применяем стили, показанные ниже. Не забудьте отметить чекбокс Blend Clipped Layers as Group в Blending Options.

6 Шаг

Создайте новый слой, нажмите Ctrl + Alt + G, чтобы преобразовать слой в обтравочную маску (Clipping Mask). Выберите Pen Tool (P) и нарисуйте им темную серую широкую полосу слева обложки. Назовите его "Black Binding" — темный синий все-таки сильно похож на черный.

7 Шаг

Примените следующие стили к слою "Black Binding".

8 Шаг

Добавьте еще две обтравочных маски к фигуре нашей книги (они в итоге должны оказаться под слоем "Black Binding"). Первую залейте черным цветом, затем откройте Filter > Noise > Add Noise (задайте Amount порядка 75%, Distribution выставьте Uniform). Также смените Blending Mode на Overlay и задайте 7% Opacity. Ко второй обтравочной маске примените фильтр Paper Filter (Image Balance — 20, Grainess — 15, Relief — 10). Режим наложения задайте Overlay, Opacity установите в 3%.

9 Шаг

Теперь придадим текстур слою "Black Binding". Создайте две обтравочных маски (Clipping Mask) для слоя "Black Binding". Нам нужно загрузить выделение по его форме, поэтому зажмите клавишу Ctrl и кликните по векторной маске этого слоя. Залейте выделение черным цветом, а затем примените фильтр Graphic Pen с настройками, показанными ниже.

10 Шаг

Теперь вызываем меню Extract (Ctrl + Alt + X) и извлекаем примерно половину черных полос.

11 Шаг

Смените режим наложения слоя на Overlay и задайте Opacity 10%.

12 Шаг

Здесь нам нужно повторить некоторые предыдущие шаги. Поэтому выберите вторую обтравочную маску, созданную нами в 9 шаге. Проделайте с ней все то же самое, что излагалось в шаге 9, но с применением фильтра Note Paper (как на 8 шаге) вместо Graphic Pen. Параметры фильтра: Image Balance — 20, Grainess — 15, Relief — 10. И, опять же, смените режим наложения слоя на Overlay, а Opacity на этот раз оставьте равным 100%.

13 Шаг

Последнее, что нам нужно сделать с "Black Binding" — добавить несколько видимых царапин. Создайте новый слой поверх всех обтравочных маск "Book Cover". После этого выберите кисть Sturbust Brush (она находится в Assorted Brushes). Выберите черный цвет, затем загрузите выделение слоя "Black Binding" (Ctrl + click по векторной маске слоя) и сделайте несколько кликов по правому краю выделенной области. Теперь создайте новую группу для слоев, назовите ее "Front Cover" и перенесите все слои, с которыми мы работали для создания обложки блокнота сюда.

14 Шаг

Добавим заднюю обложку для книги. Копируйте группу "Front Cover", переименуйте ее в "Back Cover" и поместите под группу "Front Cover".

15 Шаг

"Back Cover" практически ничем не должна отличаться от "Front Cover", за исключением того, что придется все-таки убрать пару стилей слоев. Первым кандидатом на удаление будет Drop Shadow главного слоя с обложкой — уберите его, вторым — Bevel and Emboss слоя "Black Binding".

16 Шаг

Теперь время использовать слой "Paper" из 4 шага. Включите данный слой и выберите Direct Selection Tool. Сейчас нам нужно немного сжать слой по вертикали, причем Transformation для таких целей не подойдет — нам нужно сохранить радиус закругления углов. Если бы мы сжимали слой с помощью Transformation — закругленные углы также сжимались бы. Поэтому инструментом Direct Selection выбираем попарно угловые точки и подтягиваем их немного вверх. Затем смените цвет заливки на белый.

17 Шаг

Примените следующие стили для слоя "Paper".

18 Шаг

Для создания еще пяти листков скопируйте слой "Paper" четыре раза. После этого расположите их, как показано ниже.

19 Шаг

Создайте новую группу для слоев и назовите ее "Papers". Поместите ее между "Front Cover" и "Back Cover".

20 Шаг

Чего-то не хватает?.. Ах, да — конечно же колец. Давайте их нарисуем! Сначала при помощи Ellipse Tool (U) создайте белый эллипс.

21 Шаг

Теперь вычтите из этого эллипса другой, используя тот же инструмент Ellipse Tool (U) в режиме вычитания (Subtract Mode, — ).

22 Шаг

Теперь удалите невидимую часть кольца с помощью Pen Tool (P) в режиме Subtract (-). Назовите получившийся слой "Ring".

23 Шаг

Примените к слою следующие стили.

24 Шаг

Чтобы получить тонкое отражение красного оттенка, дублируйте "Ring", очистите все стили и примените такие:

25 Шаг

Добавьте новый слой и назовите его "Ring shadow", затем откройте Layer > Vector Mask > Reveal All. Кликните по векторной маске слоя "Ring" и скопируйте контур в слой "Ring shadow". Выделите этот слой и мягкой черной кистью в 100px и 20% Opacity добавьте черных теней на края фигуры "Ring".

26 Шаг

Создайте с помощью Ellipse Tool (U) отверстие для кольца в блокноте.

27 Шаг

Примените к "Ring Eye" следующие настройки.

28 Шаг

Добавьте новый слой и расположите его между слоями "Ring" и "Ring Eye". После этого создайте выделение по "Black Binding". Теперь возьмите черную кисть размером 50px и 30% Opacity и создайте тень под кольцом.

29 Шаг

Как вы могли бы заметить — нужно немного подправить кромку кольца. Создайте новый слой поверх всех обтравочных маск слоя "Ring" и закрасьте контур черной кистью.

30 Шаг

Создайте новую группу слоев, назовите ее "Ring Layers" и поместите туда все слои кольца. Затем скопируйте группу и передвиньте новое кольцо на соответствующее ему место. Тень под этим кольцом должна немного отличаться от предыдущего, поэтому поверните ее на несколько градусов ближе к самому кольцу. Чтобы вышло пять таких колец — повторите этот шаг еще пять раз.

31 Шаг

Выберите перо (Pen Tool, P) и нарисуйте контур закладки, как на рисунке ниже.

32 Шаг

Примените следующие характеристики для этого слоя (назовите его "Fold").

33 Шаг

Продублируйте "Fold" четыре раза.

34 Шаг

Добавим тень нашему блокноту. Я предлагаю не создавать тень с использованием дубля основной фигуры, ее преобразованием и последующим размытием, а предлагаю поработать вручную кистью (Brush Tool, B) и ластиком (Erase Tool, E). Такой метод может вам показаться непростым, но я надеюсь, что вы со всем справитесь и результат выйдет более реалистичным. Также можете поиграть с непрозрачностью (Opacity) слоя. Важный момент заключается в том, что тень не должна быть слишком темной и броской (поэтому здесь и приходится кстати белый фон).

35 Шаг

Что ж, с блокнотом — готово. Уже его вы можете использовать в качестве иконки для многих приложений, но если нам нужна адресная книга — нужно добавить еще одну деталь. Нанесем на книжку символ собачки. Выберите свой любимый шрифт (мне нравится Myriad Pro), установите размер шрифта равным 250pt и наберите символ "@".

36 Шаг

Затем поверните символ примерно на 10° против часовой стрелки.

37 Шаг

И задайте слою с текстом такие стили:

38 Шаг

Скопируйте символ собачки, передвиньте его на несколько пикселей выше и на несколько — правее. Удалите все стили, смените цвет на белый и примените новые. Не забудьте сменить Opacity на 80%.

Заключение

Я надеюсь, этот урок оказался полезным в освоении процесса создания иконок под Mac OSX. Для себя я сделал несколько версий разных цветов — добавил зеленый и черный блокноты.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.

Обсуждение урока

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

Посмотри в Фотошопе инструмент Rounded Rectangle Tool (U). С его помощью легко можно создать прямоугольник с закруглёнными краями. Это один вариант. Или если взялась рисовать Pen Tool'ом, включи в настройках сетку и привязку к ней (View — Show — Grid и View — Snap to — Grid). По этой самой сетке тебе будет проще построить, если не получается от руки.

Ириска, похоже, что у тебя существует некоторое непонимание того, как пользоваться Pen Tool'ом. При помощи него можно строить самые разнообразные фигуры с довольно большой точностью и это не должно отнимать чересчур много времени и усилий. Фигуру со скругленными углами нужно сначала набросать грубо - расставив точки Pen Tool'ом в примерно нужном тебе порядке. Если точки ставить одним кликом мыши - они получаются острыми углами (не наш случай), которые можно затем преобразовать в кривые. Если же точки расставлять кликом + подтягиванием мыши по ходу следования прямой на небольшое расстояние, то получаются сразу кривые, которые потом точно также можно изменять, перетягивая соответствующие ручки управления твоей кривой. Так, поигравшись с ручками (направляющими, которые показывают касательную к изгибу), можно довольно быстро придать своей фигуре нужный тебе вид. Пробуй)

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

В этом вся загвоздка. На глаз бывает трудно даже редактированием добиться ровных кривых. Я предложил вариант с направляющими, сам так иногда делаю.

В смысле ровных??

Там же геометрия обыкновенная. Не совсем пойму о чем речь.)

Я не о конкретно нашем примере, а вообще говорю о простейшей геометрии.