Рисуем иконку компаса в photoshop

Рисуем иконку компаса в PhotoshopВ этом уроке мы будем создавать простой, но интересный компас в программе Adobe Photoshop. Мы будем работать с различными инструментами, такими как Pen/Перо, Rounded Rectangle/Прямоугольник с закругленными краями и др. Также вы узнаете как объединять базовые фигуры для создания более сложных. Вы увидите как работать со стилями слоев и создавать самые разные тени, включая длинную.

Рисуем иконку компаса в Photoshop

1. Готовимся к работе

Шаг 1

Создайте новый файл Photoshop (File > New/Файл>Создать). Укажите документу размер 500 px × 500 px.

Рисуем иконку компаса в Photoshop

Шаг 2

Кликните по иконке Add Adjustment Layer/Добавить корректирующий слой в нижней части палитры Layers/Слои. Выберите Solid Color/Чистый цвет.

Рисуем иконку компаса в Photoshop

Шаг 3

Выберите светло-красный оттенок (#db687b).

Рисуем иконку компаса в Photoshop

Шаг 4

Дважды кликните по слою с чистым цветом и укажите ему стиль слоя Pattern Overlay/Перекрытие узора. Используйте узор free pixel pattern from PSDfreemium. Настройте параметры стиля как показано ниже.

Рисуем иконку компаса в Photoshop

Шаг 5

Смените имя слоя на background (фон). Старайтесь переименовывать все слои, чтобы потом было понятно где что находится.

Рисуем иконку компаса в Photoshop

2. Создание базы

Шаг 1

Для начала нужно создать базу для иконки. Выберите в качестве первого цвета #3ab2cb. Возьмите инструмент Rounded Rectangle/Прямоугольник с закругленными краями, и укажите Radius/Радиус в 30 px. Удерживая Shift, растяните фигуру.

Рисуем иконку компаса в Photoshop

Шаг 2

Дважды кликните по слою с прямоугольником и укажите ему стиль слоя Gradient Overlay/Перекрытие градиента. Выберите градиент от белого к черному. Настройте стиль как показано ниже.

Рисуем иконку компаса в Photoshop
Рисуем иконку компаса в Photoshop

Шаг 3

Создайте новый слой и разместите его над фоном с базой иконки. Удерживая Control кликните по слою с базой, чтобы создать выделение по контуру базы. В новом слое кликните правой кнопкой по выделению и выберите Stroke/Обводка. Настройте параметры обводки как показано ниже.

  • Шаг 4

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

  1. Шаг 5
  2. Повторите предыдущие шаги, чтобы создать еще один слой с обводкой, на этот раз укажите обводке следующие параметры:
  3. Шаг 6
  4. Также добавьте слою с обводкой маску, залитую черным цветом и, рисуя белым цветом в маске, проявите некоторые части обводки в верхней части базы.

3. Рисуем компас

Шаг 1

Нарисуйте круг, затем круг поменьше внутри первого в режиме Subtract Front Shape/Вычесть переднюю фигуру. В итоге должно получиться кольцо. Укажите ему цвет #e4ffff.

  • Шаг 2
  • В режиме Combine Shapes/Объединить фигуры нарисуйте в верхней части кольца треугольник.
  • Шаг 3
  • И еще один треугольник в нижней части.
  • Шаг 4
  • Дублируйте оба треугольника и поверните их на 90°.
  • Теперь у нас четыре указателя на все части света.
  • Шаг 5
    Повторите предыдущие шаги, чтобы добавить меньшие треугольники на 45°.
  • Шаг 6

Кликните дважды по слою с фигурами кольца и треугольников, чтобы указать им стили слоя Gradient Overlay/Перекрытие градиента и Drop Shadow/Тень. Настройте параметры стилей как показано ниже.

  1. Шаг 7
  2. Нарисуйте еще одно меньшее кольцо поверх предыдущей фигуры и укажите ему цвет #eaeded.
  3. Step 8
  4. Нарисуйте половинки треугольников того же цвета поверх фигуры с целыми треугольниками.

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

Шаг 9

Кликните дважды по слою с новым кольцом и половинками треугольника. Укажите слою стиль Gradient Overlay/Перекрытие градиента.

  • Укажите линейный градиент от серого цвета (#d7d7d7) к белому (#ffffff).
  • Шаг 10

Создайте новый слой поверх всех остальных. Удерживая Control, кликните по предыдущему слою, чтобы создать выделение по контуру. В новом слое кликните по выделению правой кнопкой и выберите Stroke/Обводка. Настройте параметры обводки как показано ниже, используя цвет #eeefef.

  1. Получится легкая, тонкая обводка.
  2. Шаг 11
  3. Укажите слою с обводкой маску, залейте ее черным цветом и белым цветом вырисуйте в маске некоторые части обводки, чтобы сделать их вдимыми.
  4. Шаг 12

Создайте новый слой и расположите его под фигурами компаса. Удерживая Control, кликните по фигуре компаса, чтобы создать выделение по контуру. В меню выберите Edit > Fill/Редактировать/Заливка. Настройте параметры заливки как показано ниже.

Шаг 13

Снимите выделение, нажав Control D. В меню выберите Filter > Blur > Motion Blur/Фильтр>Размытие>Размытие в движении. Укажите угол в -45°.

Шаг 14

Смягчите тень при помощи фильтра Gaussian Blur/Размытие по Гауссу. В меню выберите Filter > Blur > Gaussian Blur/Фильтр>Размытие>Размытие по Гауссу.

Шаг 15

На данный момент это не та тень, к которой мы стремимся. Чтобы исправить это, укажите слою с тенью маску и замаскируйте с ее помощью ненужные части тени. Также, чтобы сделать тень еще легче, снизьте Opacity/Непрозрачность.

  • Шаг 16

Добавим компасу стрелку. Нарисуйте квадрат в центре компаса. Затем при помощи свободного трансформирования (Control T) поверните квадрат на 45°, затем сплющите его, как показано ниже, и вновь поверните.

Шаг 17

Кликните дважды слою со стрелкой, чтобы указать ему стили слоя Inner Glow/Внутреннее свечениеGradient Overlay/Перекрытие градиент и Drop Shadow/Тень. Настройте стили как показано ниже.

  1. Шаг 18

Мы хотим, чтобы половина стрелки была белой, а вторая половина красной. Для этого просто дублируйте стрелку и при  помощи инструмента Pen/Перо удалите нижнюю точку.

Шаг 19

Нарисуйте небольшой круг в центре стрелки. Кликните дважды по слою с кругом, чтобы указать ему стили слоя Inner Glow/Внутреннее свечениеGradient Overlay/Перекрытие градиента и Drop Shadow/Тень.

4. Добавляем тень

Шаг 1

Создайте новый слой и поместите его между компасом и стрелкой. При помощи инструмента Polygonal Lasso/Прямолинейное лассо нарисуйте тень как показано ниже и залейте ее черным цветом.

Снизьте Opacity/Непрозрачность этого слоя до 20%. Удерживая Control, кликните по прямоугольной базе и добавьте маску слою с тенью.

Теперь тень видна только на базе.

Шаг 2

Чтобы усилить эффект объема, добавим тени. Создайте еще один слой между стрелкой и компасом и черным цветом подрисуйте тени под стрелкой, как показано ниже.

Шаг 3

Добавьте еще один слой и вновь добавьте тени под стрелкой. Инструментом Brush/Кисть на 0% Hardness/Жесткости и Opacity/Непрозрачности в 5% рисуйте тень под стрелкой.

Step 4

Создайте еще один слой. На этот раз добавим бликов. Рисуйте белым цветом в верхней левой части базы. Снизьте Opacity/Непрозрачность слоя.

  1. Повторите этот шаг, рисуя белым в других частях иконки, пока она не перестанет казаться плоской.
  2. Шаг 5

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

Шаг 6

Нажмите Control D, чтобы снять выделение. Смягчите тень при помощи фильтра Gaussian Blur/Размытие по Гауссу.

Шаг 7

Вы можете дублировать тень, нажав Control J, если хотите сделать ее более заметной. Если же тень слишком заметна, снизьте параметр Opacity/Непрозрачность.

Результат

  • Автор урока Mohammad Jeprie
  • Перевод — Дежурка
  • Смотрите также:

Источник: http://www.dejurka.ru/tutorial/compass-icon/

Иконка компасса с длинными тенями · «Мир Фотошопа»

Рисуем иконку компаса в Photoshop Повторяющиеся узоры

Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:

Рисуем иконку компаса в Photoshop

Шаг 2

Создайте слой-заливку Solid Color:

Рисуем иконку компаса в Photoshop

Шаг 3

Выберите цвет #db687b.

Рисуем иконку компаса в Photoshop

Шаг 4

К слою Solid Color примените стиль Pattern Overlay через иконку fx в нижней части панели слоёв.

Рисуем иконку компаса в Photoshop

Шаг 5

Измените имя слоя-заливки на «background».

Рисуем иконку компаса в Photoshop

2. Основа иконки

Шаг 1

Выберите инструмент Rounded Rectangle Tool (U) с радиусом 30 пикселей и создайте фигуру цветом #3ab2cb.

Рисуем иконку компаса в Photoshop

Шаг 2

К основе иконки примените стиль Gradient Overlay:

Рисуем иконку компаса в Photoshop
Рисуем иконку компаса в Photoshop

Шаг 3

Создайте новый слой над слоем основы. Выделите слой основы (удерживая Ctrl, кликните на иконке слоя), кликните правой кнопкой мыши на холсте и выберите пункт Stroke: толщина обводки — 2 пикселя, цвет — #1d6b80.

Рисуем иконку компаса в Photoshop

Шаг 4

К слою обводки добавьте маску и залейте её чёрным цветом. Белой кистью верните обводку в нижней половине квадрата.

Шаг 5

Таким же способом добавьте ещё одну обводку:

Шаг 6

При помощи маски оставьте светлую обводку только в верхней половине. Комбинация светлой и тёмной обводки поможет создать объёмность иконки.

3. Узор компаса

Шаг 1

Инструментом Ellipse Tool (U) создайте круг на иконке. Внутри него создайте ещё один круг меньшего размера и на верхней панели выберите опцию Subtract from Shape. Цвет кольца — #e4ffff.

Шаг 2

К кольцу добавьте треугольник.

Шаг 3

И ещё один внизу.

Шаг 4

Создайте копии обоих треугольников и поверните их на 90 градусов.

Шаг 5

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

Шаг 6

К узору компаса примените следующие стили:

Шаг 7

В середину кольца добавьте ещё одно цветом #eaeded:

Шаг 8

Нарисуйте половинку треугольника:

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

Шаг 9

Примените к последним фигурам стиль Gradient Overlay: #d7d7d7 — #ffffff.

Шаг 10

Создайте новый слой на самом верху. Выделите предыдущую фигуру, которая создаёт объёмность. Обведите выделение цветом #eeefef.

Результат:

Шаг 11

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

Шаг 12

Давайте добавим тень под узором компаса. Выделите весь узор и залейте выделение чёрным цветом на отдельном слое. Опустите слой тень под слой узора.

Шаг 13

Уберите выделение (Ctrl + D) и примените фильтр Motion Blur (Filter ? Blur ? Motion Blur).

Шаг 14

Смягчите тень при помощи фильтр Gaussian Blur (Filter ? Blur ? Gaussian Blur).

Читайте также:  Установка кистей в фотошоп

Шаг 15

Нам нужно оставить тень только на правой стороне узора. Добавьте маску и сотрите лишнюю часть. Уменьшите непрозрачность слоя, чтобы ослабить тень.

Шаг 16

Сейчас мы нарисуем стрелку компаса. Начните с квадрата. Его нужно повернуть на 45 градусов, а затем сжать.

Шаг 17

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

Шаг 18

Половина стрелки должна остаться светлой. Создайте копию слоя стрелки (Ctrl + J) и удалите с неё стили. Создайте обтравочную маску (Ctrl + Alt + G) и инструментом Pen Tool (P) кликните на нижней точке, чтобы удалить её.

Шаг 19

В центр стрелки добавьте маленький круг и примените следующие стили:

4. Длинная тень

Шаг 1

Создайте новый слой между компасом и стрелкой. Инструментом Polygon Tool (U) создайте выделение, показанное на скриншоте и залейте его чёрным цветом. Уменьшите непрозрачность до 20%. Выделите основу иконки и добавьте маску к слою длинной тени.

Шаг 2

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

Шаг 3

Создайте ещё один слой под стрелкой. Выберите мягкую кисть с 5% непрозрачностью и сделайте тень под стрелкой темнее.

Шаг 4

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

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

Шаг 5

Сейчас мы создадим тень от всей иконки. Выделите слой основы, создайте новый слой внизу и залейте его чёрным цветом.

Шаг 6

Уберите выделение (Ctrl + D) и примените фильтр Gaussian Blur (Filter ? Blur ? Gaussian Blur).

Шаг 7

Чтобы сделать тень под иконкой темнее, создайте копию (Ctrl + J). Если эффект покажется слишком сильным, уменьшите непрозрачность.

Конечный результат:

Источник: http://photoshopworld.ru/lessons/645-draw-a-compass-icon-with-a-long-shadow-in-adobe-photoshop/

Как нарисовать иконку компаса в Иллюстраторе

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

Шаг 1

Создайте новый документ, выбрав в меню File > New/Файл>Создать (или нажав Control-N). Укажите настройки как показано ниже:

Рисуем иконку компаса в Photoshop

Шаг 2

Начнем с создания круга размером 52 x 52 px. Укажите ему толщину обводки в 4 px (#443D38), и выровняйте круг по центру рабочей области как показано ниже.

Рисуем иконку компаса в Photoshop

Шаг 3

Нарисуйте еще один круг — поменьше, размером 40 x 40 px с такой же обводкой. Поместите его ровно по центру предыдущего круга. Выделите обе фигуры и сгруппируйте их, нажав Control-G.

Рисуем иконку компаса в Photoshop

Шаг 4

Рисуем сердцевину. Это круг размером 28 x 28 px без обводки и с заливкой цвета #64E89A. Помещаем его в центр нашей композиции.

Рисуем иконку компаса в Photoshop

Шаг 5

Добавим четыре круга размером 4 x 4 px (#443D38), которые будут нашими точками ориентирования по четырем сторонам света. Расположите круги как показано ниже  и сгруппируйте их вместе, нажав Control-G.

Рисуем иконку компаса в Photoshop

Шаг 6

Теперь займемся стрелкой. Нарисуйте прямоугольник размером 12 x 28 px с нашей обводкой — толщиной в 4 px (#443D38). Укажите обводке Round Join/Скругленные углы, и выровняйте относительно рабочей области.

Рисуем иконку компаса в Photoshop

Шаг 7

Инструментом Add Anchor Point/Добавить опорную точку (+) добавьте четыре опорные точки по центру каждой из сторон.

Рисуем иконку компаса в Photoshop

Шаг 8

Инструментом Delete Anchor Point/Удалить опорную точку (-) кликните по всем углам.

Рисуем иконку компаса в Photoshop

Шаг 9

Возьмите инструмент Rotate/Поворот и поверните получившуюся фигуру на 45 градусов ( или кликните по фигуре правой кнопкой и выберите Transform > Rotate/Трансформировать > Повернуть > -45º).

Шаг 10

Иконки рекомендуется создавать в технике Pixel-Perfection. Для этого включите режим Pixel Preview/Пиксельный просмотр (Alt-Control-Y) и все точки стрелки притяните к пиксельной сетке. Для этого выделяйте каждую точку последовательно инструментом Direct Selection/Прямое выделение (A). Нажмите Alt-Control-Y чтобы вернуться в обычный режим.

Шаг 11

Дублируйте фигуру стрелки (Control-C > Control-F) и для копии поменяйте местами обводку и заливку. Инструментом Delete Anchor Point/Удалить опорную точку (-) удалите верхнюю точку. Выделите обе фигуры, составляющие стрелку и сгруппируйте их (Control-G).

Результат

  • Автор урока Andrei Ștefan
  • Ссылка на источник

Уроки Illistrator. Уроки Adobe Illustrator. Уроки Иллюстратора. Adobe illustrator уроки. Уроки adobe illustrator для начинающих. Adobe illustrator уроки на русском. Видео уроки adobe illustrator. Adobe illustrator уроки для начинающих на русском. Adobe illustrator уроки с нуля.

 Уроки adobe illustrator cc для начинающих. Adobe illustrator cc 2019 уроки. Уроки adobe illustrator скачать торрент. Уроки по adobe illustrator cc. Adobe illustrator уроки вектор гайд. Уроки рисования adobe illustrator. Adobe illustrator уроки вектор гайд. Уроки векторной графики в adobe illustrator. Adobe illustrator cc 2018 уроки. Adobe illustrator логотип уроки.

 Уроки adobe illustrator cc 2018 для начинающих. Бесплатные уроки adobe illustrator. Урок 01 что такое adobe illustrator. Уроки работы в adobe illustrator. Adobe illustrator урок. Видео уроки adobe illustrator торрент. Adobe illustrator видео уроки скачать торрент. Adobe illustrator 3d уроки. Уроки adobe illustrator cc 2019 на русском. Интерфейс в adobe illustrator cc 2019 уроки.

Уроки иллюстрация adobe illustrator. Adobe illustrator уроки рисование плашками.

Источник: https://sveres.ru/lessons/risovanie/kak-narisovat-ikonku-kompasa-v-illyustratore.html

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

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

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

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

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

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

Далее нужно сделать обводку фигуры. Для этого откройте вкладку Слои -> Стиль слоя -> Обводка, и установите значения как показано на изображении ниже:

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

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

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

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

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

Рисуем иконку компаса в Photoshop

Далее разместите выбранную фигуру по центру облака. У вас получилась готовая векторная иконка в стиле облака “Обратная связь”.

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

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

Источник: http://ps-magic.ru/news/risuem_vektornye_ikonki_oblakov_dly_saita_v_photoshope/2015-04-12-182

Рисуем значки картинки в фотошоп

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

Для начала создадим новый документ (Ctrl+N). Для будущего фона картинки сделаем радиальную заливку от чёрного к серому. Инструментом градиент  Рисуем иконку компаса в Photoshop проведем мышкой  от центра полотна к краям. Получаем такой фон:

  • Рисуем иконку компаса в Photoshop
  • Далее, на новом слое (Shift+Ctrl+N) рисуем круг с помощью Elliptical Marquee Tool. Заливаем круг любым цветом:
  • Рисуем иконку компаса в Photoshop
  • Снимаем выделение (Ctrl+D) и заходим в стили слоя . Устанавливаем такие настройки стиля «Отбрасывание тени»:
  •  Рисуем иконку компаса в Photoshop
  • Внутренняя тень:
  • Рисуем иконку компаса в PhotoshopВнутреннее свечение:
  • Рисуем иконку компаса в PhotoshopГлянец:
  • Рисуем иконку компаса в Photoshop
  • Наложение градиента:
  • Рисуем иконку компаса в Photoshop
  • Жмём ОК и смотрим на результат:
  • Рисуем иконку компаса в Photoshop
  • Теперь будем работать с бликами на значке. На новом слое делаем овальное выделение и заливаем его радиальным градиентом от белого к прозрачному как на рисунке ниже:
  • Рисуем иконку компаса в Photoshop

Копируем этот слой (Ctrl+J) и снижаем прозрачность на первом слое с овалом где-то до 50%. На верхнем слое с овалом делаем выделение в форме дуги с помощью Polygonal Lasso Tool, инвертируем область выделения (Shift+Ctrl+I) и жмём Del. Вот, что в итоге должно получиться:

  1. Копируем слой с белой дугой, жмём Ctrl+T, переносим и трансформируем вторую дугу противоположно верхней:
  2. На слое с кругом ставим заливку слоя на 0%:
  3.  Теперь осталось наложить рисунок для значка. Переносим понравившуюся картинку на наш документ:
Читайте также:  Программа для отделения (вырезки) объекта от фона picture cutout guide

Обратите внимание, что слой с картинкой должен находиться под слоем с кругом. Перемещаем картинку под область круга, возможно, придется растянуть или уменьшить картинку. Находясь на слое с картинкой, жмём Ctrl+клик по слою с кругом – должна выделиться область круга. Инвертируем выделение и удаляем. В результате получился готовый значок:

  • Мне захотелось сделать еще значки с городами:
  • С уважением, MsGadfly.

Источник: http://www.fotokomok.ru/risuem-znachki-kartinki-v-fotoshop/

Создание компаса в Inkscape

С помощью этого урока вы сможете создать в Inkscape изображение компаса.

Урок включает в себя 21 шаг, была использована версия Inkscape 0.46.

Рисуем иконку компаса в Photoshop

Создайте новое пустое изображение в Inkscape. Размер документа можете задать по своему усмотрению, но удобней будет, если он будет квадратным.

Создайте небольшой круг (F5), удерживая клавишу Ctrl. Откройте диалог Заливка и обводка (Shift+Ctrl+F). Назначьте цветом заливки белый, а цветом обводки — черный цвет. В опциях обводки задайте ширину линии в 2.5 пиксела.

Теперь выберите инструмент создания звезд и многоугольников (Shift+8). На панели параметров инструмента установите следующие значения:

  • В качестве создаваемого объекта выберите звезду.
  • Задайте 4 угла для создаваемой звезды.
  • В поле Отношение радиусов введите значение 0.160.
  • В оставшиеся два поля (Закругление и Искажение) введите нулевые значения.

Создайте звезду, удерживая клавишу Ctrl, в этом случае вращение будет совершаться с шагом в 15 градусов. В процессе создания вращайте звезду до тех пор, пока не достигнете результата, как на приведенном изображении.

Теперь, когда звезда создана, выровняйте ее и круг относительно страницы. Для этого выделите оба объекта, откройте диалог выравнивания (Shift+Ctrl+A) и выберите выравнивание относительно страницы. После этого выровняйте объекты таким образом, чтобы центр каждого из них совпадал с центром страницы, как на рисунке.

Теперь выберите звезду и продублируйте ее нажатием комбинации Ctrl+D. Уменьшите размер дубликата и повращайте его с нажатой клавишей Ctrl, чтобы новое расположение и размер были как на рисунке ниже. После этого, не снимая выделения со звезды, нажмите на клавишу End, чтобы опустить ее в самый низ относительно других объектов.

Создайте новый слой. Продублируйте большую звезду еще раз и немного уменьшите ее в размере. После этого переместите дубликат на новый слой (это можно сделать, используя клавиши Page Up и Page Down с зажатой клавишей Shift).

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

Теперь нам нужно подредактировать узлы продублированной звезды. Чтобы это сделать, для начала преобразуйте ее в контур — выделите и нажмите комбинацию Shift+Ctrl+C.

Теперь выберите инструмент редактирования узлов контура (F2). По очереди выберите каждый из четырех центральных узлов и нажмите на кнопку Разорвать контур в выделенном узле на панели параметров инструмента.

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

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

В итоге Вы получите примерно такую картину, как на изображении.

Теперь по очереди выделите каждый из отрезков оснований треугольников и создайте на них дополнительные узлы, используя кнопку Вставить новые узлы в выделенные сегменты на панели параметров инструмента (самая первая кнопка со значком +).

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

Сделайте первый слой опять видимым и переместите второй слой под первый (это можно сделать в диалоге слоев, доступном по Shift+Ctrl+L). Теперь передвигайте и вращайте каждый из треугольников на втором слое, пока не получится приведенная картина.

Рисуем иконку компаса в Photoshop

Теперь создайте две больших окружности (круги без заливки) как на рисунке.

Рисуем иконку компаса в Photoshop

Для внешней окружности задайте следующие параметры в диалоге Заливка и обводка (Shift+Ctrl+F):

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

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

Если хотите делать как я, проделайте следующее:

Выделите прямоугольник и сконвертируйте его в контур (Shift+Ctrl+C). Переместите прямоугольник наверх.

Теперь выберите окружность и прямоугольник и выберите в меню Inkscape Эффекты / Создание из контура / Текстура по контуру.

Используйте следующие значения параметров:

Рисуем иконку компаса в Photoshop

В итоге у Вас должно получиться что-то вроде этого:

Рисуем иконку компаса в Photoshop

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

Рисуем иконку компаса в Photoshop

Источник: https://openarts.ru/inkscape-vector-compass/

Рисуем иконку компаса с длинной тенью в Фотошоп / Фотошоп-мастер

  • Рисуем иконку компаса в Photoshop

В этом уроке вы научитесь рисовать простую симпатичную иконку компаса в программе Adobe Photoshop, используя такие инструменты как Перо (Pen Tool), Прямоугольник со скругленными углами (Rounded Rectangle Tool) и Прямоугольник (Rectangle Tool). Также вы научитесь соединять базовые фигуры, чтобы получить из них фигуры более сложные. И, наконец, вы увидите, как добавлять длинную тень к вашей иконке. Давайте приступим.

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

1. Подготовка холста

Шаг 1

Создайте новый документ в Фотошоп. Для этого необходимо зайти в Файл > Создать (File > New), либо просто нажмите комбинацию клавиш Ctrl+N. Задайте размер документа 500*500 пикселей.

  1. Рисуем иконку компаса в Photoshop

Шаг 2

Кликните по иконке Добавить корректирующий слой (Add Adjustment Layer) в нижней части палитры Слои (Layers). Выберите опцию Цвет (Solid Color).

  • Рисуем иконку компаса в Photoshop

Шаг 3

  1. Выберите светло-красный цвет (#db687b).
  2. Рисуем иконку компаса в Photoshop

Шаг 4

Сделайте двойной щелчок мышкой по созданному корректирующему слою.

В появившемся диалоговом окне Стиль Слоя (Layer Style) активируйте свойство Наложение узора (Pattern Overlay). Используйте тот узор, что указан в исходных материалах.

Установите режим наложения (Blend mode) Умножение (Multiply), непрозрачность (Opacity) снизьте до 20%.

  • Рисуем иконку компаса в Photoshop

Шаг 5

Измените название слоя на Задний фон (background). Я предлагаю переименовывать каждый слой, чтобы легче было определять их назначение.

  1. Рисуем иконку компаса в Photoshop

2. Рисуем основание нашей иконки

Шаг 1

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

Установите в качестве основного цвета (foreground color) #3ab2cb. Активируйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), и установите радиус скругления для него 30 пикселей.

  • Зажав клавишу Shift, кликните мышкой по холсту и протяните курсор так, чтобы получилась фигура, как на скриншоте ниже (зажатый Shift поможет нарисовать именно квадрат, а не прямоугольник).

Шаг 2

Далее сделайте двойной щелчок по фигуре и активируйте свойство Наложение градиента (Gradient Overlay). Выберите градиент от черного к белому. Уменьшите непрозрачность (Opacity) до 30% и поменяйте режим наложения на Перекрытие (Overlay).

    Шаг 3

    Создайте новый слой и поместите его над слоем с основанием нашей иконки. С зажатой клавишей Ctrl кликните левой кнопкой мыши по слою с основанием иконки.

    Это позволит создать выделение по форме, совпадающее с формой этого основания. Далее необходимо сделать щелчок правой кнопкой мыши и выбрать опцию Обводка (Stroke).

    В появившемся диалоговом окне выставьте цвет: темно-синий (#1d6b80), а также установите толщину обводки в 2 пикселя.

    Шаг 4

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

      Шаг 5

      Повторяем процедуру, сделанную в Шаге 3. Т.е. добавляем новый слой, помещаем его над основанием нашей иконки. С зажатой клавишей Ctrl кликните левой кнопкой мыши по слою с основанием иконки.

      Это позволит создать выделение по форме, совпадающее с формой этого основания. Далее необходимо сделать щелчок правой кнопкой мыши и выбрать опцию Обводка (Stroke).

      Отличие в этом шаге в том, что здесь мы возьмем более светлый оттенок синего (#88d8ea), и толщина обводки будет составлять 1 пиксель.

      Шаг 6

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

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

        3. Рисуем фигуру самого компаса

        Шаг 1

        Рисуем круг с помощью инструмента Эллипс (Ellipse Tool), затем рисуем круг поменьше и обязательно в режиме Вычесть из области фигуры (Subtract Front Shape). В результате должна получиться фигура в виде кольца (как на скриншоте ниже). Что касается цвета этого кольца, установите его белым (#e4ffff).

        Читайте также:  Как создать эффект отражения в воде с помощью photoshop

        Шаг 2

        Теперь нам нужно добавить треугольник в верхней части нашего кольца. Чтобы его присоединить к нашему кольцу, необходимо активировать режим Добавить к области фигуры (Combine Shapes).

          Шаг 3

          • Добавим еще один такой же треугольник к нижней части кольца.

          Шаг 4

          1. Продублируйте два созданных треугольника, затем поверните их на 90 градусов (как это показано на скриншотах ниже).
          2. Теперь у нас есть треугольники, указывающие в четырех направлениях.

          Шаг 5

          Повторите процесс создания треугольников. Только на этот раз треугольники должны быть поменьше. Поверните их на 45 градусов.

          Шаг 6

          Двойным кликом по слою с нашим компасом мы откроем диалоговое окно Стиль Слоя (Layer Style). В нем активируем следующие свойства: Наложение градиента (Gradient Overlay) и Тень (Drop Shadow). Параметры этих свойств указаны на скриншотах ниже.

          Наложение градиента. Режим наложения – Умножение.

            Тень. Режим наложения – Умножение.

            Шаг 7

            Добавьте кольцо меньшего размера поверх ранее созданной фигуры. Установите цвет для него (#eaeded).

              Шаг 8

              • Добавьте фигуру в виде треугольника так, как это показано на скриншоте ниже.

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

                Шаг 9

                Двойным щелчком мыши по слою с фигурой, созданной в предыдущем шаге, активируем диалоговое окно Стиль Слоя (Layer Style) и выбираем свойство Наложение градиента (Gradient Overlay). Режим наложения – Умножение.

                • Для градиента выбираем стиль Линейный (Linear) с переходом цвета от серого (#d7d7d7) к белому (#ffffff).

                Шаг 10

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

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

                Установите толщину в 1 пиксель, расположение: внутри (Location: Inside), цвет (#eeefef).

                1. Это даст нам тонкую линию обводки по периметру нашей фигуры.

                Шаг 11

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

                Шаг 12

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

                Зажав клавишу Ctrl, кликните по слою с фигурой компаса, чтобы создать новое выделение. Далее идем в Редактирование – Заливка (Edit > Fill).

                Выберите содержимое (Content) черный (Black) и нажмите ОК, чтобы выделенная область залилась черным цветом.

                  Шаг 13

                  Снимаем выделение, нажав комбинацию клавиш Ctrl+D. Далее идем в Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur). Установите угол размытия -45 градусов.

                  Шаг 14

                  Чтобы смягчить нашу тень, используем фильтр Размытие по Гауссу (Gaussian Blur). Идем в Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur). Значение размытия 2 пикселя.

                    Шаг 15

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

                    Шаг 16

                    Теперь давайте добавим стрелку в центр нашего компаса. Начнем с добавления прямоугольника, затем применим к нему трансформацию (Control-T). Сначала повернем его на 45 градусов, затем сожмем его таким образом, чтобы это было похоже на форму стрелки компаса. И, наконец, снова повернем его.

                      Шаг 17

                      • Двойной клик по слою со стрелкой и применяем следующие свойства: Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay) и Тень (Drop Shadow) с параметрами, указанными на скриншотах ниже.
                      • Внутреннее свечение: Режим наложения – Нормальный.
                      • Наложение градиента: Режим наложение – Умножение.
                      • Тень: Режим наложения – Умножение.

                      Шаг 18

                      Мы хотим, чтобы половина стрелки была белого цвета, а половина красного. Чтобы этого добиться, нам просто нужно продублировать слой со стрелкой (Ctrl+J), и затем удалить стили этого слоя.

                      Установите этот слой в качестве Обтравочной маски (Clipping Mask).

                      Возьмите инструмент Перо (Pen Tool), кликните по нижней точке нашей стрелки (копии) и удалите эту точку.

                        Шаг 19

                        Добавьте маленький круг в центр стрелки. Двойной клик по слою с кругом и затем применяем к нему Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay) и Тень (Drop Shadow) с параметрами, указанными на скриншотах ниже.

                        • Внутреннее свечение: Режим наложения – Нормальный. 
                        • Наложение градиента: Режим наложения – Нормальный.
                        • Тень: Режим наложения – ​Умножение.

                        4. Добавляем тень

                        Шаг 1

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

                        Рисуем полигональное выделение, как показано ниже, используя для этого инструмент Перо (Pen Tool), и затем заполняем это выделение черным цветом. Уменьшаем Непрозрачность (Opacity) слоя до 20%.

                        Далее с зажатой клавишей Ctrl кликаем по слою с основанием нашей иконки и добавляем маску. Теперь, тень будет видимой в пределах основания иконки.

                          Шаг 2

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

                          Шаг 3

                          Добавьте еще один слой и затем еще одну легкую тень за стрелкой. Для этого возьмите инструмент Кисть (Brush Tool), установите Жесткость (Hardness) на 0% и Непрозрачность (Opacity) снизьте до 5%. Нарисуйте тень за стрелкой.

                            Шаг 4

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

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

                            Шаг 5

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

                              Шаг 6

                              Нажимаем Ctrl-D, чтобы снять выделение. Смягчаем тень с помощью фильтра Размытие по Гауссу (Gaussian Blur).

                              Шаг 7

                              Можно продублировать слой с тенью (Ctrl-J) если не устраивает результат и хочется, чтобы тень была более насыщенной. Если, наоборот, тень кажется слишком темной, то можно снизить непрозрачность слоя.

                              1. И, наконец, финальный результат!
                              2. Я надеюсь, вам понравился данный урок, и вы смогли понять технику создания плоских иконок с длинной тенью.
                              3. Mohammad Jeprie

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

                              Рисуем иконку папки в Photoshop

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

                              1. Для начала создадим новый документ размером в 128×128 пикселей с прозрачным фоном.
                              1. Сделаем новый слой Ctrl+N и с помощью Pen Tool создадим область папки, примерно как на картинке ниже:
                              1. Нажмем правой кнопкой по нашему слою с папкой, выберем в раскрывшемся меню Blending Options и сделаем там следующие настройки:
                              • Gradient Overlay
                              • #FFd27A -> #FFB912
                              • Stroke
                              • Size: 1px
                              • Position: Outside
                              • Color: #C07C33
                              • Inner Glow
                              • Blend Mode: Normal
                              • Color: #FFFFFF
                              • Choke: 100%
                              • Size: 1px
                              • Должно получиться примерно так:
                              1. Скопируем слой Ctrl+J и идем в Edit -> Transform (в CS3 Transform Path) -> Perspective и потянем за правый верхний квадратик как показано на картинке ниже:

                              Теперь идем в Edit -> Transform (в CS3 Transform Path) -> Scale и немного уменьшаем нашу папку и тем самым придадим ей небольшой эффект 3d:

                              Результат:

                              1. Добавим листок в нашу папку, создадим новый слой и нарисуем в нем белый прямоугольник. После этого кликаем по слою правой кнопкой мыши и снова идем в Blending options.
                              1. Делаем там следующие изменения:
                              2. Gradient Overlay:
                              3. Opacity: 10%
                              4. #000000 -> #FFFFFF
                              5. Angle: 50°
                              6. Stroke
                              7. Size: 1px
                              8. Position: Outside
                              9. Color: #D6D6D6
                              10. Должно получиться что то вроде этого:
                              1. Положим листочек во внутрь папки, для этого поместим наш слой с листком между двумя слоями папки и повернем его как следует (картинка ниже) при помощи Ctrl +T.
                              1. Снизим прозрачность передней части папки до 50%-60%
                              • На этом и все.
                              • Результаты которых добился автор этого урока добавив еще некоторые эффекты:
                              • Перевод: artslab.info{#xdl1}
                              • Оригинал: Nico Harather{#drdb}

                              Источник: https://artslab.info/uroki-photoshop/risuem-ikonku-papki-v-photoshop/

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