Строение
Урок №4: Как создать иконку?
Тема в разделе "Веб-Дизайн", создана пользователем artik69, 13 авг 2010.
  1. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Как создать оригинальную иконку-значок для темы вашего сайта?


    Для того чтобы сделать иконку для сайта существует несколько способов.

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

    Первый способ отметаем, так как такая иконка не претендует на оригинальность, и , наверняка, будет присутствовать на добром десятке, а то и на сотне, других сайтов. Вы же не хотите, чтобы посетителя вашего сайта думали: «Фууу… У него даже иконки на сайте стандартные, как у многих..» :ab:

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

    Поэтому нас интересует способ № 3. Мы будем создавать оригинальный (уникальный, так как такого не будет ни у кого) значок размером 42 х 42 в формате GIF с помощью графического редактора AdobePhotoshop.

    Итак, приступим:

    Будем делать иконку для темы «Форумы с оплатой за сообщение».

    Идея
    Для начала нам нужна идея. В изображении значка коротко и емко должна раскрываться суть темы, для которой он создается. Какова суть данной темы? Ответ: «Печатаем сообщения – нам платят». Какие графические ассоциации вызывает у нас данный ответ. «Печатаем» = «Клавиатура, печатная машинка…», «Платят» = «Деньги, доллары…». Клавиатура? Не особо оригинально… Да и в уменьшенном изображении потом, вряд ли, клавиатура будет угадываться именно как клавиатура. Доска и доска… А вот печатная машинка! Это оригинально. Ага! Вот и «наклюнулась» идея. И не просто идея, а креативная идея: на нашем значке будет изображена печатная машинка, из которой вместо печатного листа на выходе будет сразу вылезать денежка :ab:, а именно бакс. То есть мы изобразим идею, озвученную в теме: «Печатать сообщение = Получать деньги».

    Подбор исходных изображений
    Итак, с идеей определились. Теперь необходимо подобрать для ее реализации подходящие изображения. Здесь мы не будем изобретать велосипед. Залезем в любой поисковик и подыщем то, что нам нужно. Нет, вы конечно можете пойти по более тернистому пути: найти старую печатную машинку, сфотографировать ее; отсканировать доллар… Но стоит ли создание одного значка таких трудо-временных затрат? А если вы делаете иконки на заказ? Их себестоимость, в таком случае, будет такой, что у вас их никто не купит. Поэтому смело тырим нужные картинки из всемирной паутины. Однако, при выборе стоит учитывать некоторые нюансы: изображение искомых вещей-предметов должно быть на однотонном (в идеале на белом) фоне. При уменьшении (впоследствии) изображения до размера иконки, оно (изображение) должно сохранять свои основные черты, то есть быть узнаваемым даже в миниатюре. Для реализации нашей цели я выбрал такие изображения:





    Создание нового документа
    Работать с изображением размером 42 х 42 пикселя неудобно и нереально. Мы же не блоху подковываем :ag:. Поэтому создадим в Photoshop’е новый документ размером 420 х 420 пикселей. Для этого выполните File > New, в открывшемся окне выставьте размеры изображения Width(Ширину) и Height(Высоту) по 420 pixels; Color Mode: RGB Color; Background Contents: Transparent (Прозрачность фона добавит универсальности нашему значку).


    Работа с исходными изображениями
    Загрузим в Photoshop наши подопытные изображения печатной машинки и доллара. Сделать это можно двумя способами. Официальным, через File > Open, и способом для ленивых :ab:: просто перетащив JPG-файлы в окно программы. На данный момент у нас в окне редактора получились открытыми три документа: 1-й основной размером 420 х 420, он пока чистый (пустой), в нем мы будем проводить основную работу по сборке картинок-«трансплантантов» в единое целое. Также у нас открыты два документа с нашими картинками. Прежде чем «перетащить» изображение печатной машинки в окно основного документа, ее необходимо отделить от фона (вырезать). Для выделения воспользуйтесь инструментом Polygonal Lasso Tool , и затем стандартными функциями меню Copy (или Cut)/ Paste, при этом не забывайте переключаться из одного окна в другое, иначе вы вставите изображение в тот же документ, из которого его только что вырезали.
    Новые изображения вставятся в документ новым слоем. Это позволит в дальнейшем работать с каждым из них не затрагивая другой. Для того чтобы выбрать нужный слой просто кликните по нему в палитре слоев.


    Вырезанное и вставленное изображение (в нашем случае «машинка») может оказаться больше окна документа (не влезать в него). Для подгонки размеров слоя воспользуйтесь командой меню Edit > Transform > Scale. При необходимости растяните окно документа, чтобы увидеть габаритный контейнер, потяните за его край (угол), чтобы уменьшить изображение, при этом удерживайте Shift для сохранения пропорций изображения.


    Для выполнения этих манипуляций у вас должен быть активен инструмент Move . Это основной инструмент и я рекомендую всегда возвращаться к нему после использования какого-то другого инструмента. Этот инструмент в процессе трансформирования (масштабирования, вращения, и т.п.) слоя, позволяет также передвигать его вместе с габаритным контейнером, что очень удобно при подгонке размеров и позиционировании в основном документе вклеенного слоя.
    Изображение доллара нам вырезать не надо. Оно прямоугольное. Поэтому просто перетащим его инструментом Move в окно основного документа. «Доллар» также вставится в наш проект новым слоем. Повторим с ним те же действия по трансформированию, что и со слоем «машинки», выполненными ранее. А именно Edit > Transform > Scale. Используя инструменты из того же меню (Scale, Roatate, Skew), трансформируйте изображение-слой «Доллар» таким образом, чтобы своей формой он (Доллар) повторил форму вставленного в машинку листа. Для того чтобы это легче было сделать временно измените непрозрачность слоя с долларом в палитре слоев:



    Теперь осталось удалить ту часть изображения доллара, которая по идее не должна быть видна. Снова воспользуйтесь инструментом Polygonal Lasso Tool, чтобы выделить контур части доллара, которую нужно удалить (прозрачность слоя с долларом, установленная нами ранее позволит без труда увидеть и выделить эту область). На изображении ниже красным показан примерный путь, который должен пройти ваш инструмент выделения:


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


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

    Делаем иконку
    Нам осталось сделать из полученного изображения значок-иконку 42 х 42 в формате GIF.
    Для начала «склеим» слои в нашем документе: Layer > Merge > Visible, затем уменьшим размер документа: Image > Image Size, в открывшемся окне измените размеры ширины и высоты в пикселях с 420 на 42 и нажмите «ОК». При уменьшении изображение, как правило, сильно теряет в резкости, поэтому выполним для нашей иконки команду меню Filter > Sharpen > Sharpen. Резкость значительно улучшится. Возможно придется повторить этот фильтр дважды.

    Сохраняем готовый значок
    Важно! Не сохраняйте на данном этапе документ с помощью Save! Этим самым вы можете нечаянно заместить уже сохраненный ранее послойный документ PSD и не сможете в дальнейшем вернуться к нему для правки. Вместо этого выберите в меню File команду Save For Web. В открывшемся окне выберите формат файла сохранения GIF и количество цветов 64 (этого вполне достаточно), и нажмите кнопку «Save».


    Выберите путь и имя для сохранения.

    Иконка готова!



    А так она будет выглядеть на месте:


    Если у вас будут какие-то вопросы, с удовольствием отвечу. Удачи!
     
    Последнее редактирование модератором: 14 авг 2010
  2. DarkAngel

    DarkAngel Новичок

    Сообщения:
    2.908
    Симпатии:
    45
    Баллы:
    0
    Переместил в соответствующий подраздел!
     
  3. smy

    smy Новичок

    Сообщения:
    684
    Симпатии:
    7
    Баллы:
    0
    Хороший урок, особенно понравилась манера изложения :ab:
     
  4. dik

    dik Новичок

    Сообщения:
    93
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №4: Как создать иконку?

    понравился урок. Все понятно написано. Спасибо
     
  5. SozdaySayt

    SozdaySayt Новичок

    Сообщения:
    11
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №4: Как создать иконку?

    Спасибо большое. Долго искал хорошие рекомендации по созданию и сохранению иконки
     
  6. tyrba

    tyrba Новичок

    Сообщения:
    38
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №4: Как создать иконку?

    довольно интересный урок, хотя я занимаюсь фотошопом недавно, и мне очень понравилось!
     
  7. Komissarov

    Komissarov Новичок

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №4: Как создать иконку?

    Как много букф а результат очень понравился ..)Так много деталей а машинка довольно таки четко смотрится в уменьшенном виде.
     
Показать ещё