Подтягиваем маску на нужный объект картинки. По итогу нажимаем «Готово» .

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

И теперь можем конвертировать его в «.ico» .

Сегодня нам предстоит узнать, что такое иконка для папки. Вообще, с данным объектом знаком даже начинающий пользователь. Только не каждый знает, что можно редактировать иконки. Как сделать это? Давайте попробуем разобраться в этом вопросе. Это не так уж и трудно, если знать, с чего начинать.

Описание

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

Иконка для папки — это своеобразный вид данного объекта. Он может быть стандартным или нет. Каждый пользователь при желании может изменить «внешность» папки так, как ему захочется. И все это без помощи дополнительного контента. Но как установить иконки для папок? Давайте постараемся ответить на этот вопрос.

Изменение из стандарта

Первое, что можно предложить пользователям — это использование стандартной библиотеки Windows со значками для папок. Именно здесь хранится множество изображений, помогающих реализации поставленной задачи.

Как устанавливается иконка для папки? Для начала выделите объект и нажмите на него правой кнопкой мышки. Затем стоит выбрать в появившемся списке «Свойства». У вас выскочит окно, в котором придется перейти во вкладку «Настройка». Далее — выберите параметр «Сменить значок».

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

Рисунок или загрузка

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

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

А знаете ли вы, что практически из любой картинки или фото можно для папки или для сайта (фавикон)? Причем для этого от вас не потребуется обладать какими-то специальными знаниями и уметь пользоваться графическими редакторами. Иконку можно сделать онлайн буквально за несколько секунд.

Для этого заходим на сайт FAVICO.COM . Жмем кнопку “Browse” и находим на своем компьютере нужную картинку или фотографию (выделяем ее и жмем “Открыть”). Изображение должно быть в одном из трех форматов: PNG, GIF или JPG (внимание: не JPEG, а именно JPG).
По-умолчанию будет выбран размер выходного файла 16×16 пикселей – это стандартный размер иконки для сайта (фавикона). Жмем кнопку “Create”. Справа появится преобразованная в формат ICO картинка. Мы можем просмотреть, как она будет выглядеть в адресной строке браузера рядом с названием сайта, если нажмем на лупу. Чтобы скачать иконку себе на компьютер – жмем на кнопку со стрелкой:
Чтобы сделать иконку для папки – лучше выставить размер 32×32 пикселей: А дальше все делаем также, как описано выше.

Чтобы сменить стандартный значок папки на вашу иконку: щелкните правой клавишей мыши по папке – “Свойства” – перейдите во вкладку “Настройка” – нажмите внизу кнопку “Сменить значок” – “Обзор” – найдите на компьютере файл c расширением .ico — “Открыть” – “ОК” – “Применить” – “ОК”:Вот что получилось у меня в итоге:

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

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

Fasticona 1.0 free portable

Более простой программы для создания иконок я не встречал. Она даже не требует установки. На Fasticona 1.0 free portable не позволяется рисовать иконки, она их делает из готовых картинок. Вы можете сделать значок из любого изображения, (хоть из собственного фото) программа поддерживает разнообразные форматы. Простыми словами – это просто конвертер изображений.

Перед тем, как сделать иконку из картинки, загрузите изображение в программу с помощью кнопки «Open file». Выберите нужные параметры: размер (size), глубину цвета (colors и bits per sample), папку сохранения (output path, по умолчанию, папка, где сохранён запускающий файл) и название файла иконки (output the name).

Полученный файл сохраняется в формате *.ico. И только в нём.

Seanau Icon Tool Kit 6.0

Seanau Icon Tool Kit 6.0 придётся установить на компьютер, но места она займёт очень мало. Функционал у неё более расширенный. Эта программа позволяет как сделать иконку из картинки, так и нарисовать её самому. Для того у неё есть широкий инструментарий.

Icon Tool Kit поддерживает работу со слоями, позволяет настраивать глубину цвета, прозрачность, присутствуют разнообразные фильтры. Выходной файл можно получить в*.ico, *.png, *.bmp, *.jpg или *.gif. Примечательно то, что этот софт позволяет применять к создаваемым иконкам стили, например Mac, Vista и другие. Скачать программу для создания иконок рекомендуется тем, кто хочет в большей мере воплотить творческие идеи в интерфейсе.

Как нарисовать иконку. Минимизация — Турбомилк

Как нарисовать иконку. Минимизация

Автор: Олеся Козлова
25 июня 2008

Итак, приготовьте лупы, мы продолжаем! После долгих и жарких споров (не волнуйтесь, до применения бластеров не дошло) у нас есть 3 утвержденные иконки размером 64×64.

Дальше начинается работа, требующая внимания и терпения, но конечный ее результат Инопланетные Захватчики будут видеть на своих экранах намного чаще (оказывается, они в процессе эволюции не увеличивали экраны, а улучшали зрение). Как грамотно построить маленькие иконки — к этому будут прикованы наши взгляды сейчас.

Нас интересуют два размера: 32×32 и 16×16.

На первое у нас большое блюдо: «Инопланетный захватчик в собственном соку» 32×32.

Рисуем салфетку — квадратик, в который должен быть вписан наш воинствующий друг.

Возьмем иконку большого размера и в панельке Transform выставим у большей стороны нужный нам размер (не забыв нажать link).

Смотрим на то, что получилось…

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

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

Далее вооружимся панелькой transform, поставим черный квадрат в левый верхний угол и начнем смотреть координаты у простых объектов (кружков и прямоугольников). В идеале координаты и размеры объектов должны быть ровными числами.

Осталось поправить «сложносочиненные» объекты (волосы и щупалы).

Готово:

Крошечки 16×16 остались на сладкое.

Берем исходную иконку и «отсекаем все лишнее». Удаляем все, кроме основных элементов. Основные части, состоящие из нескольких форм, объединяем в одну. Убираем на них все размытости.

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

Вновь в ход идет уже упомянутый выше Transform.

Все готово:

Связанные записи

Как нарисовать иконку в фотошопе. Как проще и быстрее всего сделать из картинки иконку в фотошопе

Однако запомните, что оба эти формата не поддерживаются 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 мы сохраним как формат иконок.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

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

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

Иконки являются важной частью интерактивного и веб дизайна. Хотя иконки малы, их бывает очень сложно создать. В сегодняшнем уроке мы продемонстрируем, как создать иконку папки с использованием различных форм и рефлексов в 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 (Фильтр — Размытие — Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

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

Иконки являются важной частью интерактивного и веб дизайна. Хотя иконки малы, их бывает очень сложно создать. В сегодняшнем уроке мы продемонстрируем, как создать иконку папки с использованием различных форм и рефлексов в 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 (Фильтр — Размытие — Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

Создание иконок может быть весьма сложным делом, потому, что вам нужно суметь сделать гибкий дизайн, который можно легко увеличивать или уменьшать. Для того чтобы добиться такой легкой возможности изменения размера, графические дизайнеры обычно используют программы для работы с векторной графикой, вроде Illustrator. Однако в этом уроке, рассчитанном на пользователей со средними знаниями, мы покажем, как сделать из наброска потрясающую иконку, используя Photoshop . Вам понадобится базовое знание программы Photoshop и, в частности, инструмента Перо (Pen Tool).

Предварительный просмотр

Введение

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

Шаг 1: Создаем документ Photoshop

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

Шаг 2: Начинаем с основы

Теперь нажмите комбинацию Ctrl+C, а затем Ctrl +V, чтобы скопировать и вставить такой же контур на слой.

Далее, выберите Редактирование – Трансформирование – Отразить по горизонтали (Правка – Трансформация – Отразить по горизонтали (Edit > Transform Path > Flip Horizontal) и переместите вторую половинку фигуры в правую сторону, так чтобы ее две половинки соединились.

Шаг 3: Применяем стиль к основному слою

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

Создайте новый слой и расположите его под «основным» слоем.

Залейте выделение на нем, используя инструмент Эллиптического выделения (Elliptical Marquee Tool (M) и уменьшите его прозрачность до 30%.

Затем примените к нему два фильтра – Размытие по Гауссу и Размытие в движении (Gaussian Blur и Motion Blur).
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите радиус на значение в 3.0px.

Установите угол падения (Angle) на 0°, а расстояние (Distance) на 30px.

При активном выделении, пройдите к меню Выделение – Модификация – Расширить (Select > Modify > Expand) и расширьте выделение на 2px.

Передвиньте выделение на 5px вверх и нажмите на клавишу Delete, чтобы очистить область под выделением.

Выделите инструмент Перемещения (Move Tool (V) и передвиньте слой на 3px вниз.

Наконец, примените фильтр Размытие по Гауссу с радиусом 2.5px и уменьшите прозрачность слоя до 50%. Если вы точно придерживались наших инструкций, то у вас на данном этапе получится нечто такое.

Используя инструмент Пера (Pen Tool), нарисуйте фигуру, похожую на приведенную ниже и назовите ее «рубашка».

Выберите инструмент многоугольного выделения (Rectangular Marquee Tool (M) и, на новом слое, залейте выделение любым цветом, как показано ниже (мы будем добавлять к слою стиль, поэтому цвет, которым вы его зальете, не имеет значения).

Следующий на очереди галстук. Это будет красный галстук, но мы будем только рады, если вы решите поэкспериментировать с разными цветами и узорами галстуков! Форму галстука создайте с помощью инструмента Пера (Pen Tool (P), используя тот же прием, о котором мы уже говорили.

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

Назовите слой с новой формой «воротник».

Тень (Drop Shadow)

Поэтому, чтобы добиться желаемого результата, выберите слой «воротник» и нажмите комбинацию Ctrl+J, чтобы скопировать его.

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

После этого проделайте комбинацию Правка – Трансформация – Отразить по горизонтали (Edit > Transform > Flip Horizontal) и передвиньте вторую половинку вправо с помощью инструмента Перемещение (Move Tool), чтобы закончить воротник.

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

Затем нарисуйте форму для левого лацкана пиджака, как показано ниже.

Тень (Drop Shadow)

Выберите инструмент Кисть (Brush Tool) и выберите мягкую кисть толщиной 4px.

Тень (Drop Shadow)

Нарисуйте эллипс для лица, как показано ниже.

Шаг 12: Добавляем тени на лицо

Создайте новый слой и кликните на слое «лицо» мышью, удерживая Ctrl, чтобы автоматически создать вокруг него выделение.

Передвиньте выделение на 4px вниз и залейте цветом #423820 на новом слое.

Повторите этот же самый фильтр нажатием комбинации Ctrl+F.

Выберите слой с тенью, кликните на слое «шея», удерживая Ctrl, чтобы создать вокруг него выделение, затем нажмите Ctrl+Shift+I, чтобы обратить выделение.

Нажмите клавишу Delete, чтобы очистить область под обращенным выделением.

Точно так же, как вы добавляли тень на лицо, добавьте тень на волосы через лицо, используя тот же цвет, но с меньшей прозрачностью (Opacity) – около 70%.

Создайте новый слой и кликните на слое «волосы», удерживая Ctrl, чтобы загрузить его выделение.

Передвиньте выделение на 7px вверх и залейте белым цветом (#ffffff).

При выбранном выделении, передвиньте его на 5px вверх и нажмите клавишу Delete,чтобы очистить область под выделением.

Теперь примените к слою такие фильтры:
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите опцию Радиус (Radius) на 1px.
Фильтр – Резкость – Резко (Filter > Sharpen > Sharpen)

Примените этот фильтр дважды.

Затем, установите прозрачность заливки слоя на 0% и примените к нему стиль Заливка градиентом (Наложение градиента) (Gradient Overlay).

Все готово! Спасибо за то, что прошли вест тот урок! Надеюсь, что вам удалось выучить один или два приема Photoshop.

Если мы вдохновили кого-то из вас на новые работы с помощью этого урока, прошу добавить свои работы в комментарии!

Вот окончательная версия дизайна иконки.

* (ZIP, 0.20мб)

Внимание! У вас нет прав для просмотра скрытого текста.

Как нарисовать иконку премиум-класса: 6 основных принципов

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

Три атрибута эффективного дизайна 

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

Форма

Форма — основная структура иконки, то, как она сделана. Основные геометрические фигуры — круг, квадрат и треугольник — создают визуально устойчивую основу для дизайна иконок. В нашем примере с иконкой собаки корги, ее голова состоит из двух треугольников и двух эллипсов. Рисуя карандашом, вы создаете набросок из простых фигур. Тот же самый подход используйте и при создании иконок.

Эстетика

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

Распознаваемость

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

Всегда начинайте с сетки!

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

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

Внутри 32-пиксельного квадрата вы заметите вертикальные и горизонтальные прямоугольники размером 20×28 пикселей. Мы свободно используем эти прямоугольники для значков, которые имеют горизонтальную или вертикальную ориентацию.

Начните с простых геометрических форм

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

Детализируйте

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

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

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

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

Будьте последовательны 

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

Заключение

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

иконок для рисования — загрузка в векторном формате, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Рисовать

+ Коллекция

Рисовать

+ Коллекция

Рисовать

+ Коллекция

Libre Office Draw

+ Коллекция

Google Рисование

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Google Рисование

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Google Рисование

+ Коллекция

Карандашный Рисунок

+ Коллекция

Google Рисование

+ Коллекция

Карандашный Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Рисование компаса

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Карандашный Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Рисование компаса

+ Коллекция

Рисунок

+ Коллекция

Рисунок

+ Коллекция

Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Выдвижной ящик

+ Коллекция

Рисунок

+ Коллекция

Выдвижной ящик

+ Коллекция

Рисунок

+ Коллекция

Рисунок

+ Коллекция

Рисование компаса

+ Коллекция

Рисунок

+ Коллекция

Google Рисование

+ Коллекция

Google Рисование

+ Коллекция

Google Рисование

+ Коллекция

Рисование компаса

+ Коллекция

Рисунок

+ Коллекция

Google Рисование

+ Коллекция

Инструмент лассо

+ Коллекция

Рисунок

+ Коллекция

Инструмент лассо

+ Коллекция

Рисунок

+ Коллекция

Инструмент лассо

+ Коллекция

Пентагон

+ Коллекция

Иллюстратор

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Карандашный Рисунок

+ Коллекция

Рисование значка карандашом — Smashing Magazine

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

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

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

Возможно, вы захотите взглянуть на следующие статьи по теме:

Встречайте Image Optimization , новое практическое руководство Адди Османи по оптимизации и размещению высококачественных изображений в Интернете. От форматов и сжатия до доставки и обслуживания: все в одной книге , 528 страниц, .

Несколько недель назад мы выпустили Bright! Набор иконок (см. Изображение выше), который можно бесплатно скачать с нашего сайта.В этой статье объясняется процесс создания простого значка карандаша , одного из значков в наборе значков. Учебное пособие очень подробное и всестороннее, поэтому мы надеемся, что вы сможете без проблем выполнять каждый шаг.

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

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

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

1. Характеристики значка карандаша

Рисование значка означает рисование наиболее типичных символов объекта, чтобы он мог отражать действие значка или отображать концепцию и нюансы.Как вы, возможно, знаете, обычно можно выбрать один из трех видов карандашей:

1. Корпус в форме призмы с блестящей глазурью на конце.
2. Корпус в форме призмы с ластиком, прикрепленный к корпусу карандаша ярким белым металлическим кольцом.
3. Цилиндровидный корпус без ластика.

Мы выбрали второй тип дизайна иконок, потому что в нем есть все необходимые элементы, упрощающие распознавание изображения зрителем . После попытки сделать набросок второго типа, это образец эскиза, который соответствует стилю набора, который мы имеем в виду.Наши любимые инструменты для рисования — маркеры Copic с оттенками серого 10%, 30%, 50% и шариковая ручка. Некоторые важные вещи, которые следует соблюдать при работе с этим значком:

• При создании значка большого размера необходимо обратить пристальное внимание на детали и убедиться, что используется двухточечная перспектива. Но в этой статье, поскольку значок должен быть сделан и оптимизирован в меньших размерах (64 × 64 пикселей и 48 × 48 пикселей), его концепция должна быть максимально простой, а значок должен быть проиллюстрирован в одноточечной перспективе.
• Свет, используемый в иконке, должен быть согласован.
• Перспектива, используемая для значка, должна быть одинаковой в наборе значков, чтобы все значки выглядели как принадлежащие одной семье.
• Стиль должен быть немного более мужественным.
• Решающий цвет — зеленый.
• Поскольку значок должен быть сохранен в файле EPS8, используется только градиент, и все пути должны быть соединены (без открытых путей). Также важно отметить, что здесь нет эффекта прозрачности и не задействовано растровое изображение.

Ладно, перейдем к основному!

2. Эскизов:

В нашем дизайне иконок эскизы всегда на первом месте.

Сканируем эти скетчи в Illustrator.

3. Базовый план:

3.1. Корпус карандаша

1. Создайте документ размером 64 x 64 пикселя. Перетащите изображение (отсканированный эскиз) на монтажную область нового документа. Перейдите в палитру «Прозрачность» и установите непрозрачность изображения на 50. Заблокируйте этот слой и сохраните документ.Создайте новый слой и начните рисовать на нем контуры.
2. Создайте контур прямоугольника с закругленными углами, используя инструмент Прямоугольник со скругленными углами, а затем щелкните монтажную область, чтобы установить значение радиуса угла равным 10 пикселей. Щелкните ОК.

1. Выберите инструмент «Выделение» (V), щелкните край прямоугольного контура с закругленными углами и перетащите его так, чтобы он плотно прилегал к нарисованному изображению, как показано на рисунке ниже.
   • Выберите круглый прямоугольник и установите для него значение «Нет».
   • Ластик выглядит меньше корпуса, поэтому его необходимо переделать. Есть несколько способов перерисовать ластик, например, с помощью инструмента «Перо» (P), но по моему опыту они не дали хороших результатов.
2. Выберите контур прямоугольника с закругленными углами. Дважды щелкните инструмент «Масштаб» и установите флажок «Равномерное» в диалоговом окне «Масштаб». Установите значение шкалы 96%. Установите флажок Копировать, чтобы создать реплику, как показано на рисунке ниже.
3. Выберите инструмент «Прямоугольник» и нарисуйте новый прямоугольник в месте ластика и поверх контура прямоугольника с закругленными углами.
4. Выберите инструмент «Добавить точку привязки» (+) и щелкните центральную точку прямоугольного контура (нарисованного на шаге 5), чтобы добавить еще одну точку привязки. Затем выберите инструмент «Удалить точку привязки» (-) и удалите 2 точки привязки.
5. Выберите инструмент «Эллипс» и нарисуйте эллипс, как показано ниже:
6. Выберите контур большего прямоугольника со скругленными углами и контур эллипса. Перейдите в палитру Pathfinder и щелкните значок Divide. На палитре слоев появится новая группа. Любой разделенный путь будет принадлежать этой группе.
7. Перейдите в палитру слоев и выберите два пути, расположенные под новой группой, нажмите Command / Ctrl + G, чтобы поместить их в группу и заблокировать эту группу. Сделайте это, чтобы упростить удаление неиспользуемых путей на шаге
.
8. Разгруппируйте группу с разделенными путями (на шаге 8), выбрав группу и выбрав команду «Разгруппировать» из контекстного меню.
9. Удаляйте неиспользуемые пути, пока не получите результат, как показано ниже.

3.2. Металлическое кольцо

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

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

4. Реквизиты:

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

1. Выберите инструмент Прямоугольник со скругленными углами и нарисуйте новый контур прямоугольника со скругленными углами с радиусом угла 4 точки (как на шаге 2B).
2. Сделайте копию этого прямоугольника с закругленными углами, нажав команды «Копировать и вставить вперед» (Command / Ctrl + F).
3. Переместите повторяющийся путь вправо.
4. Выберите контуры прямоугольников со скругленными углами и контур тела, а затем разделите их с помощью параметра «Разделение» в палитре Обработки контуров.
5. Выберите группу с разделенными путями и разгруппируйте ее, а затем удалите неиспользуемые пути. Результат должен быть таким:
6. Продолжайте использовать инструмент Прямоугольник со скругленными углами, чтобы нарисовать еще один контур прямоугольника со скругленными углами, а затем используйте параметр «Разделить», чтобы вырезать контур в середине тела карандаша, чтобы сформировать четкую призму.Затем разгруппируйте и разблокируйте все пути на уровне 2, а затем измените их имена. Смотрите результат ниже.

5. Укладка карандаша:

А теперь придадим иконке немного очарования. Шаги включают:

5.1. Добавление градиента

1. Выделите все контуры и выберите инструмент «Градиент», затем перейдите в палитру «Образцы» и выберите радиальный черно-серо-белый градиент.
2. Выберите каждый контур и перетащите инструмент «Градиент» (G) через каждый из них, пока не увидите результат, как на картинке ниже:
3. Выберите все пути и установите для них толщину обводки равной нулю.Цель состоит в том, чтобы предварительно просмотреть карандаш в целом. Что ж, свет, изображенный в корпусе карандаша, выглядит нормально, но металлическое кольцо и заостренный конец нужно немного отрегулировать.
4. Измените тип градиента этого пути на линейный, чтобы создать новый градиент, как показано на рисунке ниже. Надеюсь, вы сможете создать градиент, как у меня. Если у вас не получилось сделать это самостоятельно, просто скачайте прикрепленный исходный файл.
5. Металлическое кольцо должно плотно прилегать к ластику. Для этого используйте инструмент «Добавить точку привязки» (+) и добавьте еще 4 точки привязки к двум концам контура металлического кольца, а затем удалите 2 угловые точки.Результат выглядит так:>
6. Путь металлического кольца также должен быть немного толще. Самый простой способ — использовать команду «Смещение контура». Выделите путь и затем перейдите в Object> Path> Offset Path. В диалоговом окне «Путь смещения» установите значение смещения равным -1pt или меньше. Вы можете проверить предварительный просмотр, чтобы увидеть результат, и нажать ОК. Примечания:
   • Используйте путь «Смещение», чтобы дублировать контур металлического кольца; измените градиент металлического кольца (расположенного под дубликатом), чтобы придать глубину.
   • Каждый раз, когда используется путь смещения, имя дубликата по умолчанию — «путь».
   • Если значение смещения минус (-), дубликат останется наверху.
7. Примените радиальный черно-серо-белый контур к металлическому кольцу, нажмите G и перетащите инструмент «Градиент» по контуру, пока не получите результат, как на картинке ниже: Хорошо, металлическое кольцо выглядит приемлемо для глаза. Теперь давайте поработаем с заостренным концом или кончиком карандаша.
8. Отмасштабируйте контур кончика карандаша так, чтобы он прилегал к корпусу карандаша.
9. Как и на скетче, здесь для контура карандаша нужен световой элемент, расположенный прямо в его центре, составляющий его форму. Прежде чем сделать это, помните, что значок должен быть сохранен в формате EPS8, и здесь не используются эффекты, режим наложения или регулировка непрозрачности, а используются только контуры или форма наложения. Чтобы упростить задачу, используйте инструмент «Перо» и нарисуйте контур поверх кончика карандаша.
10. Измените направление и угол градиента, пока острие карандаша не примет правильную форму.
11. Нарисуйте грифель карандаша с помощью инструмента «Перо».
12. Добавьте выделение ластику с помощью инструмента «Перо» и измените угол градиента, чтобы предложить форму ластика.
13. Используйте команду «Смещение пути», чтобы дублировать путь ластика. Измените оттенок градиента контура ластика, чтобы контур выглядел резче.

5.2. Настройка цвета

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

1. Выберите пути тела карандаша (включая 3 пути).Перейдите в меню «Правка»> «Настройка цветового баланса», установите флажок «Просмотр и преобразование» в диалоговом окне «Настройка», а затем переключитесь в режим RGB.
2. Перетащите ползунок, чтобы изменить значения красного / зеленого / синего (на любой цвет, который вам нравится).
3. Выберите ластик и повторите шаг 2.
4. Выберите заостренный конец и измените его цвет (проделайте то же самое). Карандаш теперь выглядит более плоским, чем был изначально. Это потому, что градиент потеряет черный цвет после настройки цветового баланса. Что мы собираемся сделать дальше, так это вернуться к трем элементам карандаша и добавить черный цвет к их градиенту, чтобы формы элементов отображались более четко.
5. Возьмите ползунок градиента и переместите основной цвет ближе к белому. В палитре «Цвет» перетащите этот цвет вниз на палитру «Градиент». Выберите только что перетаскиваемый цвет (щелкнув ползунок градиента) и измените его значение на 0-0-0 (убедитесь, что выбран цветовой режим RGB). Вы можете использовать цветовую палитру, чтобы изменить цвет градиента.

6. Более глубокие детали и соответствие стилю

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

Мы почти закончили. Тем не менее, как вы видите, грифель карандаша выглядит очень острым, что создает ощущение опасности. Итак, мы должны изменить эту коническую точку на усеченную пирамиду. Кроме того, нам нужно добавить несколько дополнительных контуров к корпусу карандаша в качестве выделенных частей (используя команду «Смещение контура»). Это необходимо, потому что внешний корпус карандаша представляет собой очень блестящее покрытие.

И результат:

После поворота значка на 45 градусов:

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

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

Окончательный результат:

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

В любом случае с Photoshop вы можете сделать следующее:

1. Экспортируйте вектор в PNG, затем откройте его в Photoshop. Измените цвет и уровень освещенности изображения значка, используя «Кривые», «Цветовой баланс» или «Автоуровни» (в меню «Изображение»> «Коррекция») или используя другие методы, которые вы знали в Photoshop.После редактирования сохраните файл изображения.
2. Перетащите отредактированное изображение в Illustrator, затем с помощью инструмента «Пипетка» выберите три основных значения цвета — яркость, средний и темный, и после каждого выбора перетаскивайте цвет в палитру «Образцы» для сохранения.
3. Перетащите выбранный цвет в палитру «Градиент», чтобы создать собственные красивые градиенты, а затем примените его к значку. Некоторое время я так поступал, а теперь у меня есть полезная библиотека градиентов, которую я всегда использую для стилизации своих наборов значков.

7. Исходные файлы

Вы можете бесплатно скачать исходные файлы иконки в форматах .eps и .ai:

Распространенные ошибки

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

• Создайте отражение и блики на значке , нарисовав новый путь поверх исходного пути и добавив к нему белый или черный цвет, а затем изменив его непрозрачность. Таким образом, цвет объекта станет серебристо-серым, потеряв прежнюю четкость, хотя он все еще может достичь глянцевитости.
• Используйте яркие модели карандаша и круглого цилиндра , чтобы легко принять форму значка карандаша с помощью только одного градиента. Но рисование значков — это рисование всего самого знакомого и типичного, а также рисование объектов, которые лучше всего отражают действие или жест значка. Значок карандаша круглой формы вряд ли может иметь острые углы и четкие блики.
• Положитесь на градиент формы призмы , используя путь для демонстрации тела карандаша, а затем примените градиент, который делает объект похожим на форму призмы к пути.Это может быть простой способ, но его очень сложно редактировать, а градиент имеет тенденцию быть перекосным.
• Используйте blendshape, чтобы отбросить тень в EPS8, и тень изменится с белого на черный без прозрачности. Когда тень отбрасывается на фон с цветом, отличным от белого, появится белый контур.

Сравнение дизайна

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

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

Рисунок 1

На рис. 2 показаны значки папок в двухточечной перспективе. Дизайн выглядит почти идеально, с хорошей концепцией, законченной и правильной композицией. Это также хороший дизайн, поскольку он точно отображает направление света, который исходит сверху, и отбрасывает красивую тень, а отражение света на объекте-папке великолепно. Тем не менее, проблема пикселизации возникает на верхних краях папок, из-за чего значок размером 24×24 пикселей теряет резкость.

Рисунок 2

Заключение

Существует множество различных подходов к дизайну значков, некоторые используют 3D-приложение, другие используют Firework или Photoshop, но цель создания значков одна и та же, какие бы инструменты мы ни использовали. Нам нужно сохранить единообразие каждого значка в наборе , а также сохранить узнаваемость и простоту. Как мы уже говорили в начале этой статьи, это всего лишь несколько основных шагов и принципов создания красивой и четкой иконки.Надеемся, вам понравится этот урок. Если вы чувствуете необходимость узнать больше, следите за бесплатной книгой по дизайну иконок, которую мы сделаем общедоступной в июле.

Draw Icon PNG изображения | Векторные и PSD файлы

5120 * 5120

1000 * 1155

Drawcon — Нарисуйте собственные значки приложений

Политика конфиденциальности

Джо Блау создал приложение Drawcon как коммерческое приложение.Эта УСЛУГА предоставляется Джо Блау и предназначена для использования «как есть».

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

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

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

Сбор и использование информации

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

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

Ссылка на политику конфиденциальности сторонних поставщиков услуг, используемых приложением

Службы Google Play

Данные журнала

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

Файлы cookie

Файлы cookie — это файлы с небольшим объемом данных, которые обычно используются в качестве анонимных уникальных идентификаторов. Они отправляются в ваш браузер с веб-сайтов, которые вы посещаете, и хранятся во внутренней памяти вашего устройства.

Этот Сервис не использует эти «куки» явным образом. Однако приложение может использовать сторонний код и библиотеки, которые используют файлы cookie для сбора информации и улучшения своих услуг. У вас есть возможность принять или отклонить эти файлы cookie и узнать, когда файл cookie отправляется на ваше устройство.Если вы решите отказаться от наших файлов cookie, возможно, вы не сможете использовать некоторые части этого Сервиса.

Поставщики услуг

Я могу нанимать сторонние компании и частных лиц по следующим причинам:

Для облегчения нашего обслуживания;
Для предоставления Услуги от нашего имени;
Для оказания услуг, связанных с Сервисом; или
* Чтобы помочь нам проанализировать, как используется наш Сервис.

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

Безопасность

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

Ссылки на другие сайты

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

Конфиденциальность детей

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

Изменения в настоящей Политике конфиденциальности

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

Эта политика действует с 2020-10-02

Свяжитесь с нами

Если у вас есть какие-либо вопросы или предложения относительно моей Политики конфиденциальности, не стесняйтесь обращаться ко мне в Joe Blau.

Как разработчики могут рисовать значки для приложений iOS

Создание иконок для программистов — колдовство.

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

• Босс нанял жокея Photoshop из печатных СМИ фона, который не понимает, что такое пиксели.
• Оказалось, что прокат для мобильного UX был украден у независимой консалтинговой фирмы, предыдущая работа которой заключалась, по сути, в разработке веб-сайтов — таким образом, она не знала, что определенные активы, как ожидается, будут иметь определенные размеры, и каждый из них должен быть предоставлен с разным разрешением. .
• Есть доктор философии «Эксперт UX», который отлично разбирается в A / B / C-тестировании, а также в написании и цитировании научных статей. Однако этот эксперт может рисовать кнопки только в виде текста в прямоугольниках и не более того.

Все три вышеперечисленного происходили в разное время в моей корпоративной карьере. Вдобавок ко всему, второй случай (веб-дизайнер нанят как Mobile UX ) кажется обычным делом за пределами Кремниевой долины. Если это произойдет и с вами, ваша обязанность как разработчика для iOS — просветить своих коллег о возвышенностях платформы.

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

К сожалению, созданные из разных источников объекты не будут хорошо смотреться вместе.Если вы создаете приложение для iOS и получаете символы кнопок из разнородных источников, вероятность того, что ваше приложение будет выглядеть как лоскутное одеяло, составляет 99,99%. Это потому, что эти пуговицы принадлежат разным художникам, и у них есть свои собственные стили рисунков.

Чтобы кнопки панели инструментов, кнопки панели вкладок или любые другие глифы в вашем приложении соответствовали в гармонии , вам необходимо выполнить одно из следующих действий:

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

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

«Но разработчики не могут создавать графику», — могли бы подумать вы. Расслабиться. Все навыки можно изучить. Кроме того, здесь вы не пытаетесь конкурировать с Пикассо или Дали, а создаете полезную графику, которая выглядела бы достаточно хорошо для вашего приложения.

Вот пошаговое руководство о том, как разработчик может создавать глифы для приложений iOS. Создание значков кнопок — это не колдовство , но и не наука. Это комбинация между art и Engineering — ничем не отличается от программного обеспечения для программирования.

Предварительные требования

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

Описание процесса

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

1. Ключевые слова мозгового штурма, описывающие базовые функции.Попробуйте найти список коротких английских фраз (в идеале, всего одно слово, но допустимы 2–3 слова), которые пользователи будут использовать для описания того, что делает кнопка.
2. Выполните поиск в Интернете по этим ключевым словам, чтобы найти формы , связанные с ними. Мои любимые места для начала — flaticon.com и findicons.com. Однако в противном случае вы также можете воспользоваться поиском изображений Google . Помните, что вам нужно просто формы и , а не окончательное изображение .Выберите изображение, которое является наиболее информативным, но при этом простейшим (то есть имеет как можно меньше деталей) в качестве изображения модели . Помните, что они должны использоваться как изображения размером с большой палец, поэтому детали часто теряются.
3. Найдите в Руководстве по человеческому интерфейсу iOS (HIG) размер изображения, а также любые конкретные проблемы, о которых вам нужно позаботиться. Обратите внимание, что кнопки панели инструментов , кнопки панели вкладок и кнопки панели навигации имеют свои особые требования к размеру изображения.
4. Найдите сетку значков и используйте ее последовательно во всем приложении. Вы можете использовать множество бесплатных значков iOS или даже значок-заполнитель , который Springboard использует, когда приложение не имеет значка. Моя любимая сетка значков — это сетка значков Yosemite от MartianCraft, в частности квадратный значок версии для использования с кнопками панели инструментов и версия круга с значками панели вкладок.
5. Создайте файл шаблона для всех глифов значков вашего приложения для одного и того же типа.Например, создайте один файл шаблона для всех значков панели инструментов и другой файл шаблона для значков панели вкладок. Таким образом, при создании глифа значка вы всегда должны начинать с копирования соответствующего файла шаблона.
   1. Запустите свое любимое приложение для векторного дизайна.
   2. Создайте рисунок для целевого значка с разрешением 1x точек. Это будут векторные изображения с разрешением 72 точки на дюйм.
   3. Подложите сетку значков в непечатаемый, неэкспортируемый слой и измените его размер на всю поверхность рисования.
   4. Используя сетку значков и HIG в качестве ориентира, создайте направляющие линии для базовой линии и высоты крышки. Вертикальная середина обычно является средней линией, тогда как высота восходящего элемента является самой верхней частью изображения. Помните, что вы действительно создаете пользовательский символ , который символизирует функциональность кнопки, то есть метрики, взятые из дизайна типографики. Однако в глифах нижние элементы должны быть крошечными .
6. Дублируйте файл шаблона для использования в качестве файла изображения кнопки.Вы должны назвать файл так, как вы собираетесь ссылаться на него в коде. Это упростит поиск и обновление в дальнейшем.
7. Вставьте изображение модели , которое вы обнаружили ранее. Поместите его также на непечатаемый, неэкспортируемый слой. Это будет работать аналогично сетке значков.
8. Обведите контур изображения модели, используя одноточечные черные линии. Вы создаете изображение черного поверх прозрачного . Начиная с iOS 7, глифы кнопок должны состоять из тонких геометрических линий , поэтому вы должны следовать этому при перерисовке изображения модели.
9. Залейте темные области фигуры черным. Точно так же у вас также могут быть серые заливки как полупрозрачные черные заливки. Не включайте другие цвета.
10. Наконец, экспортируйте изображение в версии 2x и 3x с разрешением 144dpi и 216dpi соответственно.
11. При желании продублируйте изображение и создайте инверсию глифа. Здесь черные области становятся прозрачными и наоборот. Позаботьтесь о том, чтобы контур и форма оставались идентичными (то есть не меняли основную форму) и не заполняли фон изображения.Сделайте это, только если вам не нравится, как iOS инвертирует исходное изображение при нажатии кнопки или выборе панели вкладок.

Пример

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

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

Ключевые слова мозгового штурма

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

В поисках фигур

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

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

Получение размеров

В разделе Custom Icons iOS HIG указано, что это размеры обычной панели вкладок icon:

• Поверхность рисования: ширина 31pt, высота 28pt.
• Размер внутреннего квадрата: 23 х 23 пт.
• Размер внутреннего круга: 25 на 25 пт

Из этого я создал монтажную область размером 31 × 28 точек с разрешением 72 dpi. Я буду рисовать изображение в 1x и полагаться на Affinity Designer, чтобы создать из него варианты 2x и 3x.

Сетка и шаблон

Для этого я использовал сетку значков кругов MartianCraft. На основе сетки и HIG я разместил эти горизонтальные направляющие:

• 1 пт вверху как зажим .
• 3 pt как высота крышки .
• 25 пунктов в качестве базового уровня

Эти измерения основаны на обратной декартовой координате , в которой точка (0, 0) находится в верхнем левом углу.

Я создал специальный слой для сетки под названием Tracing , затем установил для слоя значение , непрозрачность 50%, и режим композиции Difference . Я быстро переключился на Export Persona и сделал слой невидимым при экспорте, чтобы случайно не включить сетку в окончательное изображение.

Образец изображения

Выбрав в качестве формы песочные часы , я затем поискал по flaticons.com и выбрал самый простой, но все же привлекательный черно-белый символ песочных часов, который я смог найти. Затем я вставил его в свой файл Affinity Designer прямо над сеткой значков на том же неэкспортируемом слое. Наконец, я изменил размер модели песочных часов так, чтобы нижняя поверхность находилась на направляющей базовой линии .

Повторное рисование песочных часов

Чтобы соответствовать геометрической форме значков iOS, я перерисовал форму песочных часов, используя два равнобедренных треугольника, противоположных друг другу и перекрывающихся под острым углом.Эти треугольники представляют собой очертания толщиной в 1 точку. Затем на двух основаниях (нижнем и верхнем) я наложил короткие стороны этих треугольников прямоугольниками толщиной в две точки, обозначая усиленные верхнюю и нижнюю поверхности песочных часов. Наконец, два треугольника соединяются вместе, образуя отверстие в середине луковицы, через которое может проходить «песок».

Мне пришло в голову, что в современных песочных часах песок не используется. Вместо этого они обычно используют цветные жидкости разной плотности.Таким образом, я нарисовал содержимое песочных часов как «кляксу», что является намеком на эти масляные очки. Это было сделано от руки с помощью графического планшета Wacom Intuos. (Кстати, большинство песочных часов в настоящее время измеряют не в час , а обычно три минуты, но давайте оставим это для другой темы.)

Создание инверсии

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

Но обратите внимание, что капля разъедает контур. При входе в режим просмотра пикселей, режим делает эту проблему еще более ясной — контур становится слишком тонким и размытым (этот режим просмотра пикселей также является причиной того, что Affinity Designer подходит для этой задачи).Это легко исправить. Просто продублируйте исходный контур (исходящий из двух треугольников) и переместите его на передний план, удалите заливку и установите черный цвет контура. Это закроет контур, содержащий капли, и убедит зрителя в том, что «стеклянная стена» все еще существует.

Получение растровых изображений

И последнее, но не менее важное: экспортируйте версии изображения 2x и 3x как PNG, которые готовы для импорта в каталог активов Xcode.Наконец, протестируйте его внутри реальной панели вкладок с помощью iOS Simulator. На скриншоте ниже я разместил три элемента вкладок, первые два — это изображения таймера, нарисованные в сообщении, а последний — встроенный в iOS элемент панели вкладок «Избранное» для сравнения. Вкладка в центре выбрана, поэтому отображается «перевернутая» версия значка.

Изображение выше было взято из снимка экрана симулятора iOS, импортировано в Affinity Designer и немного увеличено с отображением линий сетки.Кроме того, я разместил инструкции, чтобы проверить, что «базовые линии» наших новых значков хорошо совпадают со встроенными.

Испытай себя

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

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

Кстати, файл Affinity Designer, содержащий готовую иконку, можно скачать отсюда: BSTImerTabBarIcon.zip

Как создать значок веб-сайта в CorelDRAW

1. Обучение
2. Практические руководства
3. Сделайте значок веб-сайта

Веб-значок, также известный как значок, значок сайта или значок веб-сайта, представляет собой небольшое изображение или логотип на вкладке веб-сайта.Дизайн значков так же прост, как настройка страницы, добавление иллюстраций и использование параметра «Экспорт» в CorelDRAW для создания файла .ICO. Веб-значки используются везде, от рабочего стола Windows до устройств iOS, OSX или Android, и все они имеют определенные особенности. требования.

1. Установите размер страницы

Размер документа зависит от размера изображения.В диалоговом окне «Новый документ» ( Файл> Новый ) в поле Имя : введите имя файла как ‘4Sale’ . Затем в раскрывающемся списке Preset destination выберите Web . Вы заметите, что это изменило единицу измерения на пиксели и Разрешение рендеринга на 96 точек на дюйм. В разделе «Размер» установите Width равным 130 и Height равным 130. Щелкните OK .

2.Добавление графических элементов

Из ( Файл> Импорт ) перейдите туда, где находится логотип, и импортируйте его. Разместите логотип на странице и увеличьте его размер до 128 x 128.

3. Экспортируйте значок

При экспорте изображения, которое будет использоваться в качестве значка, рекомендуется использовать файл .ICO, хотя есть некоторые приложения, которые принимают другие форматы.Выберите дизайн и из ( Файл> Экспорт ). В раскрывающемся списке Сохранить как тип выберите ICO — Ресурс значков Windows 3.x / NT (* .ico; *. Exe; *. Dll Убедитесь, что существует установите флажок Выбрано только . И нажмите Экспорт . Откроется диалоговое окно Convert to Bitmap . В диалоговом окне Convert to Bitmap подтвердите значения по умолчанию и нажмите OK . Следующим открывается диалоговое окно Диалоговое окно «Преобразовать в палитру». Здесь вы можете выбрать тип палитры, которая должна быть реализована при создании файла ico.Убедитесь, что в раскрывающемся списке «Палитра» выбрано значение Оптимизировано . Это обеспечит максимально плавные переходы между цветами.

CorelDRAW не просто создает значки веб-сайтов

Ознакомьтесь с некоторыми другими функциями графического дизайна в CorelDRAW Graphics Suite, такими как «Как сделать этикетку», «Как сделать флаер», «Как создать плакат» и многое другое! Создавайте высококачественные дизайны в увлекательной и простой в использовании программе для графического дизайна и сделайте свою работу ярче, чем когда-либо.

Работа с иконками Azure в рисовании.io (diagrams.net)

Время от времени мне нужно нарисовать схему решения или архитектуры платформы, и я получаю от этого удовольствие! Обычно я трачу на них больше времени, чем планировал 🙄. Есть много инструментов для создания этих диаграмм, и в последнее время я в основном использую draw.io, и мне это нравится 🤩. Хотите узнать, как убедиться, что у меня есть последние значки Azure для работы? Читать дальше!

tl; dr ^ⓘ используется кем-то, кто написал большой пост / статью / что угодно, чтобы показать краткое изложение своего сообщения, так как оно может быть слишком длинным
Используйте этот URL, чтобы напрямую открыть розыгрыш.io с необходимыми библиотеками значков Azure, загруженными и готовыми к использованию! Проверьте все библиотеки в моем репозитории GitHub.

Прежде чем я продолжу, знаете ли вы, что файл draw.io с открытым исходным кодом будет переименован в diagrams.net? Это из-за домена .io. Вы можете найти ссылку на дополнительную информацию о тонкостях в конце этого сообщения в блоге.

Интернет-драгоценный камень

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

Но недавно я наткнулся на онлайн 💎: самую большую доступную коллекцию значков Azure (по крайней мере, то, что я смог найти)! Коллекция объединяет несколько онлайн-источников в единую коллекцию. Вы можете просматривать его в Интернете и загружать отдельные значки или целиком. И самое лучшее, что он актуален и, надеюсь, будет и дальше (вы, конечно, никогда не узнаете)! Его создал Бен Коулман , и вы можете найти веб-интерфейс здесь: https: // code.benco.io/icon-collection/. Его репозиторий с иконками и даже инструменты, используемые для создания и управления этой коллекцией, доступны на GitHub: https://github.com/benc-uk/icon-collection.

Как использовать коллекцию иконок в draw.io (diagrams.net)

Я упростил вам задачу: я создал несколько пользовательских библиотек со всеми значками! Я загрузил их на свой GitHub, и вы можете использовать их несколькими способами.

Первый и самый простой вариант — просто запустить диаграммы.net с URL-адресом с правильными библиотеками, включенными в качестве параметров URL-адреса:

• Щелкните здесь, чтобы открыть app.diagrams.net с основными библиотеками .
• Щелкните здесь, чтобы открыть app.diagrams.net со всеми 9 библиотеками
  (загрузка в приложении займет минуту, подождите!) .

Вы также можете открыть draw.io (diagrams.net) и выполнить следующие действия, чтобы вручную включить библиотеки.

Сначала перейдите в мой репозиторий GitHub README, проверьте список URL-адресов для библиотек и скопируйте URL-адрес библиотеки, которую вы хотите использовать:

Затем щелкните меню «Файл».Щелкните «Открыть библиотеку из». Щелкните «URL…».

Затем введите URL-адрес библиотеки и нажмите «Открыть»:

И через несколько секунд (в зависимости от вашей пропускной способности) библиотека готова к использованию:

Повторите это для всех библиотек, которые вы хотите включить.

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