Как сделать иконку в фотошопе

Как сделать иконку в фотошопе

С помощью фотошопа можно не только редактировать собственные фотографии, но и создавать иконки для компьютера. Ими можно заменить стандартные виды папок. Как это сделать? Давайте рассмотрим в данной статье. Прежде всего, следует сделать доступным для себя формат ico. Для этого необходимо всего лишь установить в фотошоп соответствующий плагин. Его можно найти на портале itbc или на любом другом специализированном сайте. Определите, для какой системы Windows (32-х или 64-х разрядной) его нужно найти.

В скаченном архиве вы найдете файл, расширение которого значится как 8bi. Его нужно переместить в папку Фотошопа с плагинами. Когда это сделаете, перезапустите Photoshop. Теперь вы легко сможете работать с форматом ico.

После этого, наконец, можно переходить к работе над созданием иконки. Не составит труда первый шаг тем, кто неплохо рисует в программе. Откройте пустой документ и собственноручно создайте будущую иконку. Сделать это необходимо на прозрачном фоне. Разрешение установите примерно 512х512 пикселей. Не более! Саму иконку впоследствии сохраним в еще меньшем размере. Как вариант, если вы плохо рисуете, можно просто найти в интернете любую картинку на прозрачном фоне в формате png.

Ее также нужно открыть в программе, после чего следует изменить размер. Подойдет — 256×256 пикселей. Можете также добавить что-то своего, дорисовав некоторые детали. Затем — сохраните в доступном теперь формате ico.

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

Отблагодарите нажатием на кнопку!

Как сделать иконку в фотошопе – процесс отрисовки (видеоурок)

Друзья, я уверен, что у многих возникнет вопрос. Зачем делать иконки в фотошопе? Ведь удобнее и лучше создавать их в любом редакторе для векторной графики, будь то иллюстратор или какой-то другой. Да никто и не собирался доказывать обратное.

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

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

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

В этом процессе я покажу, как нарисовать 12 иконок и несколько дополнительных вариаций.

Мы отрисуем такие иконки как:

• Часы;
• Маркер указатель места на карте;
• Бирку;
• Иконку закрыть;
• Стрелки;
• Иконку для меню бургер;
• Лупу;
• Папку для файлов;
• Облако;
• Диаграмма;
• Иконка сообщения;
• Монитор.

Возможно, вы не будите создавать иконки в фотошопе, но благодаря этому видео найдете для себя какие-то новые приему или способы для работы с фигурами или пером в фотошопе.

На заметку: иконки создавались для примера, у меня не стояла цель сделать их идеальными, поэтому при их создание были кое-где допущены мелкие неточности с толщиной линий, надеюсь, к этому вы отнесетесь с пониманием.

Друзья если у вас есть вопросы или дополнения задавайте их в комментариях, попробую на них ответить.

Создаем иконку календаря в фотошопе

Доброго всем дня и хорошего настроения! Сегодня на фотодизарт урок по созданию иконки календаря в фотошопе. Иконку создадим в размер 128х128 пикселей. По принципу этой иконки также можно сделать и таймер, к примеру на заглушку для будущего сайта. Как применить созданную иконку календаря я думаю, каждый решит для себя сам, а сейчас давайте перейдем к самой интересной части, уроку.

Фотошоп, я думаю все уже открыли, создадим чистый холст, я создал 500х500 пикс. 72dpi. Зальем фон нейтральным серым цветом (это чтобы было легче работать). Дальше перейдем к созданию.

Первым делом создадим основу нашего календаря, для этого выберем инструмент прямоугольник со скругленными углами и немного настроим его параметры. Радиус закругления углов установим на 20 пикс. зададим фиксированный размер 128х128 пикс., а также можно установить галочку на привязку к пикселям, благодаря этому мы получим более четкие грани без полупрозрачных пикселей. Цвет установим на #555555, после чего создадим прямоугольник.

Далее придадим немного объема нашей основе для этого вызовем стили слоя кликнув два раза на созданном нами слое с прямоугольной формой в панели слоев, либо пройдем в меню слои > стиль слоя > параметры наложения.

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

Далее будем создавать листы иконки календаря для этого также используем инструмент прямоугольник со скругленными углами поменяем значение радиуса угла на 10 пикс. также зададим фиксированный размер в 114х100 пикс. привязку к пикселям оставляем. Цвет #939393. Создадим этот прямоугольник поверх предыдущей основы с отступами слева и справа по 7пикс., а сверху и снизу по 14пикс. (с измерениями вам поможет линейка и направляющие).

Следующим этапом мы создадим тень, как во втором шаге только цвет тени будет #393939.

Продублируем последний созданный слой листа и разделим его пополам по горизонтали. Первым делом растрируем слой, для этого кликаем правой кнопкой мыши на слое формы и во всплывающем меню выбираем растрировать слой. После чего разделим высоту пополам 100 пикс/2 = 50 пикс., сделаем разметку при помощи направляющей и линейки, после чего выберем инструмент прямоугольная область, выделим им половину фигуры, кликнем правой кнопкой по области и вырежем на новый слой. Для наглядности я покрасил верхний слой белым.

Далее нам необходимо нижнюю половинку продублировать еще раз. А также каждую из нижних половинок сдвинуть на пару пикселей вверх относительно нижнего слоя. Положение верхнего слоя не изменяем. Потом необходимо поменять цвет и тень на этих трех слоях. Делать мы это будем при помощи стилей слоя пройдем в меню слои > стиль слоя > параметры наложения.

Начнем с самой нижней половинки для нее наложение цвета установим #cfcfcf, а тень #555555.

Для дубликата нижнего слоя установим наложение цвета #ffffff, а тень #555555.

Для верхнего слоя установим наложение цвета #f4f4f4, а тень уберем.

Далее создаем новый слой нажав на пиктограмму создать новый слой, берем инструмент область (горизонтальная строка) и на 1пиксель выше нижнего края верхней половинки кистью рисуем линию цветом #ffffff.

На следующем этапе мы создадим цифры, выберем инструмент горизонтальный текст, установим цвет на #585858 и напишем цифры, статья в помощь о том, как работать с текстом в фотошопе.

После чего на цифры добавим две линии, которые визуально разделят цифры на две половинки. Линии также рисуем инструментом область (горизонтальная строка) цветами #464646 и #7f7f7f.

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

Создадим новый слой, и поверх нашего крепления инструментом область (вертикальная строка) слева отступив 1 пиксель от края крепления, нарисуем линию цветом # 464646.

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

Ну и в заключение создадим тень под нашей основной формой, для этого создадим прямоугольную фигуру со скругленными углами, используя инструмент прямоугольник со скругленными углами со следующими настройками радиус 20 пикс., фиксированный размер 128х90 пикс. черным цветом. Поместим фигуру под слой основу, расположив от нижней границы вверх. Вызовем стиль слоя и добавим тень с непрозрачностью 45%, смещение 2пикс, размер 5пикс, углом 90° .

Снизу приложил пару примеров, которые можно создать по этому уроку.

На этом я заканчиваю урок, в котором мы научились создавать иконку календаря, урок получился достаточно длинный, но я думаю несложный.

Как создать значок сайта .ico при помощи Photoshop

Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop.

Значок сайта – это небольшой, но значительный элемент продвижения вашего бренда на сайте. Вот пример, того, как он может выглядеть на вашем сайте:

Photoshop – это прекрасная программа для работы с изображениями, которая поможет Вам создать пользовательский значок сайта.

Значок сайта – это миниатюрный логотип (16×16), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.

1. Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
2. Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
3. Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
4. Примените к вашему документу инструмент ‘Градиент’ ( Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
5. Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
6. Используя инструмент ‘Трансформирование’ (Ctrl + T), отрегулируйте расположение текста:
7. Соедините слои (Merge layers), как это показано на скриншоте ниже:
8. Перейдите на вкладку ‘Файл’ > ‘Сохранить как…’ (File > Save As), откройте выпадающее меню и выберите формат .PNG (*.PNG). Нажмите на кнопку ‘Сохранить’ (Save):
9. Вы успешно создали значок сайта. Он был сохранён как файл ‘ favicon .png’ на вашем компьютере.
10. Однако, значок сайта нужно сохранить в формате .ICO. Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта .PNG в формат .ICO. Это последний шаг данного туториала.
11. Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом.
12. Перетяните ваш файл ‘ favicon .png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:
13. Нажмите на кнопку ‘Скачать’ (Download), для того чтобы сохранить файл ‘ favicon .ico’ на вашем компьютере.

Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Эта запись была размещена в Работа с Photoshop и помечена как .ico, favicon, file, Photoshop. Добавьте в закладки постоянную ссылку.