Практикум: отрисовка иконки с фотографии.

Как я уже говорила в одном из предыдущих постов – рисование иконок, хоть и кропотливая, но весьма интересная работа, требующая от дизайнера аккуратности и усидчивости. Вы можете задать вопрос: если у нас уже есть фотография неплохого качества, разве нельзя ее уменьшить до размера иконки и добавить/убрать некоторые детали? Ответ: можно и нужно, если вы уверены, что такоие действия не займут больше времени и иконка в результате будет иметь аккуратный вид (как нарисованная вручную, а не как уменьшенная фотография).

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

Сегодня мы попытаемся отрисовать свинку-копилку с большой фотографии. Я ее уже однажды отрисовала, но, к сожалению, не сохранила скриншоты этапов моей работы, поэтому я сделала их заново. Я специально выбрала самый простой пример – оттачивать технику надо на примерах посложнее (Для интереса попробуйте в следующий раз отрисовать иконку с фото очень низкого качества).

1. Для рисования иконки, как правило, нам нужна исходная фотография. Ищется она обычно в images.google.com по ключевому слову (в нашем случае piggy bank). Не берите первую попавшуюся, внимательно просмотрите все картинки и выберите наиболее подходящую по ракурсу или просто ту, которая вам больше нравится. Не нужно без надобности искать картинки со множеством деталей (на маленькой иконке они все равно превратятся в мусор либо будут не заметны).
2. На выбоанной каритнке с помощью pen tool обрисуем контур свинки, чтоб затем уменьшить его до нужных размеров, как показано на картинке (для создания угловых точек – как на кончике носа у свиньи нажимаем Alt).
3. Готовый замкнутый контур с помощью команды Free Transform ⌘+t – на Маке или Ctrl+t уменьшаем до нужного нам размера.
4. На вкладочке Paths (она обычно соседствует с вкладкой Layers) и включается из меню Window – Paths нажимаем кнопочку Load Path as Selection (другой вариант – щелкаем правой кнопкой мыши на названии контура – в нашем случае по умолчанию он называется Work Path – и выбираем из появившегося меню Make Selection). В результате выполненных действий наш путь превратится в выделение, которое мы заливаем нужным нам цветом (в случае, если иконка по цвету будет совпадать с фотографией, берем цвет с участка, среднего по освещенности – не блик и не тень).
5. Дальнейшие наши действия призваны придать свинке объемность. В Фотошопе для этого существует множество методов. Возможно, те, которыми пользуюсь я не совсем идеальны, однако я к ним привыкла и они дают неплохой результат. Возможно, они станут полезны дизайнерам, которые не пользуются планшетом. Итак используя Pоlygonal Lasso Tool со значением Feather (размытие) приблизительно равным 4рх для свинки размерами 70х50рх (для бОльших размеров иконки естественно нужно выбрать бОльшее размытие) выделяем нижнюю часть свинки, сверяясь с исходной фотографией, там, где мы будем ее затенять. Затенять можно с помощью настройки уровней (Image – Adjustments – Levels или ⌘+l) так, как показано на картинке. Подвигайте черный ползунок на линеечке Input Levels уровней и добейтесь приблизительно такого затенения, как на фотографии. С помощью этого-же метода можно создавать и освещенные области объекта (двигая белый ползунок).
6. Похожим образом затеняем и ножки поросенка (но здесь, чтоб избежать перенасыщенного розового цвета лучше двигать белый ползунок Output Levels – он затеняет, но не добавляет контраст)
7. Живот поросенка на фотографии сильно затенен. Воспользуемся другим способом его закраски. Он полезен, когда сложно на глаз определить какой значение Feather при выделении лучше выбрать, ну и также он позволяет в дальнейшем внести небольшие правки (ведь мы будем работать с новым слоем).
8. Теперь выделим (без размытия – Feather: 0px), создадим новый слой и закрасим живот свинки. Не страшно что закрашенные области выступают за границы иконки. Со временем мы все исправим.
9. Filter – Blur – Gaussian Blur – размоем тень на животе. Но как быть с выступающими за контур кусочками закраски?
10. Помните, у нас еще сохранился путь (Path), который мы выделяли и закрашивали? Вернемся к п. 4 и опять создадим выделение по пути (Load Path as Selection). Теперь найдем в верхнем меню пункт Select - Inverse. Сохраним наше выделение и назовем его как-нибудь (Select – Save Selection). По нему и обрежем выступающие области (Backspace или Delete)
11. Аналогичным образом создадим полупрозрачный рефлекс на боку свинки. (Обязателен, если свинка будет размещена на светлом фоне и не нужен, если на темном). После размытия и обрезки добавим слою рефлекса прозрачности (Opacity на вкладке Layers).
12. Сверяясь с фотографией добавляем и добавляем затенения (пользуемся вышеперечисленными методами). Это можно делать очень долго, доводя иконку до совершенства, но не переусердствуйте! Мелкие складочки на ногах и завитушку на хвосте удобно рисовать карандашом (Pencil Tool) а затем растушевывать (Gaussian Blur) и обрезать выделением. Совсем мелкие детали (глаза, прорезь для монеты) не нужно растушевывать. При маленьком размере иконки они не будут казаться нам угловатыми.
13. Предпоследний штрих – добавим блик на спинку свиньи – чтоб она блестела как конфета. Просто выделяем овал, создаем новый слой и заливаем градиентом от белого к прозрачному. Делаем слой полупрозрачным – чтоб сквозь блик просвечивала розовая спина.
14. Способом, описанным в пп 8,9 нарисуем и растушуем тень под свинкой.
15. В итоге получим что-то похожее на то, что получилось у меня (Или может лучше?)

Практикум: создание бесшовной текстуры в Adobe Photoshop.

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

Бесшовная текстура – это текстура, не имеющая швов на стыках. Очень часто у нас имеется исходная картинка, которую нужно преобразовать в бесшовную (чаще всего это текстура дерева, кожи, металла, либо другого материала). В этом примере я опишу создание бесшовной текстуры кожи, все остальное можно сделать тем-же способом.

1. В случае, если есть возможность выбрать текстуру либо ее сфотографировать для создания бесшовной текстуры лучше всего использовать равномерно освещенное изображение исходной текстуры, иначе в дальнейшем потребуется немало усилий, чтоб убрать блики и сделать ее равномерной на стыках.
Например:

Это изображение нам не подходит, так как верх картинки имеет блик, при том что низ находится в тени.






А вот это в самый раз! Его и возьмем для примера.





2. Выбрав нужное изображение, приступаем к работе. Прежде чем начать, замечу, что чем больше по размеру вы возьмете изображение и чем мельче при этом будут на нем детали, тем более неоднородной получится наша текстура, и тем сложнее будет догадаться о периодичности повторов ее элементов. Итак, в фотошопе выбираем меню Filter затем подменю Other и, наконец, Offset. В этом меню можно настроить сдвиг каритнки по горизонтали (линейка Horizontal) и вертикали (линейка Vertical). Не забудьте отметить чекбокс Preview что позволяет нам сразу просмотреть результат наших действий, а также Wrap Around для Undefined Areas (повтор текстуры при сдвиге). Двигая ползунок линейки добейтесь того чтоб горизонтальный и вертикальный стыки находились приблизительно по центру картинки.


3. Используя Clone Stamp Tool с кисточкой мягкостью приблизительно 50% либо Patch tool (хотя это как правило дает худший результат), добейтесь однородности текстуры на стыках – т.е. сделайте так, чтоб стыки не были заметны. Прищурьтесь и оцените, действительно ли однородна текстура, нет ли на ней явно заметных пятен или следов ретуши. Еще раз используйте фильтр Offset и подвигайте текстуру, чтобы убедиться что все стыки замазаны. Наша текстура готова.



4. Осталось лишь сохранить текстуру чтобы использовать ее для заливки. Это делается с помощью меню Edit и подменю Define Pattern. В дальнейшем применить заливку этой текстурой можно с помощью Paint Bucket с опцией Pattern, а для использования на веб-страничке, просто сохраните получившееся изображение в нужном формате.

Порывшись в закладках (часть 2)

Итак, продолжим. По каким-то мне неизвестным причинам в Фотошопе отсутствует возможность сохранять картинки в формате ico. Для чего эта возможность нам нужна, я думаю, не секрет – для создания favicon-ов. Но неприятность эту мы естественно переживем, так как в интернете существует множество сайтов, которые позволяют этот самый фавикон сгенерировать, и даже нарисовать.

Я думаю, что рисовать лучше все-таки в привычном графическом редакторе, а вот переводить в формат ico можно например здесь http://www.favicon.cc или здесь http://favicon-generator.org.
Почему именно эти два сайта? Просто они не перегружены всякой ерундой типа объяснения что такое фавикон и галереей уже созданных иконок на одной странице. А удобстово и неперегруженность интерфейса для меня вещь немаловажная.

Итак, ваш сайт уже создан. Благополучно сверстан и готов показаться во всей красе заказчику. Но вот незадача: у заказчика ужасно устаревший MSIE 5.5. А может, он поклонник яблок и пользуется только Safari? Хорошо когда в наличии имеется хотя-бы две операционные системы и пятерка различных браузеров. Но если дела совсем плохи, не стоит отчаиваться. Сервис http://browsershots.org делает скриншоты сайтов практически во всех известных браузерах на четырех платформах. Скажу честно – сервисом пользовалась только один раз, и получила не все скриншоты, которые заказывала, но сервис-то бесплатный – и на том спасибо.

http://www.blog.spoongraphics.co.uk - блог с большим количеством интересных туторов по дизайну, эффектам и обработке фотографий. А следить за трендами в веб-дизайне и черпать вдохновение лучше всего здесь: http://www.webdesignerwall.com. Но если уж есть свободная минутка, советую почитать http://www.smashingmagazine.com. Куча полезной информации и советов.