Рисуем иконку щита в фотошоп. Как нарисовать меч? Пошаговая инструкция

Рисуем стильную иконку щит используя Фотошоп

В данном уроке Фотошопа мы рассмотрим процесс создания стильной иконки в виде щита.

Сложность: Средняя

Дата: 09.08.2009

Обновлено: 17.03.2012

В данном уроке Фотошопа мы рассмотрим процесс создания стильной иконки в виде щита.

Финальный результат

Приступаем к уроку Фотошопа

Создайте документ 450x450 px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш ‘Ctrl+N’)).

Выбираем инструмент Custom Shape Tool (Инструмент ‘Произвольная фигура’ / Клавиша ‘U’), после берем фигуру как на изображении ниже: ↓

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

Рисуем данную фигуру с цветом #383838.

Теперь применим настройки смешивания (Blending Options, двойной клик на слое): ↓

Stroke (Обводка): ↓

Вот что получается: ↓

Теперь берем мягкую кисточку (Brush Tool (Инструмент Кисть / Клавиша ‘B’)), цвет белый.

И ставите на новом слое ‘точку‘, снижая непрозрачность слоя до 30%. Не забудьте применить Clipping mask (Создать обтравочную маску).

Создаем белую фигуру прямоугольника на половину фигуры (Rectangle Tool (Инструмент ‘Прямоугольник’ / Клавиша ‘U’ )). Не забудьте применить Clipping mask (Create Clipping Mask (Создать обтравочную маску)). Теперь опять берем мягкую кисточку, черного цвета и с непрозрачностью кисти 10% делаем маску этому слою. Теперь берем Elliptical Marquee Tools (Инструмент ‘Овальная область выделения’ / Клавиша ‘M’) и вырезаем часть слоя, зажав Alt. Можете снизить Opacity (Непрозрачность) этого слоя.

Теперь создайте какое-нибудь изображение. Автор взял это: ↓

Поставьте этому слою Fill (Заливка) на 0%, а режим смешивания на Overlay (Перекрытие).

Применим стили слоя – Blending Options (Параметры наложения): ↓

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

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

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

Вот что получится: ↓

Создайте фигуру прямоугольника цвета E1E1E1 (Rectangle Tool (Инструмент ‘Прямоугольник’ / Клавиша ‘U’ )). С помощью элипса вырезаем часть. Добавляем маску слоя и кисточкой: ↓

Затемняем верхние и нижние части.

Продублируйте нижний слой (если связь слоев разорвется- восстановите) и уменьшите его (дубль).

Теперь измените параметры слоя – Blending Options (Параметры наложения): ↓

Рисуем щит в Фотошоп

В этом уроке вы узнаете, как нарисовать щит Капитана Америка, создать текстуру металла, работать со стилями слоя.

Шаг 1. Откройте Photoshop и создайте новый документ. Я использовал размер 2600×2600 пикселей. Залейте фоновый слой черным цветом с помощью инструмента Paint Bucket (Заливка) (G).

Шаг 2. С помощью Ellipse Tool (Эллипс) (U) создайте круг в центре документа, используйте цвет #d51a37

Шаг 3. С помощью Magic Wand Tool (Волшебная палочка) (W) выделите круг, а затем, не снимая выделения, создайте новый слой поверх слоя с красным кругом.

Шаг 4. Залейте новый слой белым цветом внутри выделения с помощью инструмента Paint Bucket (Заливка) (G).

Шаг 5. Воспользуемся фильтром Filter> Noise> Add Noise (Фильтр> Шум> Добавить шум). Убедитесь, что цвет переднего плана – чёрный, а цвет заднего – белый. Установите настройки: Эффект- 150%, По Гаусу, Монохромный.

Шаг 6. Не снимая выделения, используем Filter> Blur> Radial Blur (Фильтр> Размытие> Радиальное Размытие). Настройки: Количество – 40, Метод – Кольцевой, Качество – Наилучшее.

Шаг 7. Переходим к коррекции изображения Image> Adjustment> Levels (Изображение> Коррекция> Уровни). Изменяем входные значения: 103 для черного маркера, 1,00 для серого и 192 для белого маркера .

Шаг 8. Измените режим наложение на Darken (Замена тёмным) и установите непрозрачность – 100%.

Шаг 9. Повторите предыдущие пункты, чтобы создать серый круг щита.

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

Шаг 10. Повторите те же шаги, выполненные ранее, чтобы создать три других круга и звезду.

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

Шаг 11. Пришло время придать щиту реалистичность. Первое, что нужно сделать, это использовать стили слоя.
Layer> Layer Styles> Drop Shadow (Слой> Стиль Слоя> Тень). Используйте белый цвет, Режим наложения – Линейный осветлитель, Непрозрачность – 70%, угол – -4 градуса, Смещение – 5 пикс., Размер – 4 пикс. Контур выберите, как на изображении ниже.

Шаг 12.Применим стиль слоя Внутренняя тень (Inner Shadow).
Используйте Линейный Затемнитель для режима наложения, черный цвет, 90% непрозрачность, 45 градусов угол, Смещение – 5 пикс., Размер – 3 пикс., Контур, как на изображении ниже.

Шаг 13. Применим стиль слоя Обводка (Stroke). Используйте размер 2 пикселя, Положение – Внутри, чёрный цвет.

Шаг 14. Примените эти стили слоя для всех кругов и звезды. Вы можете корректировать стили слоя в зависимости от размеров ваших фигур.

Примечание: автор не указал, однако можно предположить, что перед применением стилей слоя у вас должно остаться 5 слоёв (от края к центру): красный, серый, красный, синий, звезда.

Шаг 15. Пришло время добавить текстуру. Я выбрал текстуру с Shutterstock, вы можете найти её по ссылке .

Шаг 16. Добавьте маску слоя в форме круга и также измените режим наложение на Soft Light (Мягкий свет).

Примечание: добавьте текстуру поверх всех слоёв, нажмите Crtl+клик по миниатюре самого большого круга, убедитесь, что активным является слой с текстурой и добавьте маску слоя.

Шаг 17. Ещё одну текстуру я взял с DeviantArt и вы можете скачать её здесь . Возьмите Brush Tool (Кисть) (B), Жёсткость -0%, цвет – белый и нарисуйте в центре текстуры небольшой круг, как на изображении ниже. При соответствующем режиме наложения это добавит блик на щит.

Шаг 18. Измените режим наложения на Color Burn (Затемнение основы), непрозрачность – 30%.
Примечание: маску слоя для текстуры добавьте как в шаге 16.

Шаг 19. Создайте новый слой и возьмите Gradient Tool (Градиент) (G), тип градиента – конусовидный и залейте градиентом документ. Для этого эффекта я создал свой собственный градиент, как на изображении ниже.

Шаг 20. Измените режим наложения на Overlay (Перекрытие), непрозрачность – 80%.
Примечание: маску слоя для текстуры добавьте как в шаге 16.

Шаг 21. Дублируйте слой (Ctrl+J) и измените режим наложения на Color Dodge (Осветление основы), непрозрачность – 30%. Затем перейдите в Layer> Layer Mask> Reveal All (Слой> Слой-Маска> Показать всё). Выберите Brush Tool (Кисть)(B). Возьмите очень мягкую кисть чёрного цвета начните зарисовывать области, которые необходимо скрыть. В нашем случае это области 1,2 и 3 (см. скриншот).

Шаг 22. Создайте новый слой поверх всех остальных, нажмите Ctrl+клик по миниатюре самого большого круга, чтобы получить выделение. Затем примените Filter> Render> Clouds (Фильтр> Рендеринг> Облака). Убедитесь, что цвет переднего плана – чёрный, а заднего – белый цвет.

Шаг 23. Измените режим наложения на Soft Light (Мягкий свет) и непрозрачность – 50%.

Заключение
Выделите все слои и дублируйте их, после чего объедините новые слои в один с помощью Layer> Merge Layers (Слой> Объединить слои).

Примечание: удобнее будет создать сразу один объединённый слой: Ctrl+A, Shift+Ctrl+C, Shift+Ctrl+V.

Затем перейдите в Image> Adjustment> Desaturate (Изображение> Коррекция> Обесцветить). Измените режим наложения на Soft Light (Мягкий свет), непрозрачность – 50%.

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

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

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

Шаг 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. Итоговое изображение

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

Также уроки которые могут вас заинтересовать

В этом уроке мы будем рисовать логотип в виде многогранного камня в Adobe Illustrator.

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

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

В этом уроке мы будем рисовать упрощенную батарейку в Adobe Illustrator.

В этом уроке мы будем рисовать подарочные коробки в Adobe Illustrator.

В этом уроке мы будем рисовать снежинку.

В этом уроке рисуем стилизованный городской пейзаж в Adobe Illustrator.

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

В этом уроке мы узнаем как за 45 минут сделать стильную иконку уровня заряда батарейки в Adobe Illustrator.

В этом уроке мы узнаем как быстро нарисовать стильную 3D-иконку в Adobe Illustrator на примере символа курсора.

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

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

Комментарии 56

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

Источники:

https://photoshoppro.ru/dizajn/305-ikonka-shhity.html
https://bb3x.ru/blog/risuem-shhit-v-fotoshop/
https://sveres.ru/lessons/risovanie/sozdaem-stilnuyu-ikonku-s-nulya.html