Иконка photoshop: Иконки фотошоп — 517 бесплатных иконок

Создаем стильные космические иконки в Adobe Photoshop

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

Что мы создаем сегодня.

1. Рисуем иконку с космической ракетой

Перед вами образец палитры, которую мы будем использовать, создавая наши иконки. Мы выбирали приглушенные цвета, чтобы добиться ретро-эффекта, который очень хорошо сочетается с изображениями в плоском стиле. Вы можете сохранить палитру себе на компьютер, открыть в Adobe Photoshop и выбирать необходимый цвет для базовых фигур непосредственно из нее, используя инструмент Пипетка (EyedropperTool(I)), или на панели Заливка (Fill).

Шаг 1

Сперва давайте создадим основу.

Наша иконка будет круглой, поэтому на панели инструментов выбираем инструмент Эллипс  (Ellipse Tool(U)). Кликнем на наш холст для вызова расширенных настроек меню и установим Ширину (Width) и Высоту (Height) основы нашей иконки: 512х512px. Получился идеальный круг. Заполним его темно-синим цветом, он напомнит нам далекий космос. С по-прежнему выбранным инструментом Эллипс (Ellipse Tool (U)), найдем сверху контрольную панель и нажмем на кнопку Заливка (Fill). Здесь мы можем выбрать либо один из предложенных образцов, либо установить собственный цвет, нажав на цветной прямоугольник в расширенном меню

Заливки (Fill).

Шаг 2

Сейчас нам нужно создать основу ракеты. Начнем с размещения вытянутого белого эллипса в центре иконки. Возьмем инструмент Выделение узла (Direct Selection Tool (A)) и кликнем по краю эллипса, чтобы сделать видимыми его контур и крайние точки. Переключимся на инструмент Угол (Convert Point Tool — он находится там же, где и инструмент Перо (Pen Tool (Р)) и кликнем по верхней крайней точке для получения острого угла.

Шаг 3

Оставаясь на слое с основой ракеты, зайдем в Операции с контуром (Path Operations) и выберем Область пересечения фигур (Intersect Shape Areas). Затем возьмем инструмент Прямоугольник (Rectangle Tool (U)) и нарисуем прямоугольник так, чтобы он заключил внутри большую часть ракеты, оставив снаружи небольшой кусочек в самом низу. В результате данной операции все, что окажется за пределами границы прямоугольника станет невидимым. Так мы отрезали нижнюю часть ракеты.

Шаг 4

Затеним половину нашей ракеты. Для этого включим Быстрые направляющие Smart Guides (Просмотр-Показать-Быстрые направляющие; View-Show-Smart Guides)

; они помогут нам правильно разместить тени. Продолжим, нарисовав прямоугольник светло-серого цвета и поместив его поверх ракеты, закрывая правую сторону.

Шаг 5

Сейчас нам нужно скрыть те части прямоугольника, которые выходят за границы основы ракеты. Это может показаться сложноватым на первый взгляд, но нам всего-то следует лишь выполнять команды в правильной последовательности.

Удерживая клавишу Ctrl, кликнем по слою ракеты на нашей панели Слоев (Layers). Как только мы сделаем это, по краю нашей ракеты мы увидим бегущий пунктир. И сейчас все, что от нас потребуется – выбрать слой с серым прямоугольником и кликнуть на кнопку

Добавить слой-маску (Add a mask) в нижней части панели Слои (Layers). Так мы создадим маску, привязанную к слою, которая скроет все ненужные части за пределами выделения.

Шаг 6

Используем инструмент Эллипс (EllipseTool (U)) и нарисуем правильный круг – будущий иллюминатор нашей ракеты. Создадим также его внутреннюю часть – собственно стекло. Жмем Ctrl-J, чтобы продублировать слой с иллюминатором. Затем жмем Ctrl-T для преобразования формы. На контрольной панели сверху уменьшаем

Ширину (Width) и Высоту (Height) круга до 70%.

Заполним внутреннюю часть иллюминатора неярким серо-синим цветом, сохраняя ретро-стиль нашей цветовой палитры, а также добавим инжектор в нижней части нашей ракеты используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)).

Шаг 7

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

Угол (Convert Point Tool), чтобы заострить форму.

Шаг 8

Нажмем Ctrl-T, слегка повернем руль и поместим его позади ракеты. Затем нажмем Ctrl-J, скопируем руль и выполним Редактирование-Трансформирование контура-Отразить по горизонтали (Edit-Transform Path-Flip Horizontal). Удерживая клавишу Shift переместим отраженную фигуру по горизонтальной оси на другую сторону ракеты.

Шаг 9

Добавим третий руль в передней части ракеты и сдавим его при помощи Свободного трансформирования контура (FreeTransform (Ctrl-T))

.

Шаг 10

Сейчас добавим на нашу иконку эффект длинной тени. Начнем с создания черного прямоугольника и снизим его Непрозрачность (Opacity) до 50% на панели Слои (Layers) для большего удобства. Повернем прямоугольник на 45о в режиме Свободного трансформирования контура (FreeTransform (Ctrl-T)).

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

Шаг 11

Далее поместим прямоугольник за ракету.

Сейчас нам нужно удалить те части фигуры, которые выходят за левый край нашей ракеты. Выберем инструмент Перо+ (Add Anchor Point Tool, там же, где и инструмент Перо (PenTool (P)), и добавим пару опорных точек по краям прямоугольника. Одну поместим там, где прямоугольник касается нижней точки левого руля ракеты; вторую – на пересечении верхней стороны фигуры и правого края ракеты.

Теперь мы можем удалить оставшиеся опорные точки при помощи Прямого выделения (Direct Selection Tool (A)), спрятав их за ракету.

Шаг 12

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

Alt, перемещаем курсор на слой основы иконки. Как только мы видим, что курсор превратился в маленький квадратик со стрелкой, кликаем на слой, создавая таким образом Обтравочную маску (Clipping mask).

Выберем нашу тень, переключимся на инструмент Прямоугольник (Rectangle Tool (U)) и изменим цвет заливки тени на линейный градиент от черного к белому. В верхней части панели Слои (Layers) изменим режим наложения на Умножение (Multiply), чтобы тень хорошо легла на основу иконки.

Шаг 13

Добавим несколько мелких деталей нашей ракете, сделаем ее более затейливой. При помощи инструмента Эллипс (Ellipse Tool (U)) поместим красный овал на верхушку ракеты. Затем выберем одновременно и созданный овал, и основу ракеты и правой клавишей мыши вызовем контекстное меню. Используем команду Объединить фигуры в наложении (Unite Shapes at Overlap), чтобы скрыть ненужные части и сформировать верхушку ракеты. И, наконец, добавим простой блик на стекле иллюминатора, используя светло-голубой цвет.

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

2. Рисуем иконку с полосатой планетой

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

Шаг 1

Начнем с создания основы планеты – правильного круга бледно-желтого цвета. Затем поверх планеты нарисуем несколько узким полос разной ширины и оттенка, используя инструмент Прямоугольник (Rectangle Tool (U)). Мы можем сгруппировать полосы (выбрать их и выполнить Ctrl-G

) и слегка повернуть их, чтобы добавить нашей планете немного динамики.

Шаг 2

Сейчас нам нужно избавиться от ненужных деталей. Выбираем основу планеты; с активным инструментом Эллипс (Ellipse Tool (U)) правым кликом вызываем контекстное меню. Выбираем Образовать выделенную область… (Make Selection…) и в появившемся окне жмем на Ок, оставив настройки по умолчанию.

Как только мы увидим бегущий пунктир по краю планеты, выберем группу полос и кликнем на кнопку Добавить слой-маску (Add a Mask) в нижней части панели Слои (Layers), спрятав тем самым за ней все ненужные части.

Шаг 3

Добавим нашей планете объема, поместив простую тень с правой стороны. Скопируем базовую форму планеты и поместим этот слой поверх всех остальных слоев, передвигая фигуру вверх и влево. Выберем обе фигуры и выполним команду Вычесть переднюю фигуру (Subtract Front Shape). Изменим Режим Наложения (Blending Mode) для созданной фигуры на Экран (Screen) и установим Непрозрачность (Opacity) – 40%, сделав планету светлее, а ее правый край – темнее.

Шаг 4

Сейчас добавим кольцо астероидов вокруг планеты. Нарисуем сплющенный эллипс и выполним команду Вычесть переднюю фигуру (Subtract Front Shape). Поверх первого поместим еще один эллипс меньшего размера, сформировав таким образом отверстие.

Нам нужно удалить часть кольца, перекрывающего планету, заведя ее назад. Нарисуем овал таким образом, чтобы он покрывал верхушку планеты и ту часть кольца, которую мы хотим спрятать (красная плавная фигура на скриншоте). Выбираем созданный овал и основу планеты и выполняем Объединить фигуры в наложении (Unite Shapes at Overlap), создав таким образом «колпак» для нашей планеты.

Правой клавишей мыши кликаем на полученную красную фигуру и жмем Образовать выделенную область… (Make Selection…). Затем выполняем Выделение – Инверсия (Select – Inverse).

Удерживая выделение, жмем на слой кольца и добавляем слой-маску (Add a Mask), чтобы спрятать ненужные части.

Шаг 6

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

И наконец, разбросаем звезды вокруг планеты.

3. Рисуем иконку с радиотелескопом

Шаг 1

Для начала нарисуем черный круг. Цвет большой роли не играет, потому что сам круг как таковой нам не понадобится. Наложим поверх него красный прямоугольник так, чтобы он закрывал половину круга. Для круга выполним Образовать выделенную область… (Make Selection…), а прямоугольник поместим под маску, спрятав все ненужные части за пределами круга. Сейчас мы можем удалить черную его часть, оставив только красную.

Детализируем основу нашего телескопа и заполним нижнюю часть полученной фигуры более темным красным цветом.

Шаг 2

Пририсуем нашему радиотелескопу антенну. Но сначала поместим сильно вытянутый овал с правой стороны основы телескопа, создав таким образом его внутреннюю часть, добавив ему глубины. Используя инструмент Многоугольник (Polygon Tool (U)), сформируем треугольник и заполним его светло-серым цветом. Вытянем его, сделав антенну тоньше, и на самом конце поместим маленький круг.

Шаг 3

Слегка повернем телескоп, чтобы он, ловя космические сигналы, смотрел вверх. Добавим еще один серый треугольник как опору для телескопа. Вырежем внутри него маленький треугольничек, используя функцию Вычесть переднюю фигуру (Subtract Front Shape).

Шаг 4

В завершение добавим тень и несколько звезд вокруг.

4. Рисуем иконку со смешным НЛО

Шаг 1

Начнем создание верхней части НЛО с построения правильного круга. Теперь нам нужно удалить нижнюю его часть, и для этого мы рисуем сверху эллипс и выбираем Объединить фигуры в наложении (Unite Shapes at Overlap).

Шаг 2

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

Шаг 3

Детализируем наш НЛО, добавив под ним световой круг и несколько лампочек по красному краю.

И в завершение нарисуем тень и несколько звезд.

5. Рисуем иконку с трехногим телескопом

Шаг 1

Основу такого телескопа составляет прессованная труба, вот ей и займемся. Построим узкий прямоугольник – базу нашего телескопа. Продублируем фигуру (Ctrl-J) и сожмем верхнюю фигуру при помощи Свободного трансформирования контура (Free Transform (Ctrl-T)). Заполним нижнюю часть телескопа более темным красным, создавая мягкую тень.

Шаг 2

Добавим переднюю часть трубы, сформируем линзу из вытянутого серовато-голубого эллипса. Заострим верхнюю и нижнюю точки линзы, кликнув по ним инструментом Угол (Convert Point Tool).

Поместим линзу за трубу, нажав Ctrl-Shift-[ и добавим простое отражение светло-голубого цвета.

Шаг 3

Построим окуляр нашего прибора из двух узких серых прямоугольников. При помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) создадим тонкие ножки для поддержания прибора.

Повернем ножки и добавим маленькие связующие перекладины темно-серого цвета.

Шаг 4

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

6. Рисуем иконку с месяцем в облаках

Шаг 1

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

Шаг 2

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

Шаг 3

Отрежем нижнюю часть облака. Добавим снизу узкий прямоугольник и выполним Вычесть переднюю фигуру (Subtract Front Shape), чтобы скрыть закрытую часть.

Шаг 4

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

7. Создаем глубокий космический фон

И сейчас, когда мы закончили наши иконки, поместим их на темный серо-синий фон, добавим там-сям звезды разного размера. В завершение, по бокам холста при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) нарисуем несколько узких полос.

Хьюстон, у нас нет проблем!

Отличная работа, товарищи! Мы закончили создание серии модных космических иконок с эффектом длинной тени в плоском стиле в AdobePhotoshop. Надеемся, базовые операции с простыми фигурами помогут вам при работе над будущими проектами. Удачи!

Значок для приложения: как создать, технические характеристики, аспекты дизайна

Natalia Shpitula

Обновлено 6 февраля, 2022

Loading…

У каждого жителя США на смартфоне установлено больше сотни программ, и это число с каждым годом только растет. Чтобы вырваться вперед в конкурентной борьбе за пользователя, создайте уникальную иконку приложения, которая улучшит опыт взаимодействия с брендом. Как это сделать, расскажем в статье. 

1. Что такое значок приложения
2. Технические характеристики иконок для Android и iOS
3. Топ-пять аспектов дизайна иконок
4. Три способа создать иконку
5. Заключение

Что такое значок приложения

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

По статистике 70% мобильных приложений загружаются после поиска в App Store или Google Play (остальные — в результате рекламных кампаний, промо в соцсетях, обзоров и т.д.). Поэтому ваша задача — создать дизайн, который мгновенно привлечет внимание и вызовет желание узнать, что стоит за визуальным образом.

Технические характеристики иконок для Android и iOS

Существует два основных типа иконок — для систем Android и iOS. Хотя на первый взгляд они очень похожи, но отличаются множеством технических нюансов, которые стоит учитывать при разработке.

	Google Play Store (Android)	App Store (iOS
Размер	512 px × 512 px	iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x)
Формат	32-разрядный PNG	PNG
Цветовое пространство	sRGB	sRGB или P3
Форма	Полный квадрат. Google Play автоматически скругляет углы (радиус скругления — 20% от размера) и добавляет тени	Квадрат без закругленных углов и теней

Топ-пять аспектов дизайна иконок

21% миллениалов удаляют мобильное приложение, если им не нравится, как иконка выглядит на экране. Поэтому важно продумать не только функциональность, но и эстетическую составляющую.

1. Простота

Лаконичность — это ключ к удачному дизайну. Вот какие нюансы нужно учесть:

• Отсекайте лишнее. Чем больше деталей — тем сложнее будет распознать и запомнить изображение, а также масштабировать его. Помните, что иконка должна быть хорошо различима в разных размерах: в магазине приложений, меню телефона и на панели настроек.
• Используйте символику. Сфокусируйтесь на одном узнаваемом элементе, как сделали Pinterest (кнопка), Snapchat (привидение) или Instagram (камера). В качестве иконки может выступать главный визуальный символ бренда — логотип, если он отвечает принципам минимализма.
• Лайфхак: изучите значки ваших любимых приложений и проанализируйте, какие символы использованы в их разработке.

Source: by Ramotion

2. Цвет

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

• Используйте не больше двух-трех цветов, как большинство популярных компаний, например, Airbnb, Pandora или Dropbox. Большое количество оттенков будет сливаться в одно нечеткое пятно.
• Берите пример с топ-брендов. Исследование показало, что чаще всего они выбирают для графики синий цвет (Google Calendar, Safari, Twitter, LinkedIn). Второе и третье места делят красный и белый, причем красный чаще всего используют бренды, связанные с едой и напитками.
• Убедитесь, что выбранные цвета соответствуют вашему бизнесу, привлекают целевую аудиторию и согласуются с остальными элементами фирменного стиля.
• Проверьте, как значок смотрится на разных фонах — цветном, черном и белом.

Source: by Vadim Carazan

3. Согласованность

Визуальный символ приложения должен соответствовать его содержанию. Гармоничный образ помогает воспринимать продукт как единое целое и вызывает более сильную эмоциональную привязанность.

• Используйте один язык дизайна: цветовую палитру, стиль и приемы. В вашем приложении присутствует градиент, необычная геометрия или ретро-стиль? Примените их и в иконке.
• Если у вас несколько приложений, оформите их в едином стиле, как сделал Adobe для своих продуктов: Photoshop Sketch, Illustrator Draw, Lightroom, Skan и других.
• Привяжите символику к функциональности приложения, чтобы пользователь с первого взгляда понял, о чем ваш продукт. К примеру, винный рейтинг Vivino использует виноградную гроздь, а музыкальный сервис Spotify — символ громкости динамика.

Source: by Eddie Lobanovskiy

4. Лишние элементы

Длинные надписи и фотографии — ненужные элементы на маленьком значке. Они рассеивают внимание пользователей и затрудняют восприятие.

• Люди воспринимают изображения в 60 тысяч раз быстрее, чем слова, а при выборе приложения скорость может иметь решающее значение.
• Помните: если вам приходится использовать слова, значит, вы не исчерпали весь потенциал визуальных образов. Подбирайте метафоры к вашему бизнесу, пока не найдете подходящий символ.
• Исключения — короткие названия брендов (BBC News, Uber) или использование первой буквы («F» у Facebook и Foursquare).
• Тот же принцип работает и с фотографиями, детали на которых будут неразличимы в маленьком разрешении. Если у вас есть любимый снимок, который характеризует бизнес, используйте для брендинга его элементы, создав из них векторное изображение.

Source: by Dmitry Lepisov

5. Уникальность

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

• Изучите самые популярные приложения в вашей нише, проанализируйте, какие приемы они используют. Подумайте, за счет чего вы можете дифференцироваться: цветовой гаммы, символики или графики.
• Проанализируйте, какие элементы привлекают вашу целевую аудиторию, а какие, наоборот, отталкивают. Учитывайте результаты при разработке значка.

Source: by Ramotion

Бонусные советы:

• Проведите A/B-тестирование. Если не можете выбрать между двумя вариантами иконок, перед запуском организуйте маркетинговое исследование. A/B-тестирование — это метод, который позволяет запустить в работу оба варианта одновременно и сравнить, какой из них эффективнее.
• Учитывайте сезонность. Подумайте, как вы можете «оживлять» иконку к праздникам или громким событиям: Рождеству, «черной пятнице» или Хэллоуину. Это может быть изменение цвета или добавление небольшого характерного элемента.
• Следите за трендами. Соблюдайте грань между слепой погоней за модой и актуальностью. Не нужно обновлять иконку каждый сезон, но следить за глобальными трендами стоит. Например, если все конкуренты уже перешли на модную плоскую графику, а вы до сих пор используете 3D-эффект, значит, пора сменить значок.

Source: by Lukas Stranak
Source: by Sandor
Source: by Jakub Kuik
Source: by Sandor

Три способа создать иконку

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

1. Графические редакторы. Подойдет пользователям, у которых есть опыт работы в Photoshop или Illustrator. Плюс этого способа в том, что вы получите уникальный результат даже при нулевом бюджете. 

2. Онлайн-сервисы:

• Logaster. Онлайн-генератор создаст логотип, который вы можете кастомизировать и скачать бесплатно в небольшом размере, подходящем для иконки мобильного приложения.
• Canva. Бесплатный редактор с тысячами шаблонов графики и возможностью персональной адаптации.  
• Iconsflow. Сервис с более чем 200 тысяч значков: просто выберите подходящий, измените цвет, размер и добавьте эффекты.
• Appicon. Этот редактор адаптирует готовое изображение под размеры иконок для iOS и Android.

Мечтаете о собственном лого?

Введите название компании в поле ниже и наш генератор предложит вам лучшие дизайны!

3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.

Заключение

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

• Позаботьтесь о простоте, узнаваемости и уникальности.
• Следите за трендами, чтобы оставаться актуальным.
• Учитесь у топ-брендов. Например, из этого списка самых популярных мобильных приложений 2019 года:

1. Facebook Messenger
2. Facebook
3. WhatsApp
4. TikTok
5. Instagram
6. SHAREit
7. Likee
8. Snapchat
9. Netflix
10. Spotify

Source: by Parmar Raj

Дизайн и экспорт иконки приложения в несколько размеров в Sketch 3

Сегодня мы с вами рассмотрим Дизайн и экспорт иконки в Sketch 3 иконки приложения. Дизайн иконки приложения – задание не из легких. И Apple, и Android следуют руководству Human Interface Guideline, которое приводит рекомендации требования по созданию иконки приложения. Очень важно подготовить иконки в нескольких размерах для различных кейсов, вариации должны быть совместимы со скринами retina и non-retina. И также должны быть опциональные иконки (для настроек, панели инструментов, панели навигации, полосы табуляции и т.д.). Мы бы могли спокойно ограничиться использованием Photoshop со смарт-объектами и создать всего одну иконку приложения, которая автоматически смасштабируется до нужных размеров. App Icon Template даже создал бесплатный PSD-шаблон и Photoshop action для экспорта иконок, но в Sketch 3 весь этот функционал доступен в родной комплектации приложения. Почему? Потому что Sketch создан непосредственно для дизайнеров интерфейсов и приложений, а Photoshop – нет. Некорректно полагать, что Photoshop и Illustrator – бесполезные инструменты. У Photoshop лучшее управление слоями, а Illustrator – векторный инструмент с функцией символов. Sketch учел все эти плюсы, и соединил оба мира в едином приложении для Mac по цене всего $99 —  за слои, векторы и быстродействие.

Что мы будем создавать?

В этом уроке мы научимся конструировать иконку приложения в векторном формате, используя родные возможности Sketch 3, а также добавочный функционал из Sketch Toolbox. Мы также опробуем экспорт иконки в Sketch и все его потрясающие возможности. Вот иконка, которую я сделала раньше. Отступление: перед началом работы стоит упомянуть, что в Sketch есть шаблон иконки приложения для iOS. Мы не будем его использовать, и если вам не интересно узнать, почему, пропустите этот раздел и продолжите сам урок. Перейдите на File → New From Template → iOS App Icon. На первый взгляд вы заметите, что есть несколько артбордов, плавающих вокруг на бесконечном канвасе. Отлично – это то, что нам необходимо, верно? Посмотрите влево и вы также заметите сайдбар со слоями. Каждый артборд назван соответствующим образом (например, iTunesArtwork@2x), и внутри них находится фигура. Нажмите R и нарисуйте прямоугольник, который по размерам будет соответствовать артборду. Вы можете удерживать Shift, чтобы соблюсти пропорцию сторон 1:1, но вы заметите, что Sketch автоматически (и интуитивно) выравнивает фигуру с близлежащими слоями в любом случае, т.е. подгоняет размер рисуемого прямоугольника под размер артборда. О нет, мы потеряли наши закругленные углы! Apple требует квадратные иконки приложения, потому что iOS автоматически применяет маску с закругленными углами. Каждый угол должен быть углом “90° градусов”, в этом требовании они очень категоричны, так что там нужно использовать эту фигуру иконки (Icon Shape) как слой-маску, чтобы посмотреть, как иконка будет выглядеть в реальности. Кликните левой кнопкой мышки на Icon Shape и выберите “Use as Mask”  (использовать в качестве маски) —  и вот, наша иконка снова имеет закругленные углы. Теперь конвертируем этот прямоугольник в символ. Мы будем использовать его множество раз.

Что такое символы?

Символы – это сохраненная коллекция стилей в группе (подобно CSS-классу). Представьте себе возможность создавать кнопку, создавать новую группу и применять кнопку к этой группе, вместо необходимости создавать дизайн кнопки повторно. Это экономит время. Если вы измените стили символьной группы, каждый символ будет обновляться автоматически (пример: вы заканчиваете дизайн приложения, и вдруг решаете, что все кнопки должны быть другого цвета). В правом сайдбаре (инспектор) вы сможете увидеть, что у нашего прямоугольника есть заливка (Fill) и граница (Border), а также ширина (Width) и высота (Height). Измените цвет заливки, сделайте размеры чуть меньше и выделить группу (Group) из панели инстументов Sketch. В данный момент фокус изменится с прямоугольника на вновь созданную группу, и в инспекторе сейчас можно увидеть “No Symbol”. Кликните на этот элемент, выберите “Create New Symbol” (создать новый символ) и назовите его “Icon”. Нажмите CMD + D, чтобы продублировать символ и попытаться изменить его размер. Оба символа изменились в размере одновременно, и сейчас должно стать понятно, почему этот способ не подходит для создания иконок с различными размерами.

Так какой же способ лучший?

Простое дублирование. Когда мы закончим с дизайном иконки приложения, мы можем продублировать всю группу несколько раз, затем изменить размер копий и затем переместить копии на другие артборды. Отлично – у нас будут иконки во всех нужных размерах; правда, если нужно будет что-то изменить, придется проделывать это с каждой группой. Несмотря на то, что Sketch – шикарный инструмент для наших целей, важно понимать его ограничения, чтобы не тратить время впустую. В данном случае символы нам не подходят. Примечание: это единственное мое сомнение по поводу Sketch, так что пусть оно вас не пугает. А теперь выбросите все И давайте начнем сначала. Sketch Toolbox и плагин Aeiconizer будут нашими помощниками в этот раз, и хотя это менее родной способ справиться с нашей задачей, он работает просто отлично. Мы будем создавать дизайн одну иконку приложение и воспользуемся плагином Aeiconizer из Sketch Toolbox для воспроизведения дизайна в нужных нам размерах, готовых для экспорта. Мы создадим фиктивное «ночное» приложение, для которого необходимо нарисовать простую иконку с изображением месяца.

• Нажмите CMD + N, чтобы открыть новый канвас
• Нажмите А для создания артборда и выберите 180 — iPhone 6 Plus в разделе iOS Icons
• Нажмите CMD + “+” для увеличения до 200%
• Нажмите R и нарисуйте прямоугольник размером с артборд

В инспекторе выберите следующие стили:

• Fill: #23282c
• Border: untick and trash

Создаем фигуру месяца

Теперь мы нарисуем основу для будущего месяца:

• Нажмите О и нарисуйте круг размером 109 x 109
• Уберите границы, заливку пока можно оставить
• Перетяните круг точно в центр канваса, Sketch автоматически «подтянет» круг в нужную точку при передвижении.
• Продублируйте круг и выровняйте копию по правому краю артборда.

На данный момент у нас есть два накладывающихся круга на холсте. Первый круг будет луной, а с помощью его копии мы «вырежем» форму месяца из оригинального круга.

• Удерживайте Shift и выделите оба круга на холсте
• В панели инструментов Sketch нажмите Subtract

В результате этой трансформации из двух кругов должна получиться единая форма месяца. На данный момент оба круга можно выделять по отдельности в сайдбаре со списком слоев – это очень полезная возможность, так как для отшлифовки фигуры месяца нам придется немного подвигать верхний овал. Когда форма вам покажется идеальной, нажмите Flatten в панели инструментов. Flatten – это деструктивное действие, в результате которого овалы уже будут объединены в единое целое.

Стилизация иконки

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

• Fill (заливка): #FFF, 85 (Hex, A)
• Border (граница): #FFF, 5 (Hex, A) и Outside, 3 (Position, Thickness)
• Shadows (тени): #000, 50 (Hex, A) и 0, 2, 10, 0 (X, Y, Blur, Spread)
• Inner Shadow 1 (внутренняя тень): #FFF, 15 (Hex, A) и 0, 4, 0, 0 (X, Y, Blur, Spread)
• Inner Shadow 2: #000, 10 (Hex, A) и 10, 0, 0, 0 (X, Y, Blur, Spread)

Теперь иконка выглядит более стильно, но все же довольно просто. Конечно, идея в том, чтобы иконка отличала «ночной» режим приложения, работая, в основном, в фоновом режиме, когда свет погашен, так что сама иконка не должна быть слишком «ослепительной».

Sketch Toolbox

Sketch Toolbox – бесплатное и неофициальное приложение для Mac, с помощью которого можно управлять расширениями Sketch. Как только вы его установите, найдите плагин Aeiconizer Plugin и установите его – этот метод куда проще, чем использования опции “Reveal Plugins Folder…” из панели инструментов Mac и копирования скачанных расширений в найденную папку.

Воспользуемся Aeiconizer Plugin

В нашем проекте есть единственный артборд с законченным дизайном иконки приложения, и мы можем сделать реплики этого артборда во всех iOS-совместимых размерах. Факт: оригинальный артборд является корректным размером для иконки Apple touch. Выделите артборд из списка слоев и перейдите на Plugins → Aeiconizer. Вы сразу заметите, что иконка продублировалась несколько раз – такой метод более эффективен по ряду причин:

1. Нам не надо настраивать никакие символы
2. Мы работали только с одним артбордом
3. Мы можем изменить оригинальный дизайн и еще раз запустить Aeiconizer

Начинаем экспорт иконки приложения в Sketch

Приложения, созданные в Xcode, имеют специальную папку для хранения изображений (включая иконки приложений) под названием Images. xcassets. В эту папку необходимо включить версии 2x и 3x всех изображений для экранов retina. Экспорт в Sketch предложит вам сохранить изображения как 2x и 3x, если вы об этом попросите, но так как наш артборд уже содержит все нужные размеры, мы можем просто экспортировать его в размере 1x (non-retina). Начните с выделения каждого артборда со списка слоев, но помните, что нужно пропустить исходный артборд. Если вы запускали Aeiconizer только что, требуемые артборды будут уже выделены. Нажмите CMD + Shift + E для запуска экспорта. Появится диалог для подтверждения экспорта – вы можете добавить или убрать любые артборды перед финальным экспортом. Нужно ли вам экспортировать слой или группу с какими-то особыми настройками (это может, не применимо к нашей иконке, но для будущих дизайнов – вполне), выделите нужный слой и кликните на опции “Make Exportable” в правом нижнее углу окна приложения. У вас будет возможность выбрать другой формат файла, суффикс или разрешение перед экспортом этого выбранного слоя. Независимо от того, как вы инициируете операцию экспорта, приложение Sketch всегда запоминает каждый экспортированный слой вместе с настройками экспорта, и сохраняет информацию в так называемый «слайс». Пользователи Adobe Fireworks должны быть в курсе этой терминологии. Кроме того, слайсы полезны и для других дизайнеров и разработчиков, которые используют файл .sketch впервые – им могут понадобиться ваши слайсы, очень удобно иметь нужные настройки под рукой.

Заключение

В этом уроке работы со Sketch 3 мы научились использовать различные типы масок, освоили работу с Aeiconizer Plugin, а также настраивать слайсы для экспорта иконки приложения во все необходимые размеры для заливки приложения в app store. Это далеко не все освоенные нами пункты, мы также поработали со Sketch Toolbox, изучили возможности инспектора для стилизации элементов. Надеюсь, вам понравилось! Перевод статьи designmodo.com автора Daniel Schwarz.

Как сделать иконку из картинки в фотошопе самым простым методом?

Главная » Работа с компьютерными программами » Adobe Photoshop

Автор Дмитрий Костин Просмотров 1. 6к. Опубликовано 01.06.2016 Обновлено 07.06.2016

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

Многие ошибочно предполагают, что достаточно поменять расширение картинки на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!

Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.

1. Если не знаете чтобы такого придумать, то лучше идите в Яндекс или Гугл и набирайте «Гугл хром png» (естественно без кавычек).
2. Лучше всего, чтобы изображение было реально в формате PNG, и не просто PNG, а именно с прозрачным фоном. Проверить это легко: нажмите на понравившеюся картинку и посмотрите какой будет задний фон. Прозрачный фон всегда изображается бледно-серыми и белыми квадратиками.
3. Ну а когда нужный файл нашелся, сохраняем его (если кто не знает, то для сохранения изображения на него нужно правой кнопкой мыши и выбрать пункт «сохранить картинку»). После этого естественно открываем его в фотошопе.
4. Теперь измените размер изображения до 256 пикселей по ширине и высоте, а лучше еще меньше (где-нибудь 64*64). Очень желательно, чтобы стороны были одинакового размера.
5. После этого вы можете слегка подредактировать картинку, снабдить его каким-нибудь эффектом, трансформировать его и т.д.
6. А теперь, всё, что вам остается это сохранить изображение в формате ICO. Да, в своей статье про форматы файлов изображений я не рассказывал, но он особо-то и нужен на самом деле. Только есть одна проблема. Если начнете сохранять документ, то формата ICO вы там не увидите. Что за фигня? Дело в том, что по умолчанию его тупо нет.

Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.

1. Скачиваем плагин ICO. Можете скачать у меня здесь. Как загрузите его — распакуйте.
2. Видите там находятся 2 файла? Воооот. Выделяйте их, копируйте и идите в директорию, где у вас установлен ваш фотошоп, например C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\Plug-Ins\File Formats. У вас программа может быть установлена на другом диске (просто я на диск F у себя поставил). 

Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)

Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO. Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.

ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто уменьшите размер изображения до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.

Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства». После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.

Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.

Ну а вообще, если вы хотите хорошо освоить фотошоп, то я очень рекомендую вам посмотреть [urlspan]прекрасные видеоуроки[/urlspan], благодаря которым вы научитесь владеть этим замечательным фоторедактором. Все уроки построены просто великолепны. Я сам его смотрел и узнал много новенького.

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

С уважением, Дмитрий Костин.

window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-147’, blockId: ‘R-A-188774-147’ })})»; cachedBlocksArray[108307] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-146’, blockId: ‘R-A-188774-146’ })})»; cachedBlocksArray[185024] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager. render({ renderTo: ‘yandex_rtb_R-A-188774-169’, blockId: ‘R-A-188774-169’ })})»; cachedBlocksArray[119236] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-168’, blockId: ‘R-A-188774-168’ })})»; cachedBlocksArray[132495] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-164’, blockId: ‘R-A-188774-164’ })})»; cachedBlocksArray[119235] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-159’, blockId: ‘R-A-188774-159’ })})»; cachedBlocksArray[108305] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-163’, blockId: ‘R-A-188774-163’ })})»; cachedBlocksArray[108302] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-161’, blockId: ‘R-A-188774-161’ })})»; cachedBlocksArray[108304] = «window.yaContextCb. push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-150’, blockId: ‘R-A-188774-150’ })})»; cachedBlocksArray[108300] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-148’, blockId: ‘R-A-188774-148’ })})»; cachedBlocksArray[108306] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-145’, blockId: ‘R-A-188774-145’ })})»; cachedBlocksArray[108299] = «»; cachedBlocksArray[108309] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-143’, blockId: ‘R-A-188774-143’ })})»; cachedBlocksArray[108303] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-138’, blockId: ‘R-A-188774-138’ })})»; cachedBlocksArray[108301] = «window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-188774-92’, blockId: ‘R-A-188774-92’ })})»;

Оцените автора

Как сделать профессиональную иконку человека в Фотошоп’е

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

Однако существует способ исправить этот недостаток. Полезное свойство файлов.ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности.gif-файлов содержать множество фреймов). Поэтому если поместить в favicon. ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics , он позволит поместить несколько иконок в одном.ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично. Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в.gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:

16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors

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

Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “??”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://сайт /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;
3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.

Вот что мы должны получить:

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

Шаг 1 — Новый файл / Техника Пера
Откройте Photoshop и создайте новый документ (Ctrl + N). Используйте следующие настройки:
Разрешение: 72dpi
Цветовой режим: RGB цвет
Размеры: 600 × 600 пикселей

Создайте следующую фигуру с помощью инструмента Pen Tool (P) (Перо). Цвет: # 3da1e2

Шаг 2 — Создание фигур с помощью Пера
Нарисуйте заднюю часть папки с помощью Pen Tool (Пера), используя ту же технику рисования. Затем нарисуйте полосу, как показано на рисунке.
Цвет: # 003658 # 3da1e2 # 08517e

Шаг 3 — Закончим форму
Как только Вы закончили рисунок папки, нужно добавить лист бумаги и стрелку, как показано на рисунке. Теперь у вас должны быть 5 слоев. Каждая форма будет на отдельном слое. Назовите каждый слой.
Цвет: # ffffff # 32e732

Шаг 4 — Добавление цветовых эффектов
Добавьте следующие стили слоя к передней части папки. Понизьте непрозрачность до 90%.

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

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

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Шаг 5 — Добавление Рефлексов
Добавить новую группу под названием «Рефлексы». Используйте Pen Tool (Перо), чтобы нарисовать отражение, как показано на рисунке. Убедитесь, что вы рисуете только контур, а не фигуру. После того как вы закрыли путь, щелкните правой кнопкой мыши по рабочей области и выберите make selection (Создать выделение) (растушевка (feather) 0). Возьмите большую кисть (диаметром около 470, твердость 0) и закрасьте правую часть выделения, как на рисунке, для создания белого отражения. Измените режим смешивания на Overlay (Перекрытие) и уменьшить непрозрачность до 63%.

Шаг 6 — Края
Создайте новую группу под названием «Края», создайте новый слой в ней (Ctrl + Shift + N или нажмите значок создания нового слоя). Добавление бликов на краях придает иконке 3D эффект. Используйте Pen Tool (Перо), чтобы создать линии обводки вокруг углов и всех полей папки, бумаги и стрелки. Затем щелкните правой кнопкой мыши по рабочей области и выберите Stroke Path (Выполнить обводку) — Brush (Кисть). Настройки кисти должен быть изменены заранее, master diameter (диаметр) 8 пикселей а hardness (твердость) 0.

Шаг 7 — Тени
Создайте новый слой (Ctrl + Shift + N) для теней и поместить его в новую группу (Ctrl + G). Сделайте выделение, как вы это делали в 5 шаге, для создания отражений. Заполните выделение черным цветом, а затем размойте поля с помощью инструмента Blur tool (Размытие). Если тени выглядят слишком тёмными, снизьте непрозрачность слоя до 40%.

Шаг 8 — Добавление текста
Добавьте текст, используя любой шрифт, который вам нравится. Я выбрал «Agency FB». Размер шрифта: 40, непрозрачность слоя: 75%.

Шаг 9 — Итоговое добавление рефлексов и тени
Добавьте еще несколько рефлексов на бумагу, используя те же методы, что приведены в 5 Шаге.

Добавить тень, используя Ellipse Tool (E) (Эллипс). Нарисуйте эллипс, как показано на рисунке и добавьте немного Filter — Blur — Motion blur (Фильтр — Размытие — Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

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

Шаг 1: Создание фигуры облака

Создайте новый документ 745х200 пикслей. Установите основной цвет голубой #48abff . Возьмите инструмент «Эллипс» щелкните левой кнопкой мыши по документу, в диалоговом окне установите ширина и высота: 70 пикселей

Сделайте дубликат фигуры, для этого нажмите сочетание клавиш Ctrl + J. С помощью стрелки передвиньте фигуру в право

Снова возьмите инструмент «Эллипс», щелкните по документу и установите ширина/высота: 90 пикселей;. Поместите фигуру как показано ниже:

Создайте еще одну фигуру, только в этот раз ширина и высота: 40 пикселей;. У вас должно получится, так:

Теперь нужно выровнять нижнюю часть облака. Для этого воспользуйтесь инструментом «Прямоугольник» установив ширина: 90 пик.; высота: 30 пик;

Далее нужно объединить все слои с овальными фигурами в смарт-объект, но сначала нужно их выделить. Для этого кликаем мышкой по первому слою, затем зажимаем клавишу Shift и кликаем по последнему слою с фигурой. Нажимаем правой кнопкой мыши по выделенным слоям и выбираем «Преобразовать в смарт-объект».

Сделайте дубликат смарт-объекта. Для этого нажмите Ctrl + J. Установите значение параметра Заливка: на 1%.

Перейдите на основной слой со смарт объектом, с помощью трансформации немного уменьшите фигуру. Для этого откройте вкладку Редактирование — > Трансформирование -> Масштабирование или нажмите сочетание клавиш Ctrl+ T.

Теперь объедините эти два смарт объекта в один смарт объект. Как это сделать было написано выше. Назовите данный слой «Облако».

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

Шаг 2: Добавление иконок

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

Итоговый результат: Набор векторных иконок в форме облака

Для создания массового набора иконок, просто сделайте дубликат смарт объекта и размещайте внутри него другие фигуры. Получится примерно следующий набор иконок:

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

Многие ошибочно предполагают, что достаточно на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!

Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.

Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.

Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)

Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO . Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.

ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.

Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства» . После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.

Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.

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

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

С уважением, Дмитрий Костин.

Как легко и быстро создать свою иконку в фотошопе. Иконка в Photoshop мы сохраним как формат иконок.ico
Для начала вам надо сделать поддержку формата.ico в фотошопе.

Поддержка формата ICO

Недавно мне понадобилось нарисовать другу favicon в photoshop. После начатой работы я вдруг понял, что photoshop не дружит с ico форматом. Недолго думая, я вдруг вспомнил, что уже сталкивался с этим и подружить ico я мог только с плагином о котором я вам и расскажу.
Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.
Итак первым делом давайте скачаем плагин, примерно с этого сайта выбрав для какой разрядности (я не знаю как у меня разрядность Windows) вам нужен плагин или для 32-ух или для 64-ёх разрядной системы

После того, как вы загрузили zip файл извлеките из него один файл с расширением 8bi.

Теперь этот файл киньте в папку (для 32-ух и 64-ёх разрядных систем)
C:/Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Required/Plug-Ins/File Formats/
C:/Program Files (x86)/Adobe/Adobe Photoshop CS6/Required/Plug-Ins/File Formats

После этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

После того, как фотошоп у нас уже поддерживает ico формат, мы можем приступать к созданию иконки в фотошопе. Если вы хорошо рисуете, то можете нарисовать на новом документе, с прозрачным фоном иконку. Разрешение не более чем 512 на 512 пикселей. Всё равно сохранять иконку мы будем не в формате 512 на 512, а в меньшем!

Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе . Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Наша иконка готова, и мы её успешно применяем!

Как сделать стикер в телеграме — как создать свои стикеры в ТГ

   Анна Шиманская     31.05.19   1428165 просмотров

Создайте свою коллекцию!

• Как создать стикеры для Telegram с помощью iPhone
• Как создать стикеры для Telegram на устройствах Android
• Как создать стикеры для Telegram на ПК
• Как создать анимированный стикер для Telegram
• Как добавить собственные стикеры в Telegram

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

Как создать стикеры для Telegram с помощью iPhone

Загрузите приложение Stickers for Telegram из онлайн-магазина App Store на iPhone. Оно автоматически сохраняет результат в PNG, 512х512, на прозрачном фоне.

1. Выбираем изображение через “Choose a picture!”.

2. Выделяем необходимую область “маркером”.

3. Убираем неровности с помощью инструмента “ластик”.

4. Нажимаем на “глазик” для оценки результата.

5. Кликаем на “PNG”, а далее — “Add it to a pack”.

Откроется приложение Telegram и бот @Stickers, который добавляет новые стикеры в мессенджер.

Как создать стикеры для Telegram на устройствах Android

В данном случае все еще проще. Потребуется скачать два приложения — «Мой стикер Maker» и «Photo & Picture Resizer» из Play Market на ваш Android.
1. Закидываем фото в «Мой стикер Maker».
2. Коряво обводим.
3. Красиво подгоняем обводку.
4. Нажимаем на галочку => «Save as Sticker».

«Photo & Picture Resizer» подгоняет размер.
1. Выбираем изображение.
2. «Изменить размер» => «Ширина x Высота» => «Произвольный» => 512х512.

Как создать стикеры для Telegram на ПК

Разберём создание в фотошопе.
1. Волшебной палочкой тыкаем по фону, затем на замочек в разделе «Слои» => «Delete».

Получаем прозрачный фон.

2. Подкорректировать вырезанного персонажа можно выполнив обводку. На верхней панели выбираем «Слои» => «Стиль» => «Обводка».

Определяемся с параметрами обводки, кликаем «ОК».

3. Если ваша фотография не квадратная — выберите «Рамка», пропорцию «квадрат» и кликните дважды.

4. «Изображение» => «Размер» => «512х512»

5. «Файл» => «Сохранить как» => PNG.

Как сделать анимированный стикер для Telegram

Создать анимированный стикер в telegram достаточно сложно, для этого нужно знать две программы — Adobe After Effects и Adobe Illustrator.
Анимированные стикеры это новый формат — TGS. Для сохранения в этом формате понадобится плагин для After Effects — Bodymoving-TG.
Пошаговая инструкция:
1. Скачиваем ZXPInstaller для установки Bodymoving-TG. У меня установщик не работал и устанавливать пришлось вручную.

2. Загружаем плагин с сайта разработчика.

3. Заходим в After Effects => «Правка»=> «Настройки»=> «Сценарии и выражения»
4. Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети»
5. Переходим в «Окно» => «Расширения». Должен отобразиться Bodymoving for Telegram Stickers. Если его нет скачайте раннюю версию After Effects.

6. Следующий шаг — рисовка в Illustrator. Учитываем требования: холст 512×512, фон отсутствует, объект не выходит за пределы монтажной области.
После окончания каждую часть, которая будет анимироваться выносим на отдельный слой и сохраняем в формате AI.
7. Анимация в After Effects. Учитываем ограничения разработчиков: 512×512 пикселей, анимация зацикленная продолжительностью до трех секунд, до 64 Кб, частота кадров должна быть одинаковой — 30 или 60. Также есть ряд ограничений на использование инструментов в After Effects.


8. Через «Файл» => «Импорт» выберите вашу графику и импортируйте как композицию не меняя размеры слоев.
Выделите слои и перетащите на иконку «Создать новую композицию».
Чтобы из векторных слоев получить фигуру для анимации, щелкните правую кнопку мыши, Создать => Фигуры из векторного слоя. После удаляем слои AI.
Создаем анимацию.
9. Импорт в TGS. Заходим в Окно => Расширения => Bodymoving for Telegram Stickers, нажимаем на нужный файл => Render. Стикер будет сохранен в выбранной папке.


Как добавить собственные стикеры в Telegram

Для добавления используйте бот @Stickers.

Нажмите “Запустить”, бот представит все свои команды.

1. Выбираем /newpack для обычных и /newanimated для анимированных. Вводим название стикерпака.

2. Прикрепляем подготовленную картинку или анимацию.

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

4. Публикуем командой /publish.

5. Отправляем /skip, если не планируем загружать иконку. Придет сообщение: «Вы можете установить иконку на ваш набор стикеров. Она будет отображаться на панели стикеров. Для установки иконки отправьте квадратную картинку 100х100 Мп на прозрачном фоне. Вы можете пропустить этот шаг, нажав /skip. В таком случае первый стикер автоматически станет иконкой.

6. Пишем короткое уникальное название для создания ссылки.

7. Нажимаем на ссылку и добавляем себе стикеры. Делимся ссылкой с друзьями.

Благодаря боту мы импортировали свой стикерпак. Переходите по ссылке и отвечайте остроумными цитатами со знаменитым одесским колоритом посредством стикеров. Делитесь своими в комментариях.

Skay.ua в Telegram

Подписывайтесь на информационные каналы в Telegram, где информация разделена по вашим интересам. Выбирайте подходящий:

Skay.ua Android – актуальные новости, полезные советы для устройств на ОС Android.

Skay.ua Apple — актуальные новости, полезные советы для устройств на iOS.

Skay Play – новые поступления игр на Sony PS и возможность их обмена.

Хотите узнавать про акции и новинки?
Подпишитесь на рассылку. Без спама.

Только акции, новинки и новости мира Hi-tech. Всегда легко отписаться!

дизайнов иконок Photoshop, тем, шаблонов и графических элементов для загрузки на Dribbble

1. Посмотреть Иллюстрация к курсу компьютерной графики от Videosmile

   Иллюстрация к курсу компьютерной графики от Videosmile

2. Посмотреть 3D дизайн иконок ( фотошоп )

   3d дизайн иконок ( фотошоп )
3. Посмотреть Creative Cloud

   Creative Cloud

4. Просмотр иконок Яндекса

   Иконки Яндекса

5. Посмотреть набор значков

   Набор значков
6. Просмотр значка приложения «Тема»

   Значок приложения темы

7. Просмотр значка камеры iOS

   Значок камеры iOS

8. Посмотреть 32 набора черных иконок

   32 Набор черных значков

9. Посмотреть Разные работы 2020

   Разные работы 2020

10. Посмотреть Давай поиграем

    Давай поиграем

11. Просмотр ретро-экрана

    Ретро-экран

12. Просмотр веб-иллюстраций

    Веб-иллюстрации

13. Просмотр значков еды

    Пищевые иконки

14. Посмотреть космическую иллюстрацию @mail

    Space Illustration @mail

15. Просмотр значков программного обеспечения

    Значки программного обеспечения

16. Посмотреть дизайн упаковки закусок

    Упаковка для закусок

17. Просмотр дискеты

    Дискета

18. Посмотреть Солнце в космосе

    Солнце в космосе

19. Посмотреть КОСМОСКРИМ

    КОСМОСКРИМ

20. Посмотреть дизайн значка «X»

    Дизайн значка «X»

21. Посмотреть эскизы для компании Houla (одежда)

    Дизайн для компании Houla (одежда)

22. View Web Design-Гречневый чай

    Веб-дизайн-гречневый чай

23. Посмотреть

    Празднование

24. Посмотреть концепцию редизайна логотипа Adobe

    Концепция редизайна логотипа Adobe

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

Почему в Photoshop есть значок вопросительного знака?

Как пользователь Photoshop, вы можете однажды попытаться получить доступ к приложению на своем Mac и обнаружить, что вместо типичного значка на его месте стоит только вопросительный знак. Это очень сбивает с толку, и если вам нужно использовать Photoshop для срочных проектов графического дизайна, это также может быть очень неприятно.

Значок вопросительного знака появляется из-за того, что была создана новая версия Photoshop, которая еще не отображается в виде значка документа Mac. Это также может произойти, когда приложение Photoshop было недавно удалено с ноутбука.

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

Вопросительный знак как значок Photoshop

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

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

1. Вышла новая версия приложения

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

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

2. Вы недавно удалили приложение

Некоторые люди могут решить, что Photoshop не для них, выбрав вместо этого более простое программное обеспечение для графического дизайна, такое как Placeit. net, и удалить приложение. Однако иногда удалить приложение не так просто, как нажать кнопку. Когда вы удаляете Photoshop, часто остается вопросительный знак в доке, где когда-то было ваше приложение Photoshop.

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

Исправление проблемы

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

• Перезагрузите компьютер: Иногда вашему ноутбуку может просто понадобиться шанс наверстать упущенное. Если вы давно не перезагружали свой ноутбук, сделайте это некоторое время. Убедитесь, что он подключен к зарядному устройству, и выберите вариант установки обновлений, если это возможно.
• Удалите значок из дока: Имейте в виду, что это только решение, если вы хотите удалить приложение. Если вы это сделаете, вы можете избавиться от вопросительного знака, открыв док-станцию, а затем перетащив значок вопросительного знака в корзину или щелкнув левой кнопкой мыши, чтобы удалить.
• Удалите значок из док-станции, а затем снова откройте Photoshop: Иногда вам может потребоваться просто удалить значок, а затем получить доступ к приложению Photoshop из Adobe Cloud. Как только вы это сделаете, мы надеемся, что он снова откроется в вашем доке, на этот раз отображая правильное изображение.

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

Могу ли я использовать Photoshop, когда есть вопросительный знак?

Не паникуйте. Если ваш Adobe Photoshop показывает знак вопроса, вы все равно сможете получить доступ к приложению через Adobe Cloud. Вы можете сделать это, выполнив следующие действия:

• Перейдите к значку облака в верхней части экрана и нажмите на него
• Раскрывающееся меню
• Нажмите кнопку Photoshop, чтобы открыть приложение

Это позволит вам открыть приложение и вернуться к работе над дизайном.

Знак вопроса появляется только на компьютерах Mac

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

Заключение

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

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

Графический дизайн не должен быть таким сложным. Хотя Adobe Photoshop — очень полезный инструмент, другие онлайн-инструменты для дизайна, такие как Placeit.net, могут дать вам некоторую передышку от постоянных обновлений программного обеспечения и осложнений, которые это может вызвать. Что бы вы ни решили сделать, знайте, что значок вопросительного знака — это не конец света, и вы, надеюсь, скоро вернетесь к дизайну.

Радарная иконка в Photoshop

Мы получили довольно много писем с просьбами об уроках по дизайну иконок в Photoshop. Я не дизайнер иконок как таковой, однако я люблю иконки и действительно восхищаюсь парнями, которые хороши в этом, включая моего друга Эверальдо Коэльо, который в настоящее время работает в Apple и является источником вдохновения, в том числе для этого урока.

Итак, в этом уроке я покажу вам, как создать значок радара в стиле Mac в Photoshop. Это можно легко сделать в Fireworks и Illustrator, я также думаю об этом, чтобы больше практиковаться.

Шаг 1

Откройте Photoshop и создайте новый документ, я использую 1024×1024 пикселей . Также я добавил льняной фон, созданный в одном из моих предыдущих уроков, чтобы сделать его более стильным.

Шаг 2

С Инструмент «Эллипс» (U) создайте круг в центре документа. Вы можете создать его с размером 500×500 пикселей или в зависимости от желаемого размера значка.

Шаг 3

Дублируйте этот круг, а затем измените его размер, чтобы создать что-то вроде внутреннего круга. Идея в том, чтобы создать границу для нашей иконки. После того, как вы изменили его размер, щелкните правой кнопкой мыши значок слоя на панели слоев и выберите «Выбрать пиксель» , чтобы создать выделение этой области.

Шаг 4

Перейдите к Layer>Layer Mask>Hide selection .

Шаг 5

Чтобы создать эффект металлической рамки, воспользуемся стилями слоя. Итак, перейдите в Слой > Стили слоя > Тень . Затем следуйте значениям изображения ниже. Вы будете использовать Inner Shadow, Bevel and Emboss и Color Overlay

Step 6

Вот эффект, который вы получите после применения стилей слоя.

Шаг 7

Добавьте еще один круг, используя инструмент Ellipse Tool (U) . Этот будет черным и будет в центре металлической рамки.

Шаг 8

Дублируйте круг и измените его размер, чтобы он был немного меньше черного круга, затем перейдите в Layer> Layer Style> Gradient Overlay. Для цветов используйте #7a5511 для светло-коричневого и #180f00 для темного . Для других значений используйте изображение ниже.

Шаг 9

Добавьте новый слой поверх круга с градиентом и перейдите в Layer>Create Clipping Mask . Теперь с помощью инструмента Кисть (B) нарисуйте очень мягкую кисть с цветом # 7a5511 прямо поверх круга (1). Также добавьте новый слой и снова закрасьте тем же цветом, но с непрозрачностью 5% над металлической рамкой, чтобы создать коричневый оттенок.

Шаг 10

Добавьте папку в палитру слоев и измените режим наложения этой папки на Color Dodge. Также замаскируйте этот слой, используя область внутреннего круга для справки. Затем с помощью Rectangle Tool (U) создайте очень тонкую линию белого цвета, убедитесь, что она находится внутри папки с цветовым уклоном. Перейдите к Фильтр> Размытие> Размытие по Гауссу . Используйте .5 пикселей для Радиуса . После этого измените непрозрачность на 70% . Продублируйте эту линию и поверните ее на 90º . У вас будет результат, как на картинке ниже.

Шаг 11

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

Шаг 12

Для этого круга первое, что нужно сделать, это изменить Fill Opacity на 0 , затем добавить Outer Glow, Inner Shadow и Stroke. Для значений используйте изображение ниже.

Шаг 13

Вот результат, который вы получите после применения стилей слоя.

Шаг 14

Теперь добавьте внутри папки новый слой с цветом Dodge и с помощью инструмента Кисть (B) и белого цвета нарисуйте пару белых пятен. Из-за осветления и мягкой кисти круги будут иметь очень приятный световой эффект.

Шаг 15

Добавьте больше элементов для большей реалистичности.

Шаг 16

Создайте новый прямоугольник Инструментом «Прямоугольник» (U) , а затем поверните его на 45º . Этот прямоугольник также будет внутри папки с цветовым уклоном, который мы создали на шаге 10.

Шаг 17

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

Шаг 18

Перейдите к Layer>Layer Styles>Blending Options . Измените непрозрачность заливки на 0,9.0254, а затем перейдите к Gradient Overlay . Используйте угол для угла стиля 50º и непрозрачность 55% . Также взгляните на то, как я настроил цвета градиента.

Шаг 19

Это результат, который вы получите после применения стилей слоя.

Шаг 20

Повторите то же самое, что и в шагах 2-4, и создайте еще один круг, чтобы использовать его в качестве границы. Эта граница будет между стеклом радара и черным кругом, он зеленый на изображении ниже.

Шаг 21

Теперь давайте применим больше стилей слоя, чтобы придать нашему дизайну более металлический вид. Используйте изображение ниже для значений.

Шаг 22

Ниже вы можете увидеть, как выглядит граница после стилей слоя.

Шаг 23

Теперь создайте круг того же диаметра, что и круг с элементами радара, затем примените к нему Gradient Overlay , используя белый цвет для начального и конечного цветов, но разную непрозрачность, например 0 для в начале и 100 в конце. После этого немного измените размер только по горизонтали. Затем с помощью Elliptical Marquee Tool (M) создайте выделение, как на изображении ниже, и скройте эту область выделения с помощью маски слоя (Layer>Layer Mask>Hide Selection) .

Шаг 24

Выберите все слои, используемые для создания интерфейса радара, включая круги с наложением градиента. После этого продублируйте их и объедините дублированные слои в один слой. Затем перейдите к Filter> Blur> Gaussian Blur . Используйте 15 пикселей для радиуса . Измените непрозрачность этого слоя на Экран при 50% .

Идея этого слоя состоит в том, чтобы усилить эффект свечения.

Шаг 25

Инструментом «Ластик» (E) удалите темные области интерфейса радара, чтобы увеличить контрастность.

Заключение

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

Зеленая версия

Вы можете создавать различные цветовые схемы, используя параметры Оттенок и Насыщенность. Для этого просто перейдите в Image>Adjustments>Hue and Saturation или Layer>New Adjustment Layer .

Скачать файл Photoshop

Скачать исходный файл

Иконки Photoshop psd скачать бесплатно

Расширенный поиск Запросить дизайн

[Psd] Значок телефона iOS ( 900,77 КБ )

Кристоф Тозиет

[ Psd ] Иконки Instagram ( 341.78KB )

Адам Кул

[Psd] 350 бесплатных векторных веб-иконок (553. 37KB)

www.brrankic1979.com

[ Psd ] Иконки ( 24.61KB )

Пракаш Годке

[ Psd ] лимонные иконки ( 33.55KB )

визуальный идиот

[Psd] Иконки с тонким штрихом ( 37,67 КБ )

Виктор Эриксон

[ Psd ] 126 набор иконок ( 953.09KB )

Эрик Бенджамин

[ Psd ] Набор из 50 иконок ( 74,52 КБ )

Виктор Эриксон

[Psd] Значок настроек iOS PSD (174,98 КБ)

М Халид

[ Psd ] Набор мини-иконок ( 39,09 КБ )

Роман Булах

[ Psd ] Набор музыкальных икон ( 330. 13KB )

Тим Паркер

[ Psd ] 80 белых иконок ( 5.90MB )

Виктор Эриксон

[ Psd ] Adobe Icons ( 2.83MB )

Давид Ковалев

[Psd] Набор из 40 иконок (1,51 МБ)

Бен Бейт

[ Psd ] Иконки значков заслуг ( 23,44 МБ )

Дизайн иконок Розетта

[ Psd ] Набор иконок 32px ( 746.22KB )

визуальный идиот

[ Psd ] Набор иконок 105 петель ( 1. 73MB )

Пранав Прамод

[ Psd ] Значок Twitter iOS ( 873.75KB )

Кристоф Тозиет

[ Psd ] Простой набор иконок ( 616.44KB )

Тольколи

[ Psd ] Удивительные значки ( 51,47 КБ )

Флориан Карли

значки фотошоп значки фотошоп текстовый эффект фотошоп фотошоп фоны кнопка фотошоп текстовые эффекты фотошоп классная доска фотошоп скачать бесплатно фотошоп граница фотошоп 7 стилей формы для фотошоп капля воды фотошоп 3d земля луна adobe photoshop фотошоп документ фон дизайн фотошоп фотошоп фоновый файл фотошоп шаблон веб-сайта psd дизайн рамка для фотошопа

[Psd] Набор иконок глифов ( 942. 64KB )

зистоо

[ Psd ] 44 Бесплатные иконки ( 37.41KB )

Виктор Эриксон

[ Psd ] Иконки платежей ( 1.10MB )

визуальный идиот

[ Psd ] Значок приложения камеры ( 753,94 КБ )

Ашунг Хунг

[Psd] Набор иконок Pixel UI (1.42MB)

Мэтт Джентиле

Загрузка дополнительных элементов, пожалуйста, подождите…

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

Критерий поиска:

Тип поиска:

Совпадение с любымСовпадение со всеми

Искать в:

ВекторыИконкиФотографииШрифтыШаблоны сайтовPSD

Лицензия:

Все лицензииРазрешить коммерческое использование

Результат сортировки:

Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок

• Дом
• Лицензии
• Срок
• Конфиденциальность
• О
• Контакт

10 простых советов по созданию собственных классных значков с помощью Photoshop

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

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

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

Значок Технические характеристики

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

Размер

Важность размера обсуждается ниже. А пока остановимся на технических аспектах.

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

.

• • • 16 x 16 px ***
    • 24 x 24 Px
    • 32 x 32 PX ***
    • 48 x 48 PX ***
    • 64 x 64 PX
    • 96 96.0010
    • 128 x 128 PX **
    • 256 x 256 PX **
    • 512 x 512 PX **

Windows XP Совета по рекомендациям 16 x 16, 32 x 32, или 48 x 48 Resolution *. Если ни один из них не доступен , он изменит размер значка, ближайшего по разрешению, до 256 x 256. Поскольку разрешения рабочего стола постоянно растут, рекомендуется всегда включать более высокие разрешения. Формат Apple ICNS поддерживает размеры 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 и даже 512 x 512**.

Формат файла

Для Windows наиболее часто используемым форматом файлов для распространения значков является ICO. Аналогом Mac является ICNS (формат изображения значка Apple).

Нет ни одного учебника по созданию идеальной иконки снова и снова. Различные темы и дизайны требуют разных подходов, и «текущая тенденция» находится в состоянии постоянного изменения. Ниже приведены три основных столпа создания иконок, которые снова и снова доказывают свою истинность. Если вы новичок в разработке иконок, всегда помните о контрольном списке иконок.

Безошибочный

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

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

Однородность

Если вы разрабатываете набор иконок, соблюдайте единообразие дизайна.

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

Размер

Значки всегда создаются в нескольких размерах. Это влияет на дизайн несколькими способами.

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

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

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

Инструмент «Перо»

Инструмент «Перо» позволяет создавать масштабируемую векторную графику. Вы можете нарисовать фигуру, создав узлы и перетащив их, чтобы настроить кривую линии. Его сложнее использовать, чем кажется, но, вероятно, это лучший выбор. Мы писали об инструменте «Перо» в прошлом, читайте Photoshop Pathing: How To Use Photoshop Pen Tool.

Плагин формата файла ICO

Этот подключаемый модуль Photoshop добавляет формат файла ICO к настройкам экспорта. Способ установки зависит от вашей ОС и версии Photoshop, поэтому обязательно проверьте веб-сайт.

Компоновщик значков Apple

К сожалению, такого инструмента для файлового формата Apple ICNS нет. Вместо этого этот бесплатный инструмент решает проблему. Он поставляется с пакетом Apple Xcode, который вы можете загрузить после (утомительного) процесса регистрации. Или вы можете Google для загрузки.

Hongkiat: 40+ отобранных руководств по созданию иконок в Photoshop

Блог о дизайне Hongkiat.com составил список из более чем 40 различных руководств по дизайну иконок Photoshop. Этот список охватывает все виды иконок и несколько степеней сложности. Просмотрите список для вдохновения и экстраполируйте методы, используемые для реализации ваших собственных проектов.

Стили слоев

Встроенные стили слоев Photoshop — отличный способ добавить последний штрих к вашим значкам. Откройте панель стилей слоя, дважды щелкнув слой или щелкнув его правой кнопкой мыши в обзоре слоев. Используйте серую обводку толщиной 1 пиксель с непрозрачностью 40-50% для границ значка и установите тени под углом 110° для достижения наилучших результатов. Старайтесь не использовать тени вокруг значка, так как большинство операционных систем уже делают это.

Есть ли у вас какие-либо другие элементарные советы по дизайну иконок? Дайте нам знать, что вы думаете в разделе комментариев ниже!

50 уроков Photoshop для создания потрясающих иконок

• 8 июня 2014 г.
• Фотошоп

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

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

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

2. Создайте стильную иконку почты в Photoshop

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

Итак, в этом уроке показано, как создать иконку радара в стиле Mac в Photoshop.

Это еще одна иконка, созданная Negreu Andreas. Значок, который можно использовать для игры, может быть, или какое-то приложение для Mac. Прежде чем мы начали, мы искали в Интернете фотографии с похожими фургонами, затем придумали несколько идей и сделали быстрый набросок. После этого мы начали работать.

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

6. Как создать значок батареи в Photoshop

В этом уроке вы нарисуете значок батареи в Photoshop. Ключевым здесь является стиль слоя Gradient Overlay. Используя этот стиль слоя, мы можем добавить освещение в батарею и придать ей трехмерный вид.

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

В этом уроке вы создадите значок камеры Polaroid. Вы будете использовать множество стилей слоя и рисовать вручную с помощью инструмента «Кисть», чтобы добиться реалистичного вида.

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

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

Когда мы разрабатываем веб-сайты или пользовательские интерфейсы, нам часто нужно создавать уникальные и креативные значки. Большинство веб-сайтов в наши дни имеют какое-то присутствие в социальных сетях; со ссылкой на свои страницы в Facebook или Twitter на видном месте на первых страницах. С таким количеством сайтов, ссылающихся на свои профили в социальных сетях, неудивительно, что многие сайты просто повторяют одни и те же значки. В сегодняшнем уроке мы покажем, как создать совершенно уникальную иконку для социальных сетей, вдохновленную НЛО, на основе темы.

Как создать подробную иконку Apple Safari в Photoshop. Этот урок покажет вам, как создавать фигуры и использовать различные стили слоя для создания эффектов.

В этом уроке Photoshop показано, как сделать картонную коробку, которую можно использовать для различных целей, например, для иконок или других дизайнерских целей. Процедура создания картонной коробки проста и понятна с использованием таких инструментов, как Gradient Tool и Polygonal Lasso Tool.

В Photoshop можно сделать очень многое, используя всего несколько избранных инструментов. Сегодня мы продемонстрируем, как создать в Photoshop реалистичную иконку iMac с 27-дюймовым экраном, клавиатурой и мышью.

15. Простая иконка кофейной чашки Photoshop Tutorial

В этом уроке мы создадим полуфотореалистичную кофейную чашку с хорошей пенкой.

В этом уроке мы создадим полуфотореалистичную кофейную чашку с хорошей пенкой.

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

В этом уроке вы узнаете, как создать милую и очаровательную иконку Twitter. В этом уроке вы будете использовать некоторые из основных инструментов, таких как Ellipse Tool, Pen Tool и Gradient Tool. Вот краткий предварительный просмотр значка, который мы будем делать.

В этом уроке вы узнаете, как создать милую и очаровательную иконку Twitter. В этом уроке вы будете использовать некоторые из основных инструментов, таких как Ellipse Tool, Pen Tool и Gradient Tool. Вот краткий предварительный просмотр значка, который мы будем делать.

В этом уроке вы выполните простые шаги по созданию красивого значка конверта. В учебнике используется инструмент «Перо», но в большинстве случаев для создания этого значка используются инструменты выделения. Штамп также объясняется просто.

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

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

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

В этом уроке рассказывается о создании Apple Magic Mouse в Photoshop, хотя вы можете использовать эти методы и для создания других стилей дизайна значков мыши. Новый дизайн этой мыши выглядит просто потрясающе. Создание его и использование в качестве значка делает его еще более увлекательным и интересным. Глянцевый вид и простота превращают эту мышь в действительно аккуратную иконку.

В этом уроке я покажу вам, как создать свой собственный значок инструмента «Перо» в Photoshop с нуля, используя Photoshop CS5 9.0005

В этом уроке я покажу вам, как создать свой собственный значок инструмента «Перо» в Photoshop с нуля, используя Photoshop CS5

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

Узнайте, как создать красивую иконку принтера с помощью фотошопа

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

Стул-шар, популяризированный финским дизайнером интерьеров Ээро Аарнио, был краеугольным камнем любой гостиной середины века или 1960-х годов. Сегодня мы научимся создавать этот культовый предмет мебели с нуля в Photoshop.

31. Как сделать значок профессионального друга в Photoshop

Кресло-шар, популяризированное финским дизайнером интерьеров Ээро Аарнио, было краеугольным камнем любого интерьера середины века или 19 века.Жилая площадь 60-х годов. Сегодня мы научимся создавать этот культовый предмет мебели с нуля в Photoshop.

Роман Хусдадо рассказывает, как использовать стили слоя Photoshop для создания значка iOS в стиле Instagram с нуля.

В этом уроке по созданию иконок мы узнаем, как сделать сладкий и вкусный значок пончика из первоначального эскиза. Итак, начнем, и помните: не пытайтесь укусить экран!

В этом уроке по созданию иконок мы узнаем, как сделать сладкий и вкусный значок пончика из первоначального эскиза. Итак, начнем, и помните: не пытайтесь укусить экран!

Во втором уроке этого года я покажу вам процесс создания иконки папки в индустриальном стиле.

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

В этом уроке это сделает эту проблему менее неприятной. Я постараюсь изо всех сил научить вас делать навигационные иконки в стиле плоского дизайна. Мы создадим иконки навигации для вашего сайта или блога. В этом уроке будет использоваться программа Adobe Photoshop CS6.

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

39. Как создать подробную иконку датчика в Photoshop

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

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

В этом уроке по дизайну значков Photoshop я покажу вам, как сделать привлекательный рисунок мусорной корзины со скомканной и мятой белой бумагой внутри и вокруг нее — и все это с нуля. Мы воспользуемся такими инструментами, как Gradient Tool, Custom Shape Tool, Rounded Rectangle Tool, и простыми функциями Photoshop, такими как Skew Transform и Free Transform, для создания нашей иконки.

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

Понимание основного процесса создания значка в Photoshop может стать ценным навыком для изучения. Сегодня мы будем создавать иконку для классной доски, вдохновленную веб-сайтом Icon Resource от Себастьяна де Вита, который дал разрешение на создание учебного пособия, вдохновленного его работой. В этом руководстве вы изучите некоторые важные концепции, а также узнаете, как работать с некоторыми сторонними приложениями.

В этом уроке вы узнаете, как создать крутую иконку для iPad, соединив простые фигуры, а затем применив к ним эффекты слоя в Photoshop.

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

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

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