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

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

Рассмотрим специфику соответствующих операций в Photoshop версии CS6 с английским интерфейсом.

Под термином «слой» – Layer – в фотошопе может пониматься:

  • фон редактируемого изображения (располагается непосредственно на холсте – Canvas);
  • картинка, используемая в качестве фона (фиксируется над холстом);
  • другое изображение, расположенное над указанными графическими элементами.

В каждом случае увеличение слоя имеет особенности. Изучим их.

Как увеличить слой, являющийся фоном?

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

В списке слоев – Layers – он имеет обозначение Background. Для того чтобы увеличить его, нужно активизировать окно холста, затем – выбрать пункт меню Image, после – Image Size. В открывшемся окне надо будет ввести требуемый размер слоя. Например, если мы хотим увеличить его на 120 %, то настройки могут выглядеть так:

Также можно при необходимости осуществлять более тонкую настройку размера фонового слоя – например, в пикселях.

Особенность рассматриваемого графического элемента – в невозможности перемещать картинку, являющуюся фоном, относительно холста. Поэтому если увеличить или уменьшить холст (для этого есть отдельная функция – Image – Canvas Size), то вслед за ним пропорционально изменит размеры также и фоновый слой.

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

Который, в свою очередь, способен становиться дополнительным элементом фона. Его можно, к примеру, залить цветом с помощью инструмента Paint Bucket Tool.

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

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

Как увеличить слой в виде картинки на фоне (либо на холсте)?

Для наглядности можно немного увеличить холст.

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

Первый вариант – задействовать группу опций Free Transform. Для того чтобы открыть ее, нужно выбрать инструмент Rectangular Marquee Tool на панели слева, кликнуть на картинке правой кнопкой мыши, после – нажать на Free Transform.

Для того чтобы изменить конкретно размер слоя-картинки, надо выбрать пункт Scale. После – с помощью ползунков по краям картинки подобрать оптимальную величину изображения. Если удерживать при этом клавишу Shift, его изначальные пропорции будут сохраняться при увеличении или уменьшении соответствующего графического объекта.

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

После того как корректировка величины слоя-картинки завершена, получившийся размер следует закрепить, нажав Enter.

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

Добавленная картинка сформирует новый слой – в данном случае Layer 1. Рассмотрим, в свою очередь, то, как увеличить слой в Photoshop, представленный в этой разновидности.

Как увеличить слой в виде отдельной картинки?

В принципе, в отношении слоя в виде отдельной картинки применимы те же процедуры, что мы рассмотрели в предыдущем сценарии. Можно, таким образом, задействовать группу опций Free Transform – в двух вариантах (с использованием ползунков либо при задействовании меню, которое открывается в верхней части интерфейса фотошопа).

Достаточно удобной можно назвать еще одну, не отмеченную пока что нами опцию Photoshop CS6, а именно – Show Transform Controls. Она активизируется посредством выставления галочки напротив соответствующего элемента интерфейса фотошопа, который появляется при выбранном инструменте Move Tool.

При включенной опции Shot Transform Controls можно, в частности, оперативно менять размеры слоев, представленных в виде отдельных изображений. Как только выделяется слой – на соответствующей ему картинке появляются ползунки. Данный инструмент, соответственно, особенно удобен, если ведется работа с большим количеством изображений одновременно.

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

Начинающие осваивать графический редактор Photoshop первое время теряются перед его богатым функционалом. Один из непонятных моментов - работа со слоями. В этой статье мы подробно рассмотрим, как изменить размер слоя в "Фотошопе" правильно.

Для чего меняется размер слоя?

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

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

Как в "Фотошопе" изменить размер слоя?

Пошагово разберем весь процесс:

  1. В правой стороне экрана выделите в палитре слоев необходимый - кликните левой кнопкой мыши (ЛКМ) по нему.
  2. В верхней строке нажмите "Редактирование", в выпавшем меню выберите "Свободное трансформирование".
  3. Вы увидите, что слой обведен рамкой с маркерами. Они-то и помогут нам изменить его видимые размеры.
  4. Работа с маркерами (небольшими квадратиками на рамке) начинается с наведения на один из них курсора и зажатия левой кнопки мыши.
  5. Как изменить размер слоя в "Фотошопе"? Обратите внимание на маркеры на сторонах рамки: потяните один из них к центру документа - видимое изображение слоя с этого бока уменьшится, от центра - увеличится.
  6. Маркеры на углах видимой картинки слоя: потянув их к центру или от центра изображения, вы измените сразу размер двух сторон, прилегающих к тому углу.
  7. Если вам нужно задать определенные параметры для ширины и длины, то впишите их соответственно в поля "Ш" и "Д". Скорее всего, по умолчанию у вас здесь установлены проценты. Единицы измерения (пиксели, сантиметры, миллиметры) можно выбрать, кликнув правой кнопкой мыши (ПКМ) на любом из этих окошек.
  8. Чтобы оставить внесенные изменения, кликните на Enter. Сохранить их поможет галочка на панели инструментов.
  9. Отменить изменения - нажмите на перечеркнутый кружок, который виден рядом с галочкой на той же панели инструментов.

Как изменить размер слоя в "Фотошопе": "горячие" клавиши

Рассмотрим "горячие" сочетания, заметно убыстряющие дело:

  • Ctrl+T - вызов инструмента "Свободное трансформирование".
  • Ctrl + "-"/"+" - уменьшение/увеличение масштаба изменяемого слоя.
  • Как в "Фотошопе" изменить размер слоя, сохраняя пропорции? Зажмите Shift при работе с маркерами - стороны изображения будут увеличиваться/уменьшаться пропорционально.
  • Чтобы стороны изображения изменялись пропорционально друг другу, можно нажать на значок "Звенья цепочки" на рабочем столе.
  • Зажатие Alt при работе с маркерами - длина и ширина будут изменяться относительно центра изображения.
  • Зажатие Shift и Alt при работе с маркерами - стороны видимой картинки будут изменяться и пропорционально друг другу, и относительно центра изображения.
  • Esc - быстрый сброс внесенных изменений.

Использование навигатора

Разбирая, как изменить размер слоя в "Фотошопе CS6" и иных версиях (к слову, во всех вариациях графического редактора эта операция выполняется одинаково), важно отметить такой момент, как работа с изменением слишком большого слоя. Признаком его является то, что после вызова вкладки "Свободное трансформирование" вы не видите ни рамки, ни маркеров-узлов.

Как изменить размер картинки в "Фотошопе" в таком случае? Чтобы с документом стало возможно работать, нужно всего лишь уменьшить его масштаб до таких границ, чтобы инструменты свободного трансформирования были видны. Для этого перейдите в "Навигатор" и сдвиньте ползунок масштаба до нужной позиции. Сохраните изменения и вернитесь к трансформации.

Сохранение качества

Перед тем в "Фотошопе", обратите внимание на то, что качество увеличиваемого в размерах слоя может заметно пострадать. Чтобы этого не происходило, советуем перед началом трансформаций преобразовать его в смарт-объект:

  • Нажмите ПКМ на необходимом слое.
  • В вышедшем списке выберите "Преобразовать в смарт-объект".
  • Выполните по схемам, представленным в подзаголовках выше, все необходимые трансформации, сохраните изменения.
  • Снова ПКМ по измененному уже слою - на этот раз выберите "Растрировать..."

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

Изменение размера фонового слоя

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

Изменить его длину и ширину можно двумя способами:

  • Кликните на "Изображение", в появившимся меню выберите "Размер изображения". Введите требуемые параметры для длины и ширины слоя.
  • Разблокируйте фон. Для этого дважды кликните по нему ЛКМ, во всплывшем окне нажмите "ОК". Если все сделано верно, "замочек" пропадет, а с фоном можно работать как с обычным слоем - изменяя его свободным трансформированием.

Изменение размера нескольких слоев сразу

Рассмотрим, как изменить размер слоя в "Фотошопе" в этом случае:

  • Если необходимые слои расположены рядом друг с другом, выделите их ЛКМ, зажав Shift. Еще один вариант: удерживая палец на этой клавише, нажмите ЛКМ на верхний, а потом на нижний слой или наоборот. Выделятся как они сами, так и находящиеся между ними слои.
  • В случае, когда необходимые слои расположены в палитре вразнобой, зажав Ctrl, выберите поочередно каждый из них.
  • Еще один способ - поместить все нужные слои в группу и закрыть ее (стрелочка рядом с названием группы будет "смотреть" острой стороной вбок, а не вниз).
  • После одной из перечисленных манипуляций вам останется лишь вызвать "Свободное трансформирование" и провести изменение размера по отлаженной схеме, представленной выше.

Мы разобрали все способы того, как изменить размер слоя в "Фотошопе" всех версий с использованием "горячих" клавиши и без них, для обычного слоя, фона и группы из нескольких слоев. Немного практики - и вы будете производить эту несложную операцию на автомате, не задумываясь об особенностях ее исполнения. Удачи в творчестве и освоении этого замечательного графического редактора!

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

Этот эффект является частью экшена с карандашным наброском, который можно приобрести на Envato Market .

1. Добавляем фото девочек

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

2. Добавляем порванную бумагу

Шаг 1

Я прикрепил PNG-изображение бумаги, которым вы можете воспользоваться. Но если вы хотите сделать свою текстуру разорванной бумаги, то это достаточно просто. Вы можете взять кусок плотной бумаги или картона и неаккуратно разорвать его, чтобы получить кусочек такой формы, как вы хотите. Затем поместите его на плоскую поверхность, желательно контрастного цвета (например, черного, если бумага белая).

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

Шаг 2

Загрузите снимок на компьютер и откройте его в Photoshop. При помощи инструмента Magic Wand (Волшебная палочка) выделите кусок бумаги и удалите фон.

Шаг 3

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

Шаг 4

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

Шаг 5

Дважды нажмите Ctrl + J, чтобы создать две копии слоя с клочком бумаги. Назовите их « torn paper 1» и «torn paper 2» («порванная бумага 1» и «порванная бумага 2»).

Шаг 6

Добавьте стиль слоя Drop Shadow (Тень) к оригинальному слою с клочком бумаги. Цвет тени - #000000.

Drop Shadow (Тень):

  • Непрозрачность: 43%;
  • Угол: 120 градусов;
  • Смещение: 7 пикселей;
  • Размер: 5 пикселей.

3. Создайте четыре копии слоя с девочками

Шаг 1

Нажмите Ctrl + J четыре раза, чтобы создать четыре копии слоя с девочками, назовите их Girls 1 , Girls 2 , Girls 3 и Girls 4 (Девочки 1, 2, 3 и 4).

Шаг 2

Зажмите клавишу Ctrl и выделите все слои с девочками на панели слоев. Поместите их над слоем с клочком бумаги.

4. Воспользуйтесь фильтрами Размытие в движении и Тушь

Шаг 1

Отключите видимость всех слоев-копий кроме слоя Girls 1.

В качестве основного цвета выберите белый, а фонового - черный.

Шаг 2

Теперь, выбрав слой Girls 1, нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз >

  • Длина штриха: 7;
  • Тоновой баланс: 21;
  • Направление штриха : по диагонали вправо.

Шаг 3

Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении). Смещение: 1 пиксель.

5. Воспользуйтесь фильтрами Тушь и Шум

Шаг 1

Включите видимость слоя Girls 2, режим наложения измените на Multiply (Умножение), непрозрачность на 30%.

Шаг 2

Нажмите Filter > Sketch > Graphic Pen (Фильтр > Галерея Фильтров > Эскиз > Тушь). Настройки фильтра, как на изображении ниже, но если вы воспользовались другим фото, то, возможно, настройки потребуется изменить.

Настройки фильтра на скриншоте:

  • Длина штриха: 15;
  • Тоновой баланс: 51;
  • Направление штриха: по диагонали вправо.

Шаг 3

Нажмите Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум). Эффект: 43%

6. Воспользуйтесь фильтром Ксерокопия

Шаг 1

Включите видимость слоя Girls 3, режим наложения измените на Multiply (Умножение), непрозрачность 100%.

Шаг 2

Нажмите Filter > Sketch > Photocopy (Фильтр > Галерея Фильтров > Эскиз > Ксерокопия).

Настройки фильтра на скриншоте:

  • Детализация: 1;
  • Затемненность: 50

7. Воспользуйтесь фильтром Акварель

Шаг 1

Включите видимость слоя Girls 4, режим наложения измените на Color (Цветность), непрозрачность 100%.

Шаг 2

Нажмите Filter > Artistic > Watercolor (Фильтр > Галерея Фильтров > Имитация > Акварель). Пока можете скрыть видимость слоя Girls 4.

Настройки фильтра на скриншоте:

  • Детализация: 4;
  • Глубина теней: 0;
  • Текстура: 1

8. Создайте кусочек наброска при помощи Обтравочной маски

Зажмите клавишу Ctrl и выделите слои Girls 1, Girls 2, Girls 3 и Girls 4. Кликните правой кнопкой мыши по выбранным слоям и выберите Create Clipping Mask (Создать обтравочную маску).

9. Создайте рваный край у бумаги

Шаг 1

Включите видимость слоя Torn Paper 1, режим наложения измените на Multiply (Умножение), непрозрачность - на 57%

Шаг 2

Включите видимость слоя Torn Paper 2. Кликните по кнопке добавления слой-маски на панели слоев, чтобы добавить маску к слою Torn Paper 2.

Шаг 3

Создайте новый слой под слоем Torn Paper 2 и залейте его белым цветом.

Шаг 4

Кликните по миниатюре слой-маски слоя Torn Paper 2. Нажмите Image > Apply Image (Изображение > Внешний канал).

Шаг 5

Нажмите Image > Adjustments > Levels (Изображение > Коррекция > Уровни) и измените настройки на такие же, как на скриншоте ниже. Входные значения: 56, 1.81, 67

При помощи кисти вы можете рисовать белым цветом внутри слоя Torn paper 2, если хотите усилить эффект рваного края.

Шаг 6

Удалите слой с белым фоном, чтобы увидеть эффект.

Шаг 7

С нажатой клавишей Ctrl щелкните по слоям Torn paper 1 и Torn paper 2. Затем, кликните правой кнопкой мыши по выбранным слоям и нажмите Create Clipping Mask (Создать обтравочную маску).

10. С легкостью перемещайте эффект наброска

Если вы хотите превратить в набросок другую часть своего рисунка, просто зажмите клавишу Ctrl, а затем щелкните по слоям Torn paper 1, Torn paper 2 и Torn paper.

При помощи инструмента Move (Перемещение) измените положение кусочка бумаги.

Поздравляю! Вот и все!

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

Является лучшей альтернативой Photoshop, которая полностью заточена под дизайн интерфейсов. Хочу отметить, что ресурсы для Sketch сейчас не особо впечатляют, и моя миссия – исправить это.

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

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

Как же перейти с Photoshop на Sketch?

Скачайте бесплатную триал-версию

5) Импортируйте файл SVG в Sketch и отредактируйте, как вам нужно.

Миграция: мои паттерны

Если вы не чисто флет-дизайнер, вы, должно быть, повсеместно используете текстуры. Ваш клиент может их запросить. В Sketch есть настройки шума, но если вам нужно больше, вам понадобятся текстуры Photoshop в виде индивидуальных графических паттернов, импортированных в библиотеку паттернов Sketch. К сожалению, нет готового инструмента для миграции. Но, если вам нужны исходники для старта, я предлагаю попробовать Subtle Patterns

А как быть с моими PSD-файлами?

Вот тут у вас есть шанс начать с нуля. Как дизайнер, вы должны избегать оглядок назад на свою старую работу. Так как Sketch на 100% векторный, нет возможности импортировать PSD-файлы с полным сохранением стилей. Из моего личного опыта с Fireworks, и там процесс был далек от совершенства: многие стили были поломаны. Даже типографика не выглядела должным образом.

Хорошие новости заключаются в том, что воспроизведения дизайнов Photoshop в Sketch – довольно несложно. Очень просто рисовать фигуры, забирать пипеткой цвета и применять те же настройки теней, что и в Photoshop. Иконки и текстуры – это самый тяжелый и самый важный шаг, так как они являются частью основной вашей библиотеки. Как дизайнер, вам всегда следует концентрироваться на основе (принципы дизайна, базовые дизайн-компоненты, подгонка пикселей и т.д.) и прекратить опираться на тривиальности вроде стилей, фильтров и прочих приложение-зависимых кастомизаций.

Sketch – еще новичок, но даже очень именитые дизайнеры уже начали делиться своими Sketch-файлами, обмениваться приемами и советами. Честно говоря, кастомизировать файл Sketch куда легче, чем PSD.

Выводы

Если вы не посвятили около 3 месяцев своего времени (в режиме полной занятости) Sketch, как это сделал я, вы все равно будете опираться на Photoshop и мыслить принципами этого приложения, редактируя старые PSD-файлы, используя Photoshop для редактирования фото, рисования и прочих графических работ. Но все равно полезно иметь альтернативу для создания дизайнов пользовательских интерфейсов. Инструмент, сочетающий в себе лучшие черты Photoshop, Illustrator и Omnigraffle. Инструмент, составляющий отличную конкуренцию Adobe.

Если у вас есть полезные файлы Sketch вроде UI-китов, телефонных шаблонов и наборов иконок, делитесь ими в комментариях.




Top