Как вставить иконки в фотошопе
Как вставлять SVG иконки в Фотошоп
Сразу скажу — НИКАК!
Вести с полей: наш любимый Флатикон принялся выкладывать растрированные PSD-файлы своих иконок вместо векторных PSD-файлов, как он делал все эти годы, и за что я его так обожал. Сначала я думал, что это приняло массовый характер, но, приложив лопату глубже, я увидел, что векторные псд-шки там всё-таки еще есть. Хотя надолго ли.
И если тебя в свете этих событий научили качать с Флатикона SVG-версию иконки и вставлять её в Фотошоп, то тебя научили неправильно! Сейчас я покажу, к каким проблемам в дальнейшей верстке сайта это приводит по сравнению с импортом векторного PSD на примере вот этой иконки.
Проблема
Вот я скачал и вставил в Фотошоп её SVG и PSD-версии, применив к обеим градиент через стили слоя:
Уже сейчас видно, что из PSD я вытащил чистый вектор, со всеми его возможностями по модифицированию. А SVG вставился как смарт-объект. Это уже должно натолкнуть тебя на мысль, что с ним что-то не ладно.
Например, если попыться «вскрыть» его двойным щелчком, то откроется браузер с этой иконкой! Как ты её изменишь теперь тут, если захочешь?
Теперь давай экспортируем обе иконки в SVG. Ведь верстальщику надо вставлять именно такой формат иконок в верстку сегодня, если сами иконки подходят для этого (то есть если они простые, а не как сложные иллюстрации).
И вот тут-то и вылазит главный косяк такого SVG смарт-объекта — если мы его увеличим, то обнаружим, что на самом деле он выглядит как растр! Он распадается на пиксели при изменении размера иконки! А это значит, что вся его мнимая SVG-шность теряет всякий смысл. Ведь такой формат нам нужен ради четкости иконки в любых размерах на любых экранах любой плотности.
И только лишь чистый вектор, экспортированный из Фотошопа как SVG, даёт нам именно то, что мы с тобой хотим — четкость в любых ситуациях, как видно на иконке слева.
А давай мы еще в их код залезем для прикола!
Очевидный вывод — импорт SVG не для Фотошопа! Он для Фигмы, Скетча — да, именно туда его и нужно. Но только не в ФШ, умоляю!
Решение
Хорошо, а как теперь быть, если твоя страсть к Фотошопу неприклонна, и тебе нужно рисовать сайт всенепременно в нем? При этом чтобы иконки внутри были нормально-векторными? А Флатикон, гад, дает только растровый PSD, как вот у этой иконки?
В таком досадном случае качаем EPS-версию иконки, и достаем из-за пазухи своего верного друга, ой, то есть, друга Фотошопа — Иллюстратор.
После этого может произойти две вещи: либо иконка вставится нормально, либо вставится сплошной залитый квадрат.
Во втором случае паниковать не нужно. Просто переключайся в режим прямого выбора векторных точек (клавиша A), выдели любую лишнюю точку квадрата (например, верхнюю левую), нажми Delete (она удалится), а потом еще раз Delete (удалятся все другие, автоматически выбранные точки этого лишнего контура).
И вот у тебя в твоем любимом PSD вставлена нормальная, правильная, чистая векторная иконка. Аллилуйя!
Только не запихивай её в смарт-объект потом. Ну, ты же теперь уже знаешь.
😉 А если вставляешь иконки в Фигму, то зацени такой лайфхак для этого дела.
Как сделать иконки для социальных сетей в фотошопе
В этом уроке вы узнаете, как создать плоские флэт иконки социальных сетей.
То, что вы будете создавать:
Создавать плоские иконки мы начнем с фона, потом добавим иконкам эффекты, чтобы придать им оригинальность, далее нарисуем длинные тени. Для повторения урока вам понадобится Photoshop CS3 или более поздняя версия.
Ресурсы:
Шаг 1
Создайте новый файл (Ctrl + N) размером 500 × 400 пикселей.
Создайте новую группу (CTRL+G) и назовите её «Фон».
Шаг 2
Заполните фон цветом # e7e9ea с помощью инструмента Заливка (Bucket Tool).
Шаг 3
Чтобы добавить больше эффектов на задний план, мы добавим градиент. Нажмите на иконку Корректирующий слой (Adjustment Layer) и выберите Градиент (Gradient), используйте следующие настройки:
Режим наложения слоя Мягкий свет (Soft Light) | Непрозрачность: 25%
Шаг 4
Создайте новую группу и назовите её «symbols».
Шаг 5
Прежде чем начать работу, нам нужно настроить меню Линейки и Сетки (Rulers and Grids). Перейдите в меню Вид-Линейки (View–Rulers) и Вид-Показать-Сетки (View—Show—Grids). Вот мои настройки дляЛинеек и Сеток (их можно открыть, перейдя в Редактирование-Настройки (Edit-Preference):
Чтобы создать Направляющую линию, нужно просто щелкнуть и перетащить её из линейки. Для создания вертикальной направляющей перетаскивайте из вертикальной линейки и наоборот. Вот как я разделил холст (каждый значок равен 50 × 50 пикселей и расстояние между каждым значком 25 пикселей):
Шаг 6
В этом уроке мы работаем с помощью шрифта Awesome, вы можете добавить настраиваемые иконки для вашего сайта. Как правило, это делается путем размещения CSS шрифта на ваш сайт, но так как мы работаем с Photoshop, нам нужно скопировать каждый значок, который вы хотите использовать из шпаргалки. Зайдите на страницу, выберите значок, который вы хотели бы нарисовать. Я использовал иконки для следующих (социальные сети) сайтов: Twitter; facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.
Шаг 7
После того как вы нашли значок, который хотели бы использовать, скопируйте его (Выделите ее затем щелкните правой кнопкой мыши-Копировать)
Затем вернитесь в Photoshop и выберите инструмент Текст (Text Tool) на панели инструментов. Измените настройки шрифта, как показано на рисунке:
Теперь вставьте значок, который вы только что скопировали. (Щелкните правой кнопкой мыши-Вставить)
Шаг 8
Повторите предыдущий шаг, пока не вставите все значки, которые вы хотели бы использовать.
Шаг 9
Создайте новую группу и переименуйте её в «icon bg», поместите группу ниже группы «symbols».
Шаг 10
Создайте новый слой и поместите его в группу, созданную в предыдущем шаге. Я переименовал слой в «icon bg».
Шаг 11
Используя инструмент Прямоугольник с округленными углами (Rectangular Circle Shape Tool) (расположенный на панели инструментов ниже инструмента Текст (Text Tool)) я создал фон иконок,
Вот все цвета, которые я использовал:
Twitter: # 6bd1f4;
Facebook: # 5a93cb;
Tumblr: # 3c6a9c;
Google +:#e44940;
Instagram:#9bd29d;
Youtube:#f4504c;
Twitch:#a96db6;
Dropbox:#81d5ed;
Deviantart:#6e8e61;
Pinterest:#f25f5f;
Skype:#67d5f4;
Feed:#e9951d;
Вы можете использовать эти цвета, а можете использовать цвета на свое усмотрение – так работа приобретет оригинальность.
Если вам не нравится, как выглядят прямоугольники с округленными краями, вы можете выбрать другую форму, например, квадрат или круг. Чтобы сделать идеальный круг или квадрат, не забудьте удерживатьклавишу SHIFT в момент их создания.
Шаг 12
Если вы довольны результатом на данном этапе, вы можете идти дальше, но если хотите придать живости иконкам, давайте продолжим улучшения. Начнем со стиля слоя Тень (Drop Shadow). Откройте группу «symbols», выберите одну из иконок и щелкните значок Fx–Тень (Fx-Drop Shadow). Используйте следующие параметры:
Шаг 13
Повторите предыдущий шаг с остальными значками. Для того, чтобы сделать вашу работу намного проще, щелкните правой кнопкой мыши на слое-Копировать стиль стоя (-Copy Layer Style). Затем выберите остальные слои с иконками, щелкните правой кнопкой мыши-Вставить стиль слоя (-Paste Layer Style).
Шаг 14
Теперь добавим внутреннюю тень на задний план каждого значка. Открываем группу «icons bg», выбираем слой с иконкой, нажимаем на значок Fx-Внутренняя тень (Fx-Inner Shadow). Используйте следующие параметры:
Шаг 15
Создайте новый слой и назовите его «Gloss Effect». Измените цвет переднего плана на #ffffff; и при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) создайте несколько прямоугольников, наполовину меньше размера иконок (приблизительно 50×25 пикселей). Сделайте это для всех иконок.
Затем измените режим наложения на Мягкий свет (Soft Ligh), снизьте непрозрачность (Opacity) слоя до 20%, а заливку (Fill) до 80%.
Шаг 16
Отключите видимость слоя «Gloss Effect». Создайте новый слой и назовите его «Long Shadow». Этот шаг является немного сложнее по сравнению с остальными эффектами. Поместите новый слой ниже слоя «Gloss Effect».
Шаг 17
Возьмите инструмент Полигональное лассо (Polygonal Lasso Tool) и начните создавать прямоугольную тень, касаясь ребра иконки только с правой нижней стороны, затем сделайте диагональную линию, пока она не достигнет нижнего правого края фона значка, сделайте прямую линию, пока она не достигнет центра фона, затем соедините линии. На изображении вы можете рассмотреть более наглядно, как рисовать длинную тень.
Шаг 18
Последний шаг! Уменьшите непрозрачность (Opacity) слоя с тенью до 10%, и заливку (Fill) до 0%.
Теперь Нажмите на иконку Fx и выберите Наложение цвета (Color Overlay). Используйте следующие параметры:
Теперь выберите Наложение градиента (Gradient Overlay) и используйте эти настройки:
Финальные результаты:
Если вы нашли ошибку/опечатку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как создать иконки с Flat-дизайном в Photoshop
Flat-дизайн это относительно новое направление в разработке веб-интерфейсов. iOS и даже Windows постепенно адаптируются под этот стиль, и, в скором времени, почти все (если вообще не все) веб-сайты переймут данный подход.
Исходя из вышесказанного, вопрос напрашивается сам собой: « Почему бы не начать переработку интерфейса уже сегодня »? Так вы сможете быть на шаг впереди остальных!
Вы можете подумать, « С чего же мне начать? » Конечно, реконструкция дизайна сайта это адский труд. Данная статья как раз и посвящена этому – она будет вашей рукой помощи в этом нелегком деле.
Хорошим первым шагом в деле переработки скевоморфного дизайна вашего сайта будет изменение изображений, используемых в элементах интерфейса, в стиле flat-дизайна. Это, возможно самый простой шаг, потому что он практически не требует переработки кода.
Все, что вам нужно, это креативность и знание графических программ. Скорее всего, на вашем сайте достаточно много иконок, которые нужно привести flat-виду. Это может отнять много времени. Разумеется, в первую очередь необходимо переработать самые важные из них: те, которые появляются на всех страницах. Можно начать с логотипа или, что еще лучше, иконок навигации.
В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.
Вот наш конечный результат:
Откройте Photoshop. Создайте новый файл, использовав пресет « Фото » (Photo) ( 10×8 inch, 300 DPI, прозрачный фон, цветовая схема RGB ).
На данном этапе вы уже можете сохранить и использовать изображение. Оно уже достаточно неплохо напоминает иконку домашней страницы во flat-стиле. Но стоит пройти еще пару шагов и добавить длинную тень.
Далее, используя инструмент « Перо » с цветом #000000 нарисуйте фигуру. Начните её с правого угла крыши, продолжите и сделайте так, как показано на рисунке ниже:
Отправьте тень на самую нижнюю позицию и растрируйте этот слой. Используя инструмент « Волшебная палочка » (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I ). Не снимая выделения, выберите слой с тенью и нажмите кнопку « delete ».
Иконка готова. Чтобы сохранить её, нажмите « Файл>Сохранить для веб и устройств.. » (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S ). Сохраните иконку в формате PNG-24 с включенной прозрачностью.
Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.
Теперь, займемся иконкой Post :
Ниже вы можете видеть иконки About Me и Contact Me :
Надеюсь, что после прочтения данного руководства, вы начнете переделывать свои веб-сайты. Как я уже говорил, это очень трудоемкий процесс, но он неизбежен, поэтому не стоит этому сопротивляться.
Напоминаю, что это всего лишь руководство. Рекомендую хорошенько поэкспериментировать с данным материалом. Постарайтесь быть настолько креативным, насколько это возможно.
Ограничением может быть лишь ваш ум. Вы не знаете, насколько далеко можете зайти, если освободитесь от ограничений.
Использование Font Awesome в Photoshop
Всем привет! Сегодня я расскажу, как работать с иконочными шрифтами Font Awesome. Написание данного поста побудило меня на, то что я стал видеть много макетов где дизайнеры используют картинки вместо иконочного шрифта! Так делать не нужно! И не нужно забывать, что после создания макета его еще нужно будет, кому то верстать.
И так перед тем как начать использовать Font Awesome его сначала нужно скачать и установить в систему. Установку буду производить на системе Windows думаю, что для системы MacOS процедура будет похожей.
Скачивание и установка. Для того чтобы скачать этот шрифт переходим по ссылке — http://fontawesome.io нажимаем кнопку Download и нажимаем на No thanks, just download Font Awesome 4. Сохраняете архив в любое удобное место на Вашем ПК. Потом разархивируем архив в любое место. В папке будут находиться несколько папок и файл. Нам нужна папка с названием fonts, а все остальные используются для CSS и препроцессоров – грубо говоря, все это используется для верстки сайта. И так продолжим, заходим в папку fonts и двойным щелчком мыши открываем первый файл с названием FontAwesome. Во всплывающем окне нажимаем «Установить» в верхней части экрана и дожидаемся завершения установки. Все, установка Font Awesome успешно завершена!
Использование Font Awesome. Для вставки нужной иконки переходим сюда — http://fontawesome.io/cheatsheet/, выбираем понравившуюся иконку, выделяем ее как обычный текст мышкой и правой кнопкой копируем. Запускаем Photoshop и выбираем инструмент «Горизонтальный текст», вставляем эту иконку. Не пугайтесь, если иконка отображается как квадратик. Чтобы это исправить нужно ее выделить и в названии шрифта начните вбивать название FontAwesome и иконка станет похожей на иконку. Теперь Вы сможете ее растрировать или использовать как смарт-объект, трансформировать, накладывать цвет и т.д.
Важно. После установки данный шрифт будет доступен в любых других программах, где используются шрифты. Например, тот же Word.
Всем спасибо за то, что до читали до конца, и я надеюсь, что данная публикация была Вам полезна.
С уважением, Максим.