Как нарисовать иконку в Фотошопе

В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.

Пример HTML-страницы

Шаг 1.

Создание нового документа

Создайте новый документ (File > New) с показанными настройками

Шаг 2.

Создание фона

Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя.

Шаг 3.

Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY, откройте Стили Слоя и примените следующие настройки.

Также добавьте Обводку с слою BODY со следующими настройками

Шаг 4.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 5.

Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.

Также добавьте Обводку к слою BODY_2 со следующими настройками.

После этого добавьте Внутреннею тень к слою BODY_2

со следующими настройками.

Шаг 6.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 7.

Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слоя BASE. Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя.

После этого необходимо исправить толщину Обводки на 3px в слое BASE.

Шаг 8.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 9.

Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слой FOOT. Используйте  инструмент  Прямоугольник со скругленными углами (U)

с радиусом 35px и затем примените к нему следующие эффекты слоя.

Примените также Внутреннюю тень к слою FOOT.

Шаг 10.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 11.

Создание корпуса телевизора

Теперь продублируйте слой FOOT и поместите его как показано на рисунке.

Шаг 12.

Создание корпуса телевизора

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

Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%

Шаг 13.

Создание экрана

Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.

Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN. Теперь исправьте толщину обводки на 10px в слое SCREEN.

Шаг 14.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 15.

Создание экрана

В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2. Поместите его поверх остальных слоев. Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.

Затем примените Внутреннюю тень к слою SCREEN_2.

Затем примените Внутреннее свечение к слою SCREEN_2.

Затем Тень

к слою SCREEN_2.

Шаг 16.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 17.

Создание экрана

Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF. Затем уменьшаем прозрачность до 20%

Шаг 18.

Создание экрана

Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно. 

Шаг 19.

Создание дополнительных элементов

В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON.

Теперь вернитесь к слою

BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя. После этого примените скопированный стиль на слой BUTTON.

Шаг 20.

Создание дополнительных элементов

Далее мы создаем еще один круг и помещаем его так как показано на картинке.

После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.

Далее применяем Окантовку со следующими настройками.

Затем добавляем Тень.

Шаг 21.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 22.

Создание дополнительных элементов

Далее используем инструмент Прямоугольник со скругленными углами (U) и создаем прямоугольник как показано на примере.

Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки

Тени.

Шаг 23.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 24.

Создание дополнительных элементов

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

Шаг 25.

Промежуточный результат

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

Результат должен быть как на картинке.

Шаг 26.

Создание дополнительных элементов

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

Шаг 27.

Создание дополнительных элементов

Теперь откроем Стиль слоя и применим следующие настройки.

Применим Внутреннюю тень к слою SPEAKER.

Добавим Обводку к слою SPEAKER.

Шаг 28.

Промежуточный результат

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

Шаг 29.

Создание дополнительных элементов

Теперь дублируем слой динамик несколько раз и поместим его так как показано на рисунке.

Шаг 30.

Создание марки телевизора

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

Также применим Тень к слою с маркой телевизора.

Шаг 31.

Промежуточный результат

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

Шаг 32.

Создание антенны

Используем инструмент Прямоугольник (U) и создадим прямоугольник по форме антенны и поместим ее под телевизор. Затем применим к слою следующие Стили слоя чтобы придать металлический вид.

Шаг 33.

Промежуточный результат

Результат должен выглядеть так.

Шаг 34.

Рисование тени

Далее создадим тень от телевизора.

Создаем группу слоев которую назовем SHADOW и поместим ее перед нижним фоном. Используем инструмент Эллипс (U)

и создаем эллипс и заливаем его черным цветом. После этого применим размытие Размытие по Гауссу со следующими настройками.

Шаг 35.

Рисование тени

Теперь используем инструмент Ластик (E) сотрем часть тени. Затем изменим Режим наложения на Умножение и уменьшим прозрачность на 50%

Шаг 36.

Промежуточный результат

У нас должен получиться следующий результат.

Шаг 37.

Добавление тени от ножек

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

Шаг 38.

Итоговое изображение

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

Ссылка на источник

Пример HTML-страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте значок приложения с помощью Photoshop за 20 простых шагов

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

В этом уроке я буду использовать Photoshop, чтобы объяснить, как сделать крутую иконку приложения для игры в бильярд. И самое приятное: я покажу вам, как добиться впечатляющих результатов за КОРОТКИЙ период времени.

Поехали!

1. Создайте новый документ

Мы создадим нашу иконку размером 1024×1024 пикселей, но вы можете создать свою иконку размером 256×256 или 512×512 пикселей.

Так как это будет использоваться на экране, мы должны установить цветовой режим на RGB (не CMYK) и разрешение на 72 пикселя (не 300).

2. Нарисуйте первую фигуру на первом слое.

Возьмите инструмент Rounded Rectangle Tool (U), нарисуйте фигуру и залейте ее цветом (#b67032).

3. Эффект дерева

Создайте эффект дерева с помощью «волокон» в меню фильтров («Фильтр» > «Рендеринг» > «Волокна»), убедитесь, что вы установили цвет переднего плана с помощью #b67032, а цвет фона с помощью #72319b.

4. Нарисуйте вторую фигуру

Снова, Инструментом «Прямоугольник со скругленными углами» (U) нарисуйте ту же фигуру, но сделайте её короче, чем первая фигура дерева (около 6 пикселей снизу).

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

5. Скопируйте 1-й слой на 2-ю фигуру

Выберите фигуру (alt + enter), затем скопируйте первый слой на вторую фигуру (ctrl+c, затем ctrl+v). Итак, теперь у нас есть два слоя с текстурой дерева, но разной высоты.

6. Сделайте слой 1 темнее

Используйте параметр Кривые (ctrl+m), чтобы сделать слой 1 темнее другого.

7. Добавьте глубину с помощью настроек стиля слоя

Дважды щелкните слой 1 в палитре слоев, затем установите параметры стиля слоя, как показано ниже.

Я выбрал только настройки Inner Shadow и Inner Glow.

8. Добавьте глубины с помощью инструмента «Кисть».

Добавьте глубины к слою 1, затеняя более темные цвета с помощью инструмента «Кисть» (b).

9. Добавьте эффект внутреннего свечения для слоя 2

Переходя к слою 2, мы собираемся включить внутреннее свечение. Снова дважды щелкните слой 2 в палитре слоев, чтобы перейти к настройкам стиля слоя.

10. Нарисуйте третью фигуру

Создайте новый слой и с помощью инструментов Rounded Rectangle Tool и Ellipse Tool создайте 2 новые фигуры (см. ниже).

11. Скопируйте 2-й слой на 3-й слой

Выберите фигуру (alt + enter), затем скопируйте слой 2 (ctrl+c, затем ctrl+v) на слой 3. Этот шаг аналогичен ШАГУ 5 и ШАГУ 6.

Не забудьте затемнить слой 3, отрегулировав настройку кривых (ctrl+m).

12. Дублируйте слой 3

Дублируйте слой 3 (ctrl+j), залейте его (alt + delete) зеленым цветом (#005e20), затем переместите его немного вниз. Мы назовем этот слой Green Shape Layer.

13. Вырежьте слой с зеленой фигурой, чтобы он соответствовал слою 3

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

Вернитесь на слой с зеленой фигурой в палитре слоев, но убедитесь, что вы выбрали слой 3. Затем вырежьте (нажмите удалить) слой с зеленой фигурой.

Зеленая фигура должна быть выровнена со слоем 3.

14. Создайте отверстие в бильярдном столе

Теперь создайте новую фигуру (и слой) с помощью инструмента «Эллипс» — залейте ее черным цветом.

15. Примените к слою 3 эффект внешнего свечения

Вернитесь к слою 3 и примените к нему эффект внешнего свечения (см. ниже).

16. Добавьте глубины зеленой фигуре

Как и в ШАГЕ 8, добавьте глубину зеленой фигуре, добавив более темный цвет с помощью инструмента «Кисть» (b).

17. Добавьте фильтр шума

Затем добавьте «Шум» на слой с зеленой фигурой (Фильтр > Шум > Добавить шум).

Я поставил около 5% шума.

18. Добавьте блики и детали

Поместите еще один черный круг поверх формы отверстия бильярдного стола, затем выделите отверстие заднего бильярдного стола Инструментом «Кисть» (b). Добавьте шумовой фильтр.

19. Нарисуйте простой шар

1. Создайте круглую форму с помощью Elliptical Marquee Tool (m) и залейте ее белым цветом.
2. Возьмите более темный цвет (#9d956e) и прокрасьте кистью (b) края изображения, чтобы создать мягкий градиент.
3. Используйте кисть меньшего диаметра и более светлый цвет для второго градиентного блика.
4. Создайте блик с помощью Pen Tool (p).
5. Затем почистите (b) эту фигуру, чтобы придать шару глянцевый оттенок.

20. Создайте тень для шара

Последний шаг! Создайте черный круг под шаром и примените к нему эффект размытия (Фильтр > Размытие > Размытие по Гауссу).

И вот окончательный результат!

Надеюсь, вам понравилось — спасибо за подписку и удачи в ваших собственных проектах! 🙂

Нужна иконка, разработанная для вашего приложения?

Наше глобальное сообщество профессиональных графических дизайнеров может сделать это!

Покажите мне

Как создать свои собственные значки в Photoshop CC

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

8

АКЦИИ

 

Создание видеоматериалов для YouTube

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

Метод №1 Превратить найденные изображения в иконки

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

Шаг 1. Сделайте снимок экрана значка.

• На Mac это Cmd+Shift+4 и перетащите область для захвата.
• В Windows это клавиша Print Scr. Затем перейдите в Photoshop, создайте новый документ и нажмите Ctrl+V, чтобы вставить снимок экрана.

Шаг 2. Измените размер изображения

Выберите «Изображение»> «Размер изображения» (посмотрите, насколько оно маленькое в настоящее время в правом нижнем углу)

Выберите Сохранить детали 2. 0 для метода повторной выборки.

Установите ширину 1000 пикселей, этого будет достаточно для трассировки.

Шаг 3. Сделайте выделение

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

Нажмите Ctrl/Cmd+Shift+I, чтобы инвертировать выделение. Просто значок теперь должен быть выбран.

Шаг 4. Создайте контур

Откройте панель контуров в Photoshop (Окно > Контур)

Выберите Создать рабочий контур , если он неактивен, убедитесь, что ваш выбор активен

Вот где Photoshop превратит выделение в векторный контур. (вам не нужно использовать инструмент «Перо», потому что PS сделает это за вас.)

По умолчанию допуск установлен на 2,0, это будет работать. Меньшее число = более сложный путь, большее число — более простой путь.

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

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

Шаг 5. Превратите путь в фигуру.

Теперь мы хотим создать собственную форму. Это упрощает использование в будущем.

Выберите «Правка»> «Определить пользовательскую форму»

Нажмите «ОК», и в вашу библиотеку фигур будет добавлена ​​новая иконка с изображением большого пальца.

Изготовление иконок по собственным чертежам

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

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

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

Шаг 6. Получение четкого контура

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

Примените небольшое количество размытия к рисунку, чтобы смазать все области вместе. Фильтр>Размытие>Размытие по Гауссу (посмотрите, как я это делаю в видео выше).

Выберите Cmd/Ctrl+L для уровней. Вдавливайте треугольники по уровням, чтобы сделать иконку более плотной и иметь четкие очертания.

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

Шаг 7. Выделение

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

Нажмите Ctrl/Cmd+Shift+I, чтобы инвертировать выделение. Просто значок теперь должен быть выбран.

Как и раньше, создайте рабочий путь на панели «Контуры». На этот раз задайте допуск 8.0, это сгладит неровности.

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

 

Шаг 8. Создайте форму

Выберите «Правка»> «Определить пользовательскую форму» 0103 1. Выберите фигуру

2. Создайте рабочий контур

3. Создайте a Custom Shape from the Path

Создание значков значков из пользовательских форм

Шаг 9. Использование фигур.

Здесь мы создадим несколько значков из фигур и сохраним их для будущего использования.

Создать новый документ. Он может быть любого размера, здесь мы использовали 1920×1080 (размер HD-видео)

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

Создайте новый слой

Шаг 10. Открытие библиотеки

Выберите инструмент «Форма»

На верхней панели инструментов вы увидите набор фигур, поставляемых с Photoshop. Есть еще много, давайте их.

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

Теперь вы увидите все формы, которые поставляются с Photoshop, и многое другое 🙂

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

Шаг 11. Использование фигур

Выберите всплывающую подсказку Squared off

Убедитесь, что вы выбрали форму в раскрывающемся меню слева. (Путь формы или пиксели)

Перетащите на холст, чтобы создать фигуру. Удерживайте Shift, чтобы сохранить пропорции.

Обратите внимание, что вы также можете выбрать цвет заливки и обводки, а также толщину обводки (контура),

Шаг 12

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

Теперь у нас есть значок «палец вверх»!

Шаг 13.

Выберите оба слоя, которые находятся наверху значка, и нажмите Cmd/Ctrl+G, чтобы создать группу.

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

Совет. Нажмите Cmd/Ctrl+J, чтобы продублировать значки, чтобы вы могли изменить каждый из них, а не начинать с нуля.

Теперь мы собираемся сделать CC Library иконок. Не на СС? Вы должны сохранить изображения в формате PSD и создать резервную копию в Dropbox или на диске.

Шаг 14. Создание библиотеки иконок.

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

Убираем серый фон, он нам больше не нужен.

Как использовать панель библиотеки в Photoshop

Шаг 15. Создание библиотеки

Откройте панель библиотеки. Window>Library

В меню панели библиотек (вверху справа) выберите Create New Library

Теперь вы увидите новую библиотеку. Я назвал его icons

Шаг 16. Добавление элементов в библиотеку

Поскольку мы помещаем каждый значок в группу, его легко добавить в библиотеку. (Подведение итогов: выберите слои и нажмите Cmd/Ctrl+G, чтобы поместить их в группу)

Перетащите группу с панели слоев в библиотеку.

И вы увидите значок теперь в библиотеке. Это так просто!

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

Использование библиотек Creative Cloud.

Существует несколько способов использования библиотек Creative Cloud, мы рассмотрим их сейчас.

Шаг 17.

Использование библиотеки

Вы можете перетаскивать элементы из библиотеки непосредственно в документ Photoshop

Если дважды щелкнуть значок в библиотеке, он откроется как новый документ. Обратите внимание, что она красиво обрезана.

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

Выберите «Файл»> «Сохранить для Интернета»

По умолчанию он хочет использовать jpg. Если вы хотите сохранить прозрачность, сохраните в формате PNG.

Другой вариант — использовать их в других приложениях Adobe. В большинстве приложений Creative Cloud есть панель «Библиотека», и элементы являются общими для разных программ.

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

Ты поймал это? Мне не пришлось ничего делать дополнительно. Только что созданные значки доступны для использования в Premiere Pro автоматически.