Stroke gap icons как пользоваться в фотошопе
Вот и мы, друзья, с очередным отличным Photoshop-пособием - на этот раз по построению симпатичной плоской iOS 7-иконки попиксельной выверки. Кроме того, данное пособие поможет вам освоить полезные приёмы, следуя пошаговой инструкции по построению иконки попиксельной выверки формата 256 х 256 пкс для мобильных ресурсов.
Вот как будет выглядеть эта иконка в готовом виде.
Часть 1. Основа иконки
Оттените слой вовнутрь (Inner Shadow), как показано на рисунке ниже.
Теперь нанесём полноценную тень в основание иконки. Для этого вычертим прямоугольник через опцию Rectangle Tool (U) и подложим этот слой под слой “icon base” нажатием на клавиши Ctrl/Command + [ (открытая скобка). Повернём слой-прямоугольник на - 44 градуса и выровняем верхний край прямоугольника по диагонали, как показано ниже.
Теперь, чтобы тень у нас выглядела гуще под фигурой и постепенно бледнела по мере удаления от неё, добавим эффект объёмности (gradient), выраженный следующими значениями. Убедитесь, что значение заливки слоя (Layer Fill) задано у вас в 0 %, а значение матовости слоя (Layer Opacity) в 30 %.
Теперь основа иконки выглядит так.
Часть 2. Построение изображения листков блокнота
Теперь скопируем слой (Ctrl/Command + J) и урежем листок по нижнему краю на 16 пкс. Быстро уменьшить фигуру по высоте можно следующим приёмом: выбрать опцию направленного выделения Direct Selection Tool (A) и выделить слой фигуры кликом по нему. Затем, удерживая нажатой правую кнопку мыши, провести курсором в режиме опции Direct Selection Tool по нижнему участку контура, чтобы задать опорные точки. Задав их, нажать на клавиатуре клавишу со стрелкой вверх и подтянуть уголки вверх на 16 пкс.
Теперь вы видите, что линейки тянутся у вас за края бумаги, это выглядит странно. Чтобы спрятать лишние участки линеек из вида, кликните правой кнопкой мыши по слою линеек и выберите в панели опций наложение маски - Create Clipping Mask. Вы увидите, как отсекутся лишние "хвосты" линеек. Осталось приглушить матовость слоя линеек до 20 % для большей реалистичности и просто для красоты.
Вот как на данном этапе выглядит иконка.
Часть 3. Построение изображения карандаша
Конструируем залоснившееся пятнышко на стёрке. Рисуем небольшую вертикальную фигурку обтекаемой формы размером 10 х 40 пкс. Окрашиваем её в белый цвет и снижаем матовость до 30 %, помещаем её на слой стёрки вверху справа.
Пора пририсовать карандашу длинную тень. Рисуем чёрный прямоугольник от кончика карандаша до края стёрки. Размер ему можно задать 352 х 160 пкс. Присваиваем слою название “Long Shadow” ("Длинная тень").
Поскольку у нас уже сконструирован слой длинной тени от основания иконки, скопируем значения эффекта объёмности оттуда и присвоим их слою длинной тени от карандаша. Вот что у нас получится.
Что-то наша иконка с длинной тенью смотрится не ахти, да? Давайте внесём последний штрих. Выделим все слои изображения карандаша и слой его длинной тени, сложим их в папку под названием Pencil (Карандаш) - (Ctrl / Command + G). Выделим эту папку и последовательно откроем в меню опцию поворота объекта - Edit > Free Transform (Ctrl / Command + T), зададим величину угла совместного поворота объектов (Set Rotation) в -45 %. Настроим размещение объектов в папке Pencil - вынесем их в центр иконки.
Наша иконка готова
Надеемся, пособие вам понравилось. Конструируйте собственные плоские иконки, используя описанные в нём приёмы, делитесь ими в разделе комментариев. Если у вас есть ко мне вопросы, не стесняйтесь, спрашивайте.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Современные сайты все больше и больше начинают внедрять иконки, которые заключены в шрифт. Скажите очередной бессмысленный тренд! Но нет, такие иконки в отличие от растровых изображений грузятся быстрей, могут масштабироваться без потери качества и принимают любой цвет! Сейчас мы рассмотрим аналог популярных иконок Font Awesome, он менее известен, но далеко не хуже, знакомимся - Stroke Gap Icons. Stroke Gap Icons - содержит двести иконок так, что Вы можете не сомневаться, что Вам не хватит иконок. Обязательно нажимаем скачать, не сейчас так в следующий раз пригодятся.
HTML шаблоны сайтов
В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.
Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.
Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.
Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.
Добро! Последнее время для интерфейсов сайтов, которые я делаю, стал применять иконки, которые заключены в шрифт. Есть очень известный и популярный Font Awesome, но и есть его аналоги и некоторые из них с более качественным исполнением иконок или просто сделанных в другом стиле. Хочу поделиться с Вами менее известной сборкой иконок, заключенных в шрифте под названием Stroke-Gap-Icons.
Плюсы иконок-шрифта
Чем же так хороши иконки, заключенные в шрифт. А я Вам скажу чем:
- Вы не зависите от размера иконок в пикселях, вы просто выставляете размер шрифта и все. Качество иконки не будет зависесть от ее размера.
- Шрифт, это тот же спрайт, только весит меньше и подгружается быстрее.
- Вам не нужно постоянно писать код под каждую иконку, чтобы она появилась на сайте. Вам нужно всего лишь вставить название класса в любой блок и иконка появитсья там, где нужно! Вы также можете использовать параметр content: и вставлять код иконки куда угодно (код вы можете взять в основном css файле)
Плюсов много, но и минусы есть! Скажем если Вам нужно немного видоизменить иконку, то это без проффессиональных навыков работы со шрифтами, почти невозможно сделать, да и уж очень сложно и нудно - легче взять другие иконки. Но думаю из 200-от представленных иконок вы найдете чем заменить ту или инуб не понравившуюся иконку.
Как подключить эти иконки
Подключить данный шрифт-иконки не составит никакого труда:
1. Скачиваем архив, разархивируем его на рабочий стол, закачиваем файл fonts.css и папку fonts в корень вашего сайта.
2. Вам нужно лишь вставить подкючить css файл fonts.css, отвечающий за подключение шрифта и отображение иконок на сайте. Делаем это посредством вставки следующего кода между
и :3. Теперь открываем демо, находим нужную иконку и вставляем например вот такой html код:
Это самая первая иконка в сборке, а допустим чтобы вставить иконку пиццы нужно вместо
Слово «глиф» происходит от греческого и может быть переведено как «резьба». Вы можете найти эти специальные символы вне основных алфавитов. Например, символы валюты, символ авторского права и амперсанд являются глифами.
Каждый шрифт имеет свои собственные символы, которые вы можете творчески использовать в своих графических изображениях в Adobe Photoshop CC.
Как использовать глифы в Adobe Photoshop
Используйте глифы в качестве ярлыков для мгновенных украшений в вашем проекте графического дизайна. Просто начните с правильного шрифта. Вы встретите несколько курсивных шрифтов с лучшими глифами. Вы можете просмотреть расширенный набор символов на панели глифов в Photoshop или на карте символов Windows. Затем запустите Adobe Photoshop CC.
- Создайте текстовый слой, над которым вы хотите работать.
- Перейдите в Windows> Glyphs и откройте панель Glyphs .
- Вы можете работать с шрифтом, выбранным для слоя «Текст», или выбрать новый шрифт из выпадающего списка на панели «Глифы». Я скачал бесплатный шрифт, который называется Nymphette . Используйте ползунок, чтобы увеличить или уменьшить размер шрифта.
- Выберите текстовый слой и букву, которую вы хотите заменить глифом. Или введите, а затем выберите любую букву на слое. Когда вы выбираете букву, Glyph Panel автоматически найдет эту букву в списке.
- Просмотрите специальные символы на панели и дважды щелкните глиф, который вы хотите использовать. Основная буква заменяется только что выбранным глифом.
- Нажмите на галочку, чтобы завершить текст.
- Щелкните правой кнопкой мыши на слое типа, чтобы растеризовать текст. Теперь вы можете рассматривать это как отдельный слой изображения.
- Вы можете использовать один глиф или комбинацию глифов для создания собственных логотипов, смайликов, рамок, рамок и других красивых элементов дизайна для любого проекта.
Иногда, когда вы видите классный дизайн, созданный в Photoshop, вы можете задаться вопросом, какой инструмент использовался для его создания. Вы непременно обнаружите, что дизайн был создан с помощью инструмента Photoshop Custom Shape Tool.
Пользовательские формы, вы думаете? Единственные фигуры, которые вы видели, выглядят как арт-арт. Но этот надежный инструмент может предложить гораздо больше, а его универсальность часто используется недостаточно. Итак, вот руководство для начинающих по использованию Custom Shape Tool в Adobe Photoshop .
Шаг 1: настройте файл Photoshop
Первое, что вам нужно сделать, это настроить ваш документ в Photoshop. Для целей этого урока просто откройте программу и выберите размер Photoshop по умолчанию .
Затем вы захотите добавить базовый цвет на свой фон, чтобы увидеть, как ваша форма взаимодействует с ним (подробнее об этом позже).
Для этого изображения мы решили добавить простой оранжевый градиент. Затем я сделал этот градиент темнее, применив стиль слоя.
Если вы не знаете, как создать градиент, ознакомьтесь с нашим руководством, в котором подробно описано, как создать собственный градиент в Photoshop.
Шаг 2: Изучите свой пользовательский инструмент Shape
Далее вы захотите перейти к своему инструменту Custom Shape Tool . Ваш Custom Shape Tool можно найти на левой панели инструментов.
Вы узнаете Custom Shape Tool по маленькому разбрызгиванию его иконки, почти как лужа. Нажмите на этот значок, чтобы убедиться, что ваш инструмент Custom Shape Tool активен.
После того, как ваш Custom Shape Tool станет активным, вы увидите, что панель инструментов в верхней части рабочего пространства изменится в соответствии с его параметрами.
Самая важная часть Custom Shape Tool — это выбор самой фигуры. Чтобы выбрать фигуру из библиотеки Photoshop, перейдите в меню выбора пользовательской фигуры, которое здесь выделено красным.
Как только вы нажмете на выпадающее меню, вы увидите целый ряд готовых опций. Эти формы варьируются от рамок для картин и вывесок до элементов природы, текстовых пузырей, сердец и квадратов.
Для этого урока мы выберем один из цветов.
Инструменты настройки формы
После того, как я выберу свой стиль формы, мне нужно выбрать цвет для заливки и обводки.
Заполните это цвет, который будет внутри вашей формы. Штрих — это цвет, который будет подчеркивать вашу форму.
Эти два параметра можно найти в верхнем левом углу рабочего пространства. Нажав на каждый соответствующий образец, вы увидите выпадающее меню.
Оттуда вы можете выбрать оттенок для Fill или Stroke. Вы также можете выбрать не иметь цвета вообще. Чтобы оставить поле «Заливка» или «Обводка» пустым, выберите белое поле с красной зачеркнутой линией.
Кроме того, если вам не нравятся эти образцы цветов, вы также можете выбрать собственный цвет из палитры цветов . Он находится в правой части выпадающего меню.
Хотите использовать несколько пользовательских цветов одновременно? Вот как можно создать цветовую палитру в Photoshop .
Последний параметр, о котором вам нужно знать, — это параметры « Ширина» и « Тип» для обводки .
Мы расскажем об этих настройках позже в этом руководстве, но пока учтите, что они расположены рядом с вашими параметрами Fill и Stroke . Вы также можете настроить ширину и тип линии до того, как начнете рисовать или после того, как закончите.
Шаг 3: нарисуй свою форму
Теперь, когда вы ознакомились с инструментом Custom Shape Tool, пришло время нарисовать «цветок».
Сначала создайте новый слой для вашей фигуры. Это важно, поскольку позволяет легко редактировать форму и использовать режим наложения, чтобы позже настроить цвет.
Затем убедитесь, что ваш Custom Shape Tool все еще активен. Затем нажмите и перетащите курсор на страницу, чтобы нарисовать свою форму. Вы увидите контур этого синим цветом.
Как только ваша форма станет примерно того размера, который вам нужен, отпустите курсор. Синие линии будут автоматически заполняться цветом, до тех пор, пока вы не установили опцию Fill для красного зачеркивания до того, как начали.
Вы также увидите маленькие «маркеры», размещенные в стратегических точках вдоль этого синего контура, который все еще окружает ваш цветок. Вы можете использовать эти маркеры, чтобы скорректировать свою форму, поэтому давайте сделаем это прямо сейчас.
Шаг 4: отрегулируйте свою форму
Чтобы настроить свою форму, перейдите на левую панель инструментов и нажмите на инструмент « Прямой выбор» . Его значок похож на маленькую белую стрелку, которая здесь выделена красным.
Инструмент « Прямой выбор» позволяет настраивать отдельные точки привязки вдоль пути. Как только вы активируете свой инструмент, вы увидите, что все синие «маркеры» станут белыми. Это ваши опорные точки.
Чтобы настроить точку привязки, нажмите на одну из белых точек — она снова станет синей, чтобы показать, что она выбрана.
Затем щелкните и перетащите эту опорную точку в новое положение, чтобы настроить свою форму.
Допустим, я хочу сделать лепестки на этом цветке более стройными. Чтобы сделать это, я собираюсь щелкнуть и перетащить эту точку вниз, к центру. Это разрезает лепесток пополам.
Когда точка привязки будет там, где я хочу, я собираюсь отпустить курсор. Цветок автоматически адаптируется к этому новому пути.
Мне нравится, как это выглядит, поэтому я собираюсь взять еще одну опорную точку, затем нажать и перетащить, чтобы создать еще один идентичный лепесток цветка.
Продолжайте делать это, пока все ваши очки не скорректированы.
Шаг 5: Настройте свои опорные точки
Когда вы нажимаете на опорную точку, вы можете заметить, что по обе стороны от нее торчат две маленькие «ручки».
Это ваши контрольные точки перетаскивания. Когда вы меняете их, они изменяют форму вашей точки привязки, вместо перемещения из пункта А в пункт Б.
Чтобы настроить эти маркеры, нажмите на точку привязки, которую вы хотите настроить.
Затем нажмите на контрольную точку перетаскивания, которую вы хотите настроить. Это станет синим.
Как только вы нажмете на эту контрольную точку перетаскивания, удерживайте курсор и перемещайте его по странице. Вы заметите индивидуальную кривую фигуры-связанной с этим конкретным якорем точка будет меняться вместе с ним. Все остальные ваши опорные точки останутся прежними.
Если вам не нравится внешний вид этой кривой, вы можете просто перейти в Edit> Undo Drag Control Point . Фотошоп отменит ваши изменения.
Шаг 6: отрегулируйте ход
Теперь, когда вы скорректировали форму своего цветка, пришло время уточнить ход .
Убедитесь, что ваша форма выбрана. Затем перейдите на панель инструментов в верхней части рабочей области и щелкните раскрывающееся меню для размера обводки.
Перетаскивая ползунок назад и вперед по полосе, вы можете сделать свою линию обводки более тонкой или толстой.
Вы также можете изменить тип обводки, щелкнув раскрывающееся меню рядом с ним.
Шаг 7: Сделайте окончательные корректировки
Теперь, когда мы настроили форму, цвет, ширину обводки и тип, пришло время взглянуть на эту пользовательскую форму, чтобы увидеть, довольны ли мы ею.
Я в основном доволен тем, как это выглядит. Если вас не устраивают ваши собственные цвета, вы можете изменить их, используя режим наложения на панели « Слои» , который выделен красным цветом.
Вы также можете переместить ваш окончательный дизайн на странице.
Для этого вернитесь на левую панель инструментов. На значке инструмента прямого выбора щелкните маленькую белую стрелку в углу, чтобы открыть раскрывающееся меню. Вместо этого выберите черную стрелку.
Эта черная стрелка является инструментом выбора пути . С активным этим инструментом, нажмите на свою форму, чтобы появились синие линии. Затем нажмите и перетащите свою фигуру вокруг страницы, пока вы не будете довольны ее размещением.
Используйте инструмент Custom Shape Tool для создания чего-то крутого
Есть много других, более мелких настроек, которые вы можете сделать с помощью Photoshop Custom Shape Tool. Однако, зная эти основные шаги, вы сможете настроить даже самые скучные формы Adobe и превратить их во что-то крутое.
Вам интересно узнать больше о панели «Слои» и о том, как вы можете использовать ее для изменения цвета вашего дизайна? Затем ознакомьтесь с нашим руководством, объясняющим, как использовать режим
Читайте также: