Как сделать иконки для социальных сетей в фотошопе — уроки фотошоп

Рисуем набор иконок в Фотошоп

что получится в итоге

В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком RSS. Давайте начнём.

1. Подготовка рабочей области

Шаг 1

Начнём с создания нового документа размером 350 px на 350 px. Кликните в белом квадрате возле настройки Содержимое фона (Background Contents), чтобы выбрать новый цвет фона рабочей области.

Шаг 2

В диалоговом окне Цветовая палитра (Color Picker) выберите серый цвет фона рабочей области (#e0e0e2).

Шаг 3

Всегда хорошо, когда работа с самого начала структурирована. Создайте группу слоёв и назовите её «Солнце» (Sun). Там будут размещаться все слои, относящиеся к созданию иконки с солнцем.

2. Создаём основу

Шаг 1

С помощью инструмента «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool ) нарисуйте прямоугольник с размерами 83 px × 64 px и установите радиус 8 px. Для получения более точного результата воспользуйтесь панелью Свойства (Properties). Здесь вы сможете просто ввести точные размеры.

Шаг 2

Удерживайте Shift, а затем нарисуйте ещё один прямоугольник со скруглёнными углами. Эта новая фигура будет добавлена к предыдущей. Установите её размер 36 px × 36 px с радиусом 3 px.

Шаг 3

Нажмите сочетание ctrl+T для трансформирования фигуры, а затем нажмите и перетащите за пределы ограничительной рамки, чтобы повернуть ее на 45 °.

Шаг 4

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

Шаг 5

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

Шаг 6

Расположите фигуру как показано на рисунке ниже.

Вот результат в масштабе 100%.

Шаг 7

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

Шаг 8

Задайте цвет #57adf8.

Шаг 9

Дважды щелкните по фигуре, а затем примените Обводку (Stroke) и Наложение градиента (Gradient Overlay), используя следующие настройки.

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

Шаг 10

Уменьшите уровень заливки (Fill) до 11%. Содержимое слоя будет прозрачным и останется неизменным.

Вот результат.

3. Тень

Шаг 1

Создайте новый слой под основой. Активируйте инструмент «Кисть» (Brush Tool) (В) и затем под иконкой нарисуйте тень.

Шаг 2

По-прежнему используя инструмент «Кисть» (Brush Tool) (В), добавьте более сильную тень прямо под кончиком иконки.

Шаг 3

Зажав CTRL, кликните меньшую по размеру пиктограмму, чтобы выделить меньшую фигуру. Создайте новый слой и используйте белый цвет поверх выделенной области. Убедитесь, что вы используете мягкую кисть Жёсткость (Hardness)-0%.

Шаг 4

Когда закончите, снимите выделение (Ctrl+D) и уменьшите непрозрачность (Opacity) слоя.

Шаг 5

Создайте новый слой и снова выделите меньшую основу иконки. Заполните выделение градиентом от белого к черному. Измените режим наложения (Blend Mode) слоя на Перекрытие (Overlay), а затем уменьшите его непрозрачность (Opacity).

Шаг 6

Добавьте ещё один слой. Создайте большое эллиптическое выделение в нижней части иконки, а затем нажмите Ctrl на слое основы, чтобы пересечь его. Заполните выделение градиентом от белого к черному. Измените режим смешивания (Blend Mode) слоя на «Экран» Screen и уменьшите его непрозрачность (Opacity).

Так выглядит результат в масштабе 100%.

Шаг 7

Зажав Ctrl, кликните по миниатюре слоя-основы. Создайте сверху новый слой, затем выберите Редактирование > Обводка (Edit > Stroke). Установите светло-голубой цвет и ширину (Width) 1 px.

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

Шаг 8

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

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

Шаг 9

Добавьте корректирующий слой Цветовой баланс (Color Balance) выше иконки. Мы используем его, чтобы изменить цвет фона.

Чтобы упростить управление слоями, давайте изменим имя слоя на Изменение цвета (color changer).

Шаг 10

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

Шаг 11

Дублируйте все слои основы иконки и поменяйте параметры в корректирующем слое Цветовой баланс (Color Balance) по отдельности.

4. Добавляем значки к иконкам

Шаг 1

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

Шаг 2

Примените стили слоя Внутренняя тень (Inner Shadow) и Внутреннее свечение (Inner Glow), используя следующие настройки. Используйте цвет #7b6708 и установите оба режима наложения Умножение (Multiply).

Шаг 3

Используйте более светлый жёлтый цвет в центре солнца.

Шаг 4

Добавьте эллипс более яркого жёлтого цвета в верхнюю часть солнца.

Шаг 5

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

Шаг 6

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

Шаг 7

Выделите обе векторные фигуры и затем продублируйте их: Ctrl+C, а затем Ctrl+V. Поверните новые фигуры на 45 °.

Шаг 8

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

Шаг 9

Примените Внутреннюю тень (Inner Shadow) с цветом # b48f0b и Внешнее свечение (Outer Glow) с цветом # f9dc7e.

Шаг 10

Скройте солнце, нажав значок глаза возле слоя. Нарисуйте больше жёлтых треугольников, как показано ниже.

Добавьте круговую фигуру в центр треугольников и установите режим траектории Вычесть переднюю фигуру (Subtract).

Мы закончили, поэтому давайте вернём вспышку и формы солнца.

Шаг 12

Чтобы получить реалистичное солнце, нам нужно нарисовать размытую жёлтую круглую форму за солнцем. Вы можете сделать это вручную, используя мягкую кисть, или сначала нарисуйте круг, а затем смягчите его, используя фильтр Размытие по Гауссу (Gaussian Blur).

Шаг 13

Дважды щёлкните слой группы значков, чтобы добавить стиль слоя. Добавьте Внутреннее свечение (Inner Glow) с черным цветом и установите режим смешивания — Умножение (Multiply).

Таким образом мы добавили к иконке тёмный силуэт.

Шаг 14

Далее мы создадим символ RSS в иконке. Начните с рисования круглой фигуры поверх основы.

Шаг 15

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

Шаг 16

Дублируйте контур и уменьшите его. Установите режим «Объединить фигуры» (Combine Shapes).

Читайте также:  Водяные градиенты - уроки фотошоп

Шаг 17

Повторяйте предыдущие шаги, пока не получите следующую фигуру.

Шаг 18

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

Шаг 19

Дважды кликните на слое «Символ RSS» и настройте Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), и Тень (Drop Shadow).

Вот результат в масштабе 100%.

Шаг 20

Затем мы добавим символ снежинки в третий значок. Активируйте инструмент «Произвольная фигура» (Custom Shape Tool) и загрузите набор векторных фигур природы из панели параметров.

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

Шаг 21

Выберите фигуру снежинки (Snowflake) в выпадающем списке.

Шаг 22

Кликните и нарисуйте фигуру снежинки поверх иконки.

Это результат в масштабе 100%.

Заключение

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

Автор урока: Mohammad Jeprie

Источник: https://Photoshop-master.ru/lessons/web-and-app/sozdaem_nabor_ikonok_v_fotoshop.html

Как создать иконки с Flat-дизайном в Photoshop

Flat-дизайн это относительно новое направление в разработке веб-интерфейсов. iOS и даже Windows постепенно адаптируются под этот стиль, и, в скором времени, почти все (если вообще не все) веб-сайты переймут данный подход.

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

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

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

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

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

В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.

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

Откройте Photoshop. Создайте новый файл, использовав пресет «Фото» (Photo) (10×8 inch, 300 DPI, прозрачный фон, цветовая схема RGB).

Выберите инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle) и создайте новую фигуру с размерами 1736 на 1736 пикселей (px), радиусом скругления 83 пикселя и цветом #82d8b5. Можно задать и свой цвет, наиболее хорошо сочетающийся с дизайном вашего сайта.

Затем, используя инструмент «Перо» (Pen tool) и нарисуйте нечто, похожие на изображение ниже. Используйте цвет #a30d00. Это будет крышей нашего домика, обозначающего главную страницу сайта.

Далее, не переключая инструмент «Перо», создайте прямоугольную фигуру как показано на изображении ниже. При этом используйте цвет #ffffff. Также, нарисуйте маленький квадрат с помощью инструмента «Прямоугольник» с цветом #3498db.

Далее, тем же инструментом, создайте фигуру размером 248px на 396px и цветовой заливкой #fcab3a.

На данном этапе вы уже можете сохранить и использовать изображение. Оно уже достаточно неплохо напоминает иконку домашней страницы во flat-стиле. Но стоит пройти еще пару шагов и добавить длинную тень.

Далее, используя инструмент «Перо» с цветом #000000 нарисуйте фигуру. Начните её с правого угла крыши, продолжите и сделайте так, как показано на рисунке ниже:

Отправьте тень на самую нижнюю позицию и растрируйте этот слой.

Используя инструмент «Волшебная палочка» (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I). Не снимая выделения, выберите слой с тенью и нажмите кнопку «delete».

Иконка готова. Чтобы сохранить её, нажмите «Файл>Сохранить для веб и устройств..» (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S). Сохраните иконку в формате PNG-24 с включенной прозрачностью.

Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.

Теперь, займемся иконкой Post:

  1. Откройте Photoshop и повторите шаги 1 и 2 для предыдущей иконки:
  2. Нарисуйте прямоугольник со скругленными углами размером 929px на 929px и радиусом скругления 38px. Я использовал цвет #f5ea74, чтобы имитировать цвет клейкого листочка:
  3. Нарисуйте линию толщиной 1px и цветом #5d5608. Разместите её сверху клейкого листа:
  4. Нарисуйте линию толщиной 15px, как показано ниже:

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

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

Ниже вы можете видеть иконки About Me и Contact Me:

Все иконки можно скачать тут.

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

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

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

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

Перевод статьи «How to Create Flat Icons in Photoshop» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: http://www.internet-technologies.ru/articles/kak-sozdat-ikonki-s-flat-dizaynom-v-photoshop.html

Создаём в Фотошоп кнопки для соцсетей

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

Шаг 1

Откройте Фотошоп и создайте новый документ  (Ctrl + N). Установите те параметры документа, которые Вы видите на скриншоте и нажмите ОК.

Теперь добавьте к документу сетку через меню Просмотр – Показать – Сетка (View > Show > Grid) и включите привязку к ней: Просмотр – Привязать – Сетка (View > Snap To > Grid).

Читайте также:  Как сделать фотошоп белым или черным - уроки фотошоп

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

Для этого, войдите в меню Редактирование – Установки – Направляющие (Edit > Preferences > Guides), перейдите на вкладку Направляющие, сетка и д.р. (Grid & Slices) и в секции Сетка в пункт Линии установите значение 5 пикселей, а в пункт Внутреннее деление установите значение 1. Также, установите цвет сетки #a7a7a7. После внесенных изменений нажмите ОК.

Для предварительного просмотра размера и положения нарисованных форм воспользуйтесь палитрой Инфо: Окно – Инфо (Window > Info).

Шаг 2

Для переднего плана установите цвет #dcdcdc, выберите инструмент Прямоугольник со скругленными углами  (Rounded Rectangle Tool) и в панели свойств в верхней части экрана установите значение радиуса 25 пикселей. Нарисуйте векторную фигуру размером 90х50 пикселей.
На панели свойств включите кнопку Вычесть из области фигуры и нарисуйте векторную фигуру размером 80х40 пикселей.

Шаг 3

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

Выберите инструмент Удалить опорную точку (Delete Anchor Point Tool) и кликните в нижней правой угловой точке только что нарисованного прямоугольника, чтобы ее удалить. Теперь инструментом Стрелка (Direct Selection Tool) кликните по нижней точке (она помечена цифрой 10 на изображении) и переместите ее на 10 пикселей вправо.

Шаг 4

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

Внутренняя тень (Inner Shadow):

Внутреннее свечение (Inner Glow):

Наложение градиента (Gradient Overlay):

Обводка (Stroke):

Шаг 5

Для цвета переднего плана установите #a1d8ff и выберите инструмент Прямоугольник со скругленными углами  (Rounded Rectangle Tool).

Убедитесь в том, что радиус скругления составляет 25 пикселей и нарисуйте фигуру размером 80х40 пикселей.

К только что нарисованной фигуре добавьте стили слоя Внутренняя тень (Inner Shadow) и Наложение градиента (Gradient Overlay).

Внутренняя тень (Inner Shadow):

Наложение градиента (Gradient Overlay):

Шаг 6

Дублируйте фигуру, созданную в предыдущем шаге (Ctrl + J) и в палитре Слои кликните по слою правой кнопкой мыши, выбрав при этом пункт Очистить стили слоя (Clear Layer Style). Перейдите на только что созданную копию, уменьшите параметр Заливка (Fill) до 0% и добавьте стили слоя.

Тень (DropShadow):

Внутренняя тень (Inner Shadow):

Внешнее свечение (Outer Glow):

Обводка (Stroke):

Шаг 7

Для цвета переднего плана установите #dcdcdc и выберите инструмент Прямоугольник со скругленными углами  (Rounded Rectangle Tool). Для этого инструмента установите радиус 5 пикселей. Нарисуйте фигуру размером 70х40 пикселей и разместите ее, как показано на первом изображении. К этой фигуре добавьте несколько стилей слоя.

Тень (DropShadow):

Внутренняя тень (Inner Shadow):

Наложение градиента (Gradient Overlay):

Обводка (Stroke):

Шаг 8

При помощи инструмента Текст  (Type Tool) напишите слово «Share» и поместите его, как показано на скриншоте.  Для создания текста используйте шрифт Lobster font – размер 15 пунктов, цвет #414141.

К текстовому слою добавьте некоторые стили:

Тень (DropShadow):

Внутренняя тень (Inner Shadow):

Шаг 9

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

Активируйте инструмент Прямоугольник  (Rectangle Tool) и нарисуйте фигуру шириной в 1 пиксель, длиной в 38 пикселей.

Скопируйте этот слой (Ctrl + J) и передвиньте копию на 1 пиксель вправо и измените цвет фигуры на белый.

Шаг 10

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

Наложение градиента (Gradient Overlay):

Наложение градиента (Gradient Overlay):

Шаг 11

Для цвета переднего плана выберите #4865a7, а также активируйте инструмент Прямоугольник со скругленными углами  (Rounded Rectangle Tool) с радиусом в 3 пикселя.

Нарисуйте фигуру размером 9х19 пикселей.

Теперь инструментом Прямоугольник  (Rectangle Tool) в режиме вычитание (Subtract) нарисуйте фигуру размером 6х16 пикселей, как показано на втором скриншоте:

Шаг 12

Продолжайте рисовать инструментом Прямоугольник (Rectangle Tool) в режиме Вычитание. Нарисуйте два квадрата размером в 3 пикселя, включите на панели свойств кнопку Добавить к выделенной области и добавьте кривую размером 8х3 пикселя, как показано на втором изображении:

Шаг 13

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

Тень (DropShadow):

Внутренняя тень (Inner Shadow):

Внутреннее свечение (Inner Glow):

Наложение градиента (Gradient Overlay):

Шаг 14

Источник: http://bb3x.ru/blog/sozdayom-v-fotoshop-knopki-dlya-sotssetey/

Скачать бесплатно mp3 0

  • Lukas Leragers Traumtor Ebnet Weg Zum Sieg Dänemark Österreich 2 0 Testspiel DAZN Highlights192 Kbps 4.12 MB 00:03:08 963
  • 0 Punkte Bisher In Division Rivals Muss Man ändern Oder Es Zmnd Versuchen D192 Kbps 516.84 MB 06:32:43 284
  • PAIN RASTET Aus ZERSTÖRT Seinen CONTROLLER2 0 Marcel Kassiert Krassen Turn On Best Of Twitch Clips192 Kbps 14.06 MB 00:10:41 623
  • LR CELL DAS BATTLEFIELD SIND ONLINE UPDATE 3 14 0 INFOS DETAILS DBZ Dokkan Battle192 Kbps 15.92 MB 00:12:06 266
  • PS TIRA Vs PSIS SEMARANG 0 1 FULL GOAL Highlgiht HD Liga 1 2018192 Kbps 206.80 MB 02:37:08 547
  • 0 00 GRUNDSTÜCK GEFUNDEN Welche Note Geben Wir192 Kbps 23.27 MB 00:17:41 4024
  • Mexico Vs Chile 0 1 Highlights First Half192 Kbps 6.05 MB 00:04:36 253
  • Brazil Vs Argentina 1 0 Highlights Friendly 16 10 2018 HD192 Kbps 5.35 MB 00:04:04 1730
  • Götze Goal At Win In Aachen Alemannia Aachen BVB 0 4 All Goals And Highlights192 Kbps 7.48 MB 00:05:41 3259
  • Argentina Vs Brasil 0 1 Resumen Goles Relato Argentino Amistoso 2018192 Kbps 6.60 MB 00:05:01 101
  • Last Minute Treffer Bringt Italien Den Sieg Polen Italien 0 1 UEFA Nations League Highlights192 Kbps 3.99 MB 00:03:02 3190
  • Brazil Vs Argentina 1 0 Highlights All Goals First Half192 Kbps 6.98 MB 00:05:18 1375
  • ПРОВЕРКА СЛИВКИ ШОУ КАК ПРОЖИТЬ ЦЕЛЫЙ ДЕНЬ НА 0 РУБЛЕЙ192 Kbps 24.94 MB 00:18:57 38420
  • Super Mario Bros X SMBX Super Mario Bros 0 SMB0 All Bosses Boss Rush192 Kbps 17.53 MB 00:13:19 17
  • 24 Stunden Mit 0 überleben192 Kbps 13.49 MB 00:10:15 4979
  • Manuel Neuer Patzt Bei DFB Blamage Niederlande Deutschland 3 0 Highlights Nations League DAZN192 Kbps 3.95 MB 00:03:00 17802
  • Marcus Berg Emil Forsberg Und Co Ohne Tor Russland Schweden 0 0 UEFA Nations League DAZN192 Kbps 3.95 MB 00:03:00 695
  • Gabriel Jesus Co Erkämpfen Favoriten Sieg Saudi Arabien Brasilien 0 2 Testspiel DAZN HL192 Kbps 3.95 MB 00:03:00 3764
  • Joachim Jogi Löw Enttäuscht Nach 0 3 Niederlage Niederlande Holland Vs Deutschland192 Kbps 11.56 MB 00:08:47 93
  • Alemannia Aachen 0 4 Borussia Dortmund Highlights Goals 15 10 2018 HD192 Kbps 7.61 MB 00:05:47 1452
  • Roman Neustädter Trifft Für Russland UEFA Nations League Russland Türkei 2 0 DAZN Highlights192 Kbps 3.84 MB 00:02:55 2825
  • 0 3 Debakel Gladbach Watscht Die Bayern Ab FC Bayern M Gladbach 0 3 Bundesliga DAZN192 Kbps 6.82 MB 00:05:11 10282
  • КОСМОНАВТ 0192 Kbps 46.06 MB 00:35:00 1306
  • Learn To Count 0 To 20 With Crayola Markers Numbers 0 20 Learn Colors With Crayola Markers192 Kbps 3.01 MB 00:02:17 3130
  • BVB Sportdirektor Zorc über Das 4 0 Reus Und Rückkehrer192 Kbps 1.34 MB 00:01:01 60
  • Learn To Count With Play Doh 0 To 100 Numbers 0 100 Learn Colors With Play Doh192 Kbps 17.70 MB 00:13:27 1149
  • Grünes Gift In Bayern CSU Taumelt Und AfD Von 0 Auf 10 2 Wahl 2018 HD192 Kbps 6.51 MB 00:04:57 583
  • 1 1 0 Nothing To Lose เต มเร อง192 Kbps 124.92 MB 01:34:55 3982
  • Маша и Медведь Трудно быть маленьким Серия 35192 Kbps 9.10 MB 00:06:55 83992
Читайте также:  Изменить цвет глаз онлайн в фотошопе бесплатно - уроки фотошоп

Для вашего поискового запроса 0 MP3 мы нашли 1000000 песни, соответствующие вашему запросу, но показывающие только 10 лучших результатов. Теперь мы рекомендуем загрузить первый результат Lukas Leragers Traumtor Ebnet Weg Zum Sieg Dänemark Österreich 2 0 Testspiel DAZN Highlights MP3 который загружен Goal Deutschland размером 4.12 MB , длительность  3 мин и 8 сек и битрейтом 192 Kbps .

Обратите внимание: 

Перед загрузкой вы можете просмотреть любую песню, наведите курсор Слушать и нажмите «Воспроизвести» или «Нажмите здесь»  Скачать для загрузки mp3-файлов высокого качества. Первые результаты поиска — с YouTube, который будет сначала преобразован, после чего файл можно загрузить, но результаты поиска из других источников могут быть сразу же загружены в MP3-файл без какого-либо преобразования или пересылки. 

Источник: https://mp3vevo.ru/mp3/%D0%BA%D0%B0%D0%BA-%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE-%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8-%D0%B4%D0%BB%D1%8F-%D1%81%D0%BE%D1%86-%D1%81%D0%B5%D1%82%D0%B5%D0%B9-%D0%B2-photoshop/

Деревянная иконка в фотошопе, иконка твитерра, создание креативных экологичных иконок в уроке фотошопа

В этом уроке расписан общий процесс создания деревянной иконки.

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

Шаг 01 Мне нравится работать с холстом, который изначально больше, чем итоговая иконка, поэтому я создал документ с размерами 510 на 510px.

Я настроил направляющие для обозначения границ иконки (View> New Guide). Кроме того я добавил пересечение направляющих в центре документа, что очень удобно при работе. Также я провел на основном слое линейный градиент от темно-серого цвета к более светлому, чтобы облегчить восприятие своей работы:

Шаг 02 Время начинать. Создайте новый слой и поместите его в отдельную группу Layer> New> Group (Ctrl+G), которую переименуйте в «Derelict Icon».

Выберите инструмент Rounded Rectangle, в режиме Fill Pixels с радиусом округления углов в 40рх и нарисуйте им заготовку под иконку.

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

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

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

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

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

Вот для примера несколько ссылок на бесплатные текстуры с деревом: 10 HQ Free Tree Bark Textures Free High Resolution Wood Textures 10 Free and High-Res Grungy Wood Textures Как определитесь с деревом, вставьте его изображение внутрь текущей группы.

Измените размеры изображения, чтобы оно соответствовало вашему представлению. Теперь вы наглядно видите смысл маски для группы, которая скрывает часть слоя по желаемой форме (слой с белой формой не удаляйте, но можете временно отключить). Для слоя с текстурой настройте стиль слоя Gradient Overlay, с указанными ниже настройками:

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

Шаг 05 Сейчас мы начиним наш слой с логотипом твиттера стилями. Прежде, чем приступить к этому, понизьте параметр Fill у слоя с лого до 0%. Далее дважды кликните по слою, чтобы открыть диалоговое окно, где вы, следуя нижеприведенным скринам, включите и настроите требуемые стили слоя: Inner Shadow:

Outer Glow:

Inner Glow:

Color Overlay:

Шаг 06 На данном этапе нужно будет немного пофантазировать и нарисовать отростки от лого, которые будут выглядеть трещинами на дереве — здесь все будет зависеть чисто от вашего видения.

Возьмите маленькую круглую кисть (8-16px) с жесткостью не менее 90% и на слое с буквой начните наносить мазки, рисуя подобие трещин.

Ниже показан вариант, где я нанес первый отросток в направлении имеющейся трещины на текстуре дерева:

Вот как это выглядит, если повысить параметр Fill на 100% (чисто для примера):

Потрепайте границы логотипа, дорисовав еще пару отростков. Вот как это выглядит у меня:

Шаг 07 Придадим значку ощущение большей углубленности. Сдублируйте слой с буквой и очистите копию от стилей. Для этого кликните правой кнопкой мышки по дубликату и, в появившемся контекстном меню, выберите пункт Clear Layer Style:

Добавьте к очищенной копии стили слоя Gradient Overlay:

Шаг 08 К завершению придадим иконке вид кнопки. Перетяните оригинальный слой с белой формой иконки, которую мы создали в самом начале, на вершину слоев в текущей группе. Настройте этому слою следующие стили: Inner Glow:

Bevel and Emboss:

Gradient Overlay:

Полученный результат выглядит довольно хорошо и не отторгает взгляд:

Шаг 09 Последней действием, которое я сделал, состояло в том, чтобы сделать цвета более насыщенными и сочными. Для этого я добавил корректирующий слой Hue/Saturation, где повысил значение Saturation до +15. Окончательный вариант меня устроил — это именно то к чему я и стремился:

Заключение Ниже показаны еще некоторые варианты, сделанные по общему принципу:

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

уроке фотошоп, уроки фотошопа, урок Photoshop

Источник: https://megaobzor.com/derevyannaya-ikonka-v-fotoshope-ikonka-tviterra-sozdanie-kreativnyh-yekologichnyh-ikonok-v-uroke-fot.html

Ссылка на основную публикацию