Как сделать картинку круглой. Инструмент «Овальная область выделения» (Elliptical Marquee) в Фотошопе

  • 17.06.2019

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #d2d2d2.

Шаг 2.
Воспользуемся «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум…» (Add Noise…) со значением 6, распределение равномерное, монохромный.

Шаг 3.
Применим к фону стиль слоя «Внутреннее свечение» (Inner Glow), цвет #d1d0d0.

Шаг 4.
Получили такой результат.

Шаг 5.
На новом слое создаем круг, цвет #1f1f1f.

Шаг 6.
Теперь сделаем так. Удерживая Ctrl, щелкаем по слою с кругом, чтобы выделить его. В верхнем меню выбираем «Окно» (Window) > «Контуры» (Paths). В открывшемся диалоговом окошке щелкаем по нижней иконке «Сделать из выделенной области рабочий контур» (Make Work Path From Selection). Получили рабочий контур. Теперь выбираем инструмент «Текст» (Text Tool) и пишем простой точкой по контуру. Настройки шрифта как на рисунке ниже. Более подробно посмотреть можно посмотреть в соответствующем уроке.

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

Шаг 8.
Находясь на слое с кругом, нажимаем Del и получаем нашу декоративную фигуру, похожую на шестеренку.

Шаг 9.
Выделяем в центер круг и нажимаем Del, чтобы удалить середину шестеренки.

Шаг 10.
Делаем еще два декоративных круга внутри шестеренки. Для этого на новом слое создаем круг, цвет #d2d2d2. Вырезаем у него середину, оставив кромку шириной 3 пикселя. К оставшейся фигуре применим стиль слоя «Обводка» (Stroke) шириной 2 пикселя и цветом #1f1f1f.

Шаг 11.
На новом слое выделяем два круга, как на рисунке ниже и заливаем цветом #1f1f1f.

Шаг 12.
В образовавшиеся темные области ставим звездочки.

Шаг 13.
Выбираем и на новом слое пишем слово, в данном случае DESIGNONSTOP. Применим к тексту трехпиксельную обводку цветом #d4d4d4.

Шаг 14.
Теперь напишем текст по кругу. Опять воспользуемся уроком « «. Настройки шрифта, как на рисунке ниже. Сначала пишем текст сверху.

Шаг 15.
Потом пишем текст снизу. В результате получили такой вот логотип.

Инструкция

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

Откройте в Adobe Photoshop эту картинку. Для этого нажмите пункт меню «Файл» (File) > «Открыть» (Open) или горячие клавиши Ctrl+O, выберите нужный файл и кликните «Открыть».

Выберите инструмент «Овальная область» (Elliptical marquee tool) и с его помощью создайте на картинке овал, который по вашей задумке будет внешней стороной рамки. В настройках инструмента выберите пункт «Вычитание из выделенной области» (Subtract from selection) и создайте новый овал, который будет внутренней стороной рамки.

Нажмите комбинацию клавиш Ctrl+J. Таким образом, вы создали новый слой, на котором будет только выделенная овальная рамка. Найдите этот слой в списке слоев, который в свою очередь находится в окне «Слои» (Layers, если оно отсутствует, нажмите F7), щелкните по нему правой кнопкой мыши и в появившемся меню выберите «Параметры наложения» (Blending options).

В следующем окне выберите параметр «Тень» (Drop shadow, список параметров находится в левой части окна), в пункте «Режим наложения» (Blend mode) выберите «Умножение» (Multiply), в «Угол» (Angle) – 125 градусов, в «Размер» (Size) – 20-30 пикселей, остальные значения оставьте без изменений. Выберите параметр «Тиснение» (Bevel and emboss) и установите в нем следующие значения: «Стиль» (Style) – «Внутренний скос» (Inner bevel), «Метод» (Technique) – «Плавное» (Smooth), поиграйтесь с настройками «Контур глянца» (Gloss contour), «Режим подсветки» (Highlight mode) и «Режим тени» (Shadow mode), остальное оставьте без изменений. Выберите параметр «Контур» (Contour), в пункте «Контур» укажите «Полукруг» (Half round), а остальное также оставьте без изменений. Нажмите ОК.

В списке слоев кликните правой кнопкой мыши по фоновому слою, в открывшемся меню выберите «Из заднего плана» и в новом окне сразу нажмите ОК. Вы превратили фон в полноценный слой. Выберите слой с рамкой, активируйте инструмент «Волшебная палочка» (Magic wand tool) и кликните один раз левой кнопкой мыши в области, которая находится внутри рамки, благодаря чему эта область выделится. Выберите слой, который прежде был фоновым, и нажмите Delete на клавиатуре. Рамка готова, теперь осталось вставить в нее фотографию.

Любое изображение в рамке выглядит лучше, чем без нее; обрамление способно придать картинке особую неповторимость. Цвет рамки может контрастировать с цветовой гаммой изображения, дополнять ее или оттенять, акцентируя внимание на картинке. Окантовка изображения с использованием различных текстур позволят заиграть вашей работе новыми красками, придать ей логическую завершенность. Цветную рамку для своего рисунка вы без труда можете сделать в программе Photoshop, потратив на это всего несколько минут.

Вам понадобится

  • - программа Photoshop
  • - уметь пользоваться инструментами «Пипетка»
  • - уметь создавать и перемещать слои

Инструкция

Откройте изображение в программе Photoshop. Переименуйте любым или цифрой единственный слой (обычно он назван «Задний план»), щелкнув дважды на его названии; чтобы и иметь возможность производить любые действия с плоскостью . Создайте новый слой и переместите его под слой с картинкой. Созданный слой понадобится для размещения на нем фона будущей рамки.

Измените размер изображения «Изображение - Размер холста». Выберите единицами измерения сторон картинки пиксели и щелчком мыши поставьте галочку около «Относительно» (размер холста будет меняться относительно размера изображения). В «Ширина» и «Высота» впишите по одинаковому значению, равному ширине требующейся рамки. После изменения размера холста вокруг рисунка должно образоваться обрамление с прозрачным фоном, так как холст - это не само избражение, а плоскость, на которую оно помещено. При изменении размера холста размер изображения изменениям не подвергается.

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

Выберите нужный цвет для рамки инструментом «Пипетка» и залейте при помощи инструмента «Заливка» выбранным цветом нижний слой.

Есть два ключевых инструмента в Фотошоп: rectangular и elliptical marquee tools (прямоугольная и овальная области выделения), и они совместно занимают позицию в панели инструментов. Вот некоторые вещи, которые вы могли не знать об этих инструментах.

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

Круг - это квадрат? Нет, спасибо!
Попробуйте нарисовать круг или овал в зафиксированном положении на изображении, вы можете запутаться, откуда начинается рисование фигуры. Круг или квадрат нарисованы, как будто они были помещены в квадратную или прямоугольную форму, таким образом, вы начинаете тянуть их из угла квадратного или прямоугольного объекта. Все это усложняет точное расположение фигуры. Чтобы упростить задачу, вы можете нарисовать свою фигуру из центра наружу, удерживая клавишу Alt во время использования инструмента выделения. Добавьте клавишу Shift для удерживания овала в пределах круга.

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

Правильная фигура, но неправильный поворот?
Когда вы хотите создать развернутую фигуру, такую как прямоугольник, квадрат или овал, для начала создайте ее, используя инструмент выделения, не обращая внимания на поворот. Теперь отпустите кнопку мыши и выберите Select > Transform selection (Выделение > Трансформировать выделение). Фигура теперь показывает маркеры трансформирования, которые вы можете использовать для ее поворота. Нажмите клавишу Ctrl, и вы можете потянуть за уголок фигуры и исказить ее. Нажмите Enter или Return, чтобы применить трансформацию и удалить маркеры. Теперь вы можете продолжить свою работу с областью выделения.

Строгий размер выделения
Если вы хотите создать область выделения с точными размерами, из выпадающего меню Style (Стиль)выберите Fixed Size (фиксированный размер). Пропишите пиксели по ширине и высоте в рамках и нажмите на изображение, появится выделение в точности такое же, как вы задали. Используйте Fixed Ratio (фиксированное соотношение), чтобы создать выделение с фиксированным соотношением, например 1:1.25, как показано здесь.

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

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

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

Существует несколько способов рисования идеально ровного круга в фотошопе. Но для начала нам требуется создать новый документ для работы. Верхняя панель. Команда Файл – Создать. Рекомендую создавать большой документ, удобный для работы. Я предпочитаю 2000 пикселей по ширине и 1000 по высоте. Но вы можете использовать любой другой размер по своему усмотрению.

Обратим свое внимание на боковую панель инструментов. Инструмент «Эллипс». Он – то нам и нужен. Кликаем по нему, а затем по рабочей области. Удерживаем правую клавишу мыши и проводим окружность. А сейчас я расскажу вам небольшую хитрость. Дабы с первого раза добиться идеально ровного круга зажмите клавишу shift на клавиатуре. Рекомендую запомнить этот прием. Так как работает он со многими элементами.


А теперь второй способ. Теперь мы нарисуем окружность с помощью выделенной области. Для чего опять обратимся к панели инструментов.


Кликаем на инструмент «овальная область», зажимаем shift и рисуем.


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


На той же панели ищем инструмент «заливка». Кликаем по нему, а затем по выделенной области.



Окружность готова. Снимаем выделение, нажав комбинацию клавиш на клавиатуре ctrl+j.

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

Создаем выделенную область и переходим к вкладке «редактирование», где выбираем команду «выполнить обводку».


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


Вот, что у нас получилось. Не забываем снимать выделение.


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

На первый взгляд, кажется, ну что тут такого? Превратить прямоугольную картинку в квадратную или круглую (овальную). Да, с квадратной картинкой нет проблем. Инструмент «кроп» или «рамка» нам всегда готов в этом помочь. Но что делать с круглой? Ведь в фотошопе нет такого инструмента. Помнится, во времена начала изучения программы Adobe Photoshop у меня вызвал ступор. Действительно, а как?

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

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

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

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



Выделили. Теперь нам следует скопировать его на новый слой. Проще всего будет нажать комбинацию клавиш ctrl+c, а затем ctrl+v. Ваше изображение скопируется на новый слой автоматически. Ну либо можете зайти длинным путем. Предварительно создать новый слой. Затем кликнуть по выделенной области левой клавишей мыши и из образовавшегося списка выбрать: «скопировать на новый слой». Результат будет тем же.

Вот что мы видим в окне слоев.


Выделяем нижний слой и нажимаем del на клавиатуре.

Вот так выглядит слой.




В выпадающем списке ищем png и сохраняем.


Выше я упомянула о недостатке этого способа. Каков же он?

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

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


Нам следует сделать изображение с котенком невидимым. Для этого мы тыкаем в пиктограмму с глазиком рядом со слоем. Кликаем. «Глазик» исчезает. Изображение с котенком становится невидимым.


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

Теперь ищем инструмент «эллипс». Опять же, зажимаем shift и проводим окружность. Цвет ее нам не важен.


Переходим к окну слоев. Кликаем по слою с котенком левой клавишей мыши. И выбираем команду «создать обтравочную маску».


Вот, что мы увидим.


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

Теперь вам следует выделить оба слоя, зажав клавишу ctrl. И опять вы, кликнув по ним левой клавишей мыши, вызываете команду «объединить слои».


Вот, что у нас получится.


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

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