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

Содержание
  1. Как сделать иконки для социальных сетей в фотошопе
  2. Шаг 15
  3. Шаг 16
  4. Шаг 17
  5. Шаг 18
  6. Финальные результаты:
  7. Как создать значок в фотошопе. Как нарисовать иконку в фотошопе
  8. Шаг 1.
  9. Шаг 2.
  10. Шаг 3.
  11. Шаг 5.
  12. Шаг 6.
  13. Шаг 7.
  14. Шаг 8.
  15. Шаг 9.
  16. Шаг 10.
  17. Шаг 11.
  18. Шаг 12.
  19. Шаг 13.
  20. Шаг 14.
  21. Шаг 15.
  22. Шаг 16.
  23. Шаг 17.
  24. Шаг 18.
  25. Шаг 19.
  26. Шаг 20.
  27. Шаг 21.
  28. Шаг 22.
  29. Шаг 23.
  30. Шаг 24.
  31. Шаг 25.
  32. Шаг 26.
  33. Шаг 27.
  34. Шаг 1: Создание фигуры облака
  35. Шаг 2: Добавление иконок
  36. Итоговый результат: Набор векторных иконок в форме облака
  37. Поддержка формата ICO
  38. Вот наш конечный результат:
  39. Как нарисовать иконку в Фотошопе
  40. Шаг 2. Создание фона
  41. Шаг 3. Создание корпуса телевизора
  42. Шаг 4. Промежуточный результат
  43. Шаг 5. Создание корпуса телевизора
  44. Шаг 6. Промежуточный результат
  45. Шаг 7. Создание корпуса телевизора
  46. Шаг 8. Промежуточный результат
  47. Шаг 9. Создание корпуса телевизора
  48. Шаг 10. Промежуточный результат
  49. Шаг 11. Создание корпуса телевизора
  50. Шаг 12. Создание корпуса телевизора
  51. Шаг 13. Создание экрана
  52. Шаг 14. Промежуточный результат
  53. Шаг 15. Создание экрана
  54. Шаг 16. Промежуточный результат
  55. Шаг 17. Создание экрана
  56. Шаг 18. Создание экрана
  57. Шаг 19. Создание дополнительных элементов
  58. Шаг 20. Создание дополнительных элементов
  59. Шаг 21. Промежуточный результат
  60. Шаг 22. Создание дополнительных элементов
  61. Шаг 23. Промежуточный результат
  62. Шаг 24. Создание дополнительных элементов
  63. Шаг 25. Промежуточный результат
  64. Шаг 26. Создание дополнительных элементов
  65. Шаг 27. Создание дополнительных элементов
  66. Шаг 28. Промежуточный результат
  67. Шаг 29. Создание дополнительных элементов
  68. Шаг 30. Создание марки телевизора
  69. Шаг 31. Промежуточный результат
  70. Шаг 32. Создание антенны
  71. Шаг 33. Промежуточный результат
  72. Шаг 34. Рисование тени
  73. Шаг 35. Рисование тени
  74. Шаг 36. Промежуточный результат
  75. Шаг 37. Добавление тени от ножек
  76. Шаг 38. Итоговое изображение
  77. Рисуем иконку папки с документами в Фотошоп
  78. Шаг 1
  79. Шаг 3
  80. Шаг 4
  81. Шаг 5
  82. Шаг 8
  83. Шаг 9
  84. Шаг 10
  85. Шаг 11
  86. Шаг 12
  87. Шаг 13
  88. Шаг 14

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

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

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

То, что вы будете создавать:

Создавать плоские иконки мы начнем с фона, потом добавим иконкам эффекты, чтобы придать им оригинальность, далее нарисуем длинные тени. Для повторения урока вам понадобится Photoshop CS3 или более поздняя версия.

Ресурсы:

  • Шрифт 1 — http://fontawesome.io/cheatsheet/
  • Шрифт 2 — http://fontawesome.io/

Шаг 1

Создайте новый файл (Ctrl + N) размером 500 × 400 пикселей.

Создайте новую группу (CTRL+G) и назовите её «Фон».

Шаг 2

Заполните фон цветом # e7e9ea с помощью инструмента Заливка (Bucket Tool).

Шаг 3

Чтобы добавить больше эффектов на задний план, мы добавим градиент. Нажмите на иконку Корректирующий слой (Adjustment Layer) и выберите Градиент (Gradient), используйте следующие настройки:

Режим наложения слоя Мягкий свет (SoftLight) |Непрозрачность: 25%

Шаг 4

Создайте новую группу и назовите её «symbols».

Шаг 5

Прежде чем начать работу, нам нужно настроить меню ЛинейкииСетки (Rulers and Grids).

Перейдите в меню Вид-Линейки (ViewRulers) и Вид-Показать-Сетки (ViewShowGrids).

Вот мои настройки дляЛинеек и Сеток (их можно открыть, перейдя в Редактирование-Настройки (Edit-Preference):

Чтобы создать Направляющую линию, нужно просто щелкнуть и перетащить её из линейки. Для создания вертикальной направляющей перетаскивайте из вертикальной линейки и наоборот. Вот как я разделил холст (каждый значок равен 50 × 50 пикселей и расстояние между каждым значком 25 пикселей):

Шаг 6

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

Как правило, это делается путем размещения CSS шрифта на ваш сайт, но так как мы работаем с Photoshop, нам нужно скопировать каждый значок, который вы хотите использовать из шпаргалки. Зайдите на страницу, выберите значок, который вы хотели бы нарисовать.

Я использовал иконки для следующих (социальные сети) сайтов: ; ; Tumblr; ;Instagram; ; 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)) я создал фон иконок,

Вот все цвета, которые я использовал:
: # 6bd1f4;
: # 5a93cb;
Tumblr: # 3c6a9c;
Google +:#e44940;
Instagram:#9bd29d;
:#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) и используйте эти настройки:

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

Источник: https://pixelbox.ru/kak-sdelat-ikonki-dlya-sotsialnyh-setej-v-fotoshope

Как создать значок в фотошопе. Как нарисовать иконку в фотошопе

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

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

Шаг 1.

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

Шаг 2.

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

Шаг 3.

Используйте с радиусом 35pxBODY, откройте Стили Слоя и примените следующие настройки.

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

Шаг 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.

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

Шаг 23.

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

Шаг 24.

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

Шаг 25.

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

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

Шаг 26.

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

Шаг 27.

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

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

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

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

Шаг 1: Создание фигуры облака

Создайте новый документ 745х200 пикслей. Установите основной цвет голубой #48abff . Возьмите инструмент «Эллипс» щелкните левой кнопкой мыши по документу, в диалоговом окне установите ширина и высота: 70 пикселей

Сделайте дубликат фигуры, для этого нажмите сочетание клавиш Ctrl + J. С помощью стрелки передвиньте фигуру в право

Снова возьмите инструмент «Эллипс», щелкните по документу и установите ширина/высота: 90 пикселей;. Поместите фигуру как показано ниже:

Создайте еще одну фигуру, только в этот раз ширина и высота: 40 пикселей;. У вас должно получится, так:

Теперь нужно выровнять нижнюю часть облака. Для этого воспользуйтесь инструментом «Прямоугольник» установив ширина: 90 пик.; высота: 30 пик;

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

Сделайте дубликат смарт-объекта. Для этого нажмите Ctrl + J. Установите значение параметра Заливка: на 1%.

Перейдите на основной слой со смарт объектом, с помощью трансформации немного уменьшите фигуру. Для этого откройте вкладку Редактирование — > Трансформирование -> Масштабирование или нажмите сочетание клавиш Ctrl+ T.

Теперь объедините эти два смарт объекта в один смарт объект. Как это сделать было написано выше. Назовите данный слой «Облако».

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

Шаг 2: Добавление иконок

Воспользуйтесь инструментом «Произвольная фигура». Установите основной цвет «Белый». Кликнув правой кнопкой мыши по документу у вас откроется диалоговое окно, где нужно выбрать будущую иконку. Я выбрал фигуру «Почта», которая подразумевает страницу с формой обратной связи.

Итоговый результат: Набор векторных иконок в форме облака

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

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

Поддержка формата ICO

Недавно мне понадобилось нарисовать другу favicon в photoshop. После начатой работы я вдруг понял, что photoshop не дружит с ico форматом. Недолго думая, я вдруг вспомнил, что уже сталкивался с этим и подружить ico я мог только с плагином о котором я вам и расскажу.

Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.

Итак первым делом давайте скачаем плагин, примерно с этого сайта выбрав для какой разрядности (я не знаю как у меня разрядность Windows) вам нужен плагин или для 32-ух или для 64-ёх разрядной системы

После того, как вы загрузили zip файл извлеките из него один файл с расширением 8bi.Теперь этот файл киньте в папку (для 32-ух и 64-ёх разрядных систем)

C:/Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Required/Plug-Ins/File Formats/

C:/Program Files (x86)/Adobe/Adobe Photoshop CS6/Required/Plug-Ins/File FormatsПосле этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

После того, как фотошоп у нас уже поддерживает ico формат, мы можем приступать к созданию иконки в фотошопе. Если вы хорошо рисуете, то можете нарисовать на новом документе, с прозрачным фоном иконку. Разрешение не более чем 512 на 512 пикселей. Всё равно сохранять иконку мы будем не в формате 512 на 512, а в меньшем!

Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе. Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Наша иконка готова, и мы её успешно применяем!

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.

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

Используя инструмент «Волшебная палочка» (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:

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

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

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

Источник: https://redcomrade.ru/bloki-pitaniya/kak-sozdat-znachok-v-fotoshope-kak-narisovat-ikonku-v-fotoshope/

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

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

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

Создайте новый документ (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. Итоговое изображение

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

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

Источник: https://sveres.ru/lessons/risovanie/sozdaem-stilnuyu-ikonku-s-nulya.html

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

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

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

Финальное изображение:

Скачать архив с материалами к уроку

Шаг 1

Откройте программу Photoshop и создайте новый документ, для этого нажмите комбинацию клавиш Control + N. В открывшемся меню введите следующие данные:

Примечание переводчика:на скриншоте

  • Высота(Width): 600пикселей(pixels)
  • Ширина(Width): 600пикселей(pixels)
  • Разрешение(Resolution): 72пиксель/дюйм(pixels/inch)
  • Цветовой режим(ColorMode):RGBcolor, 8bit
  • Содержимоефона(Background Contents):Белый(White)
  • Цветовойпрофиль(Color profile): sRGB IEC61966-2.1
  • Попиксельнаяпропорция(Pixel Aspect Ratio):Квадратныепиксели(square pixels)

После ввода данных нажмите Ок.

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

Теперь нам необходимо настроить параметры сетки, перейдите в Редактирование – Настройки – Направляющие, сетка и фрагменты (Edit > Preferences > Guides, Grid & Slices) и сосредоточьтесь на разделе Сетка (Grid).

Введите значение 5 в поле «Линия через каждые» (Gridline Every) и 1 в поле «Внутреннее деление на» (Subdivision). Установите цвет сетки #a7a7a7.

После того как вы выставили все настройки, нажмите Ок. Не отвлекайтесь на сетку, в дальнейшем она облегчит нам работу. Вы можете всегда отключить или включить сетку с помощью сочетания клавиш CTRL + ”. Вам также следует открыть панель Инфо (Окно – Инфо (Window > Info)), чтобы иметь возможность текущего просмотра размера и положения фигур.

Шаг 3

Перейдите на панель Слои (Layers) (если панель слои не отображается, перейдите в Окно – Слои (Window – Layers)) и переименуйте векторную форму на «back», затем дважды щелкните по слою, чтобы открыть окно Стиль слоя (Layer Style). Примените к слою следующие эффекты: Внутренняя тень (Inner Shadow) и Наложение градиента(Gradient Overlay).

Примечание переводчика:на скриншотах

Внутренняя тень:

  • Режим наложения(Blend Mode):Перекрытие(Overlay), цвет белый (#ffffff)
  • Непрозрачность(Opacity): 75%
  • Угол(Angle): 90°
  • Глобальное освещение(Use Global Light): Снять галочку
  • Смещение(Distance): 1 рх
  • Стягивание(Choke): 0%
  • Размер(Size): 1 рх
  • Сглаживание(Anti-aliased): Снять галочку
  • Шум(Noise): 0%

Наложение градиента

  • Режим наложения(Blend Mode):Перекрытие(Overlay)
  • Непрозрачность(Opacity): 100%
  • Градиент(Gradient): Редактор градиентов
  • цвет #000000 позиция 40%
  • цвет #232323 позиция 80%
  • цвет #505050 позиция 100%
  • Выровнять по слою(Align with Layer): Поставить галочку
  • Стиль(Style):Линейный(Linear)
  • Угол(Angle): 90°
  • Масштаб(Scale): 100%

Шаг 4

  • Деформация (Warp): Выпуклый (Bulge)
  • Включите кнопку: Изменить ориентациюдеформации (Orientation)
  • Изгиб (Bend): 5%
  • Установить искажение по вертикали (Vertical distortion) V: -3%

После этого нажмите Enter. У вас должен получиться такой же результат, как на втором изображении. Затем переименуйте слой, назовите его «front» .

Шаг 5

Перейдите к слою под названием «front» и примените следующие эффекты:

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

  • Режим наложения (Blend Mode): Перекрытие (Overlay), цвет белый (#ffffff)
  • Непрозрачность (Opacity): 50%
  • Угол (Angle): 90°
  • Глобальное освещение (Use Global Light): Снять галочку
  • Смещение (Distance): 3 рх
  • Стягивание (Choke): 0%
  • Размер (Size): 5 рх
  • Сглаживание (Anti-aliased): Снять галочку
  • Шум (Noise): 0%

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

  • Режим наложения (Blend Mode): Мягкий свет (Soft Light)
  • Непрозрачность (Opacity): 25%
  • Метод (Technique): Мягкий (Softer) 
  • Источник (Source): На краях (Edge) 
  • Стягивание (Choke): 0%
  • Размер (Size):10 рх
  • Сглаживание (Anti-aliased): снять галочку
  • Диапазон (Range): 50%
  • Колебание (Jitter): 0%

Тиснение (Bevel and Emboss):

  • Стиль (Style): Внутренний скос (Inner Bevel)
  • Метод (Technique): Плавное (Smooth) 
  • Глубина (Depth): 100%
  • Направление (Direction): Вверх (Up)
  • Размер (Size): 100 рх
  • Смягчение (Soften): 0 рх
  • Угол (Angle): 90 °
  • Высота (Altitude): 30°
  • Глобальное освещение (Use Global Light): Снять галочку
  • Контурглянца (Gloss Contour): Волнистыйуклон (Rolling Slope — Descending)
  • Сглаживание (Anti-aliased): Снять галочку
  • Режимподсветки (Highlight Mode): Умножение (Multiply), Цвет черный #000000
  • Непрозрачность (Opacity): 30%
  • Режимтени (Shadow Mode): Перекрытие (Overlay), Цвет белый #ffffff
  • Непрозрачность (Opacity): 30%

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

  • Режимналожения (Blend Mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 100%
  • Градиент (Gradient): Редактор градиентов
  • цвет #7с7с7с позиция 0%
  • цвет #959595 позиция 10%
  • цвет #afafaf позиция 25%
  • цвет #fafafa позиция 100%
  • Выровнять по слою (Align with Layer): Поставить галочку
  • Стиль (Style): Линейный (Linear)
  • Угол (Angle): 90°
  • Масштаб (Scale): 100%

Наложение узора (Patter Overlay):

  • Режим наложения (Blend Mode): Перекрытие (Overlay),
  • Непрозрачность (Opacity): 90%
  • Узор (Patter): Выберите самый темный узор из Neutral Tileable Leather Patterns
  • Масштаб (Scale): 25

Примечание переводчика:для того чтобы загрузитьузор(Patter) кожи, нажмите на шестеренку и в раскрывшемся меню выберите Загрузить узоры. После этого укажите путь к папке с узорами кожи, которые вы скачали, и выберите файл webtreats leather patterns.pat.

Шаг 8

Переместите слой с синим прямоугольником под слой «front». Откройте Стиль слоя (Layer Style) и выберите эффект Обводка (Stroke).

Примечание переводчика:К эффектуОбводка(Stroke) примените следующие настройки (на скриншоте):

  • Размер(Size): 1 рх.
  • Положение(Position):Внутри(Inside)
  • Режим наложения(BlendMode):Нормальный(Normal)
  • Непрозрачность(Opacity): 100%
  • Цвет(Color): #90b0d7

После этого, щелкните правой кнопкой мыши по слою с синим прямоугольником и выберите Копировать стиль слоя (Copy Layer Style)

Шаг 9

Для следующих шагов нам понадобится сетка с настройками «Линия через каждые»(Gridline Every) 1 px, поэтому перейдите в Редактирование – Настройки – Направляющие, сетка и фрагменты (Edit > Preferences > Guides, Grid & Slices) и введите 1 в поле «Линия через каждые» (Gridline Every). Выберите инструмент Прямоугольник (Rectangle Tool) и создайте прямоугольник размером 105 x 70 пикселей, расположите его так, как показано на первом изображении. Нажмите CTRL + T, введите вверху угол поворота -5° и нажмите Enter.

Переместите этот слой под слой с первым синим прямоугольником, затем щелкните правой кнопкой мыши по нему и в раскрывшемся меню выберите Вклеить стиль слоя (Paste Layer Style).

Шаг 10

Переместите этот слой под слой «front», затем щелкните правой кнопкой мыши по нему и в раскрывшемся меню выберите Вклеить стиль слоя (Paste Layer Style).

Шаг 11

Отключите Сетку (Просмотр – Показать – Сетку ( View > Show > Grid)) и продублируйте слой под названием «front» (CTRL + J ). Очистите продублированный стиль слоя, для этого щелкните правой кнопкой мыши по слою и выберите Очистить стиль слоя (Clear Layer Style).

Уменьшите Заливку (Fill) продублированного слоя до 0%.

Затем перейдите в Слой – Стиль слоя – Параметры наложения (Layer > Layer Style > Blending Options) и примените следующие эффекты:

Примечание переводчика:на скриншотах

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

  • Режим наложения(Blend Mode):Мягкий свет(Soft Light), цвет белый (#ffffff)
  • Непрозрачность(Opacity): 100%
  • Угол(Angle): 90°
  • Глобальное освещение(Use Global Light): Снять галочку
  • Смещение(Distance): 1 рх
  • Стягивание(Choke): 0%
  • Размер(Size): 0 рх
  • Сглаживание(Anti-aliased): Снять галочку
  • Шум(Noise): 0%

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

  • Режим наложения(Blend Mode):Нормальный(Normal) 
  • Непрозрачность(Opacity): 40%
  • Шум(Noise): 0%
  • Метод(Technique): Мягкий(Softer)
  • Размах(Spread): 0%
  • Размер(Size): 4 рх

Шаг 12

Откройте диалоговое окно Стиль слоя, затем перейдите в Параметры наложения (Blending Option) и установите галочку Слой-маска скрывает эффекты (Layer Mask Hidden Effects). После этого нажмите комбинацию клавиш Ctrl + D для того, чтобы снять выделение.

Шаг 13

Перейдите в Стиль слоя (Layer Style) и примените следующие эффекты:

Тень (Drop Shadow):

  • Режим наложения (Blend Mode): Мягкий свет (Soft Light), Цвет белый (#ffffff)
  • Непрозрачность (Opacity): 100%
  • Угол (Angle): 90°
  • Глобальное освещение (Use Global Light): Снять галочку
  • Смещение (Distance): 1 рх
  • Размах (Spread): 0%
  • Размер (Size): 0

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

  • Режим наложения (Blend Mode): Мягкий свет (Soft Light), цвет черный (#000000)
  • Непрозрачность (Opacity): 100%
  • Угол (Angle): 90°
  • Глобальное освещение (Use Global Light): Снять галочку
  • Смещение (Distance): 1 рх
  • Стягивание (Choke): 0%
  • Размер (Size): 8 рх
  • Сглаживание (Anti-aliased): Снять галочку
  • Шум (Noise): 0%

Тиснение (Bevel and Emboss):

  • Стиль (Style): Внутренний скос (Inner Bevel)
  • Метод (Technique): Плавное (Smooth) 
  • Глубина (Depth): 100%
  • Направление (Direction): Вверх (Up)
  • Размер (Size): 2 рх
  • Смягчение (Soften): 5 рх
  • Угол (Angle): 90°
  • Высота (Altitude): 30°
  • Глобальное освещение (Use Global Light): Снять галочку
  • Сглаживание (Anti-aliased): Снять галочку
  • Режим подсветки (Highlight Mode): Мягкий свет (Soft Light), Цвет черный #000000
  • Непрозрачность (Opacity): 80%
  • Режим тени (Shadow Mode): Нормальный (Normal), Цвет черный #000000
  • Непрозрачность (Opacity): 0%

Обводка (Stroke):

  • Размер (Size): 1 рх
  • Положение (Position): Внутри (Inside)
  • Режим наложения (Blend Mode): Мягкий свет (Soft Light)
  • Непрозрачность (Opacity): 100%
  • Тип обводки (Fill Type): Цвет (Color)
  • Цвет (Color): Черный #000000

Шаг 14

Мы закончили, теперь вы можете легко изменить цвет иконки. Перейдите на панель Слои (Layer), сфокусируйте свое внимание на векторных фигурах с цветом, установленным на # c69c6d, и просто замените его цветом, который вы предпочитаете.

Примечание переводчика:для того чтобы изменить цвет иконки (папки) выберите слой под названием«front», затем дважды кликните по миниатюре слоя и в палитре цветов подберите подходящий цвет. Проделайте тоже самой для слоя под названием «back».

Готово!

Вот так должен выглядеть ваш конечный результат.

своей работой и задать вопрос можно на странице урока сайта photoshop-master.ru

Источник: https://zen.yandex.ru/media/id/5ba9ebc78f43c900aac86cde/5c4ff9c1c7776100ae887ad8

Делаем просто
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: