Как в фотошопе делать красивые линии. Рисуем абстрактные линии в фотошоп
Ross August. Переводчик: Сан Саныч
Введение
Я хотел написать этот урок, поскольку, большинство моих обучающих программ нацелено к промежуточным или продвинутым пользователям Фотошопа, тогда как этот - предназначен для новичков.
Финальный результат:
Шаг 1. Создайте новый документ с расширением 1x20px и прозрачным фоном, это будет документ, на котором мы создадим наш образец узора. ИдемEdit>Preferences>Guides, Grid & Slices (Редактировать>установки> направляющие, сетка и фрагменты), и устанавливаем параметры сетки через 1px. Выберите инструмент прямоугольник и измените цвет переднего плана на белый. Теперь сделайте белый прямоугольник размером 1x2px в середине документа как показано на рисунке ниже. Идем - Edit>Define Pattern (Редактировать>определить узор), и сохраняем его. Теперь можно закрыть этот документ.
Шаг 2. Создайте новый документ с расширением 1000x1000px и белым фоном. Выбираем инструмент градиент и открываем редактора градиента. Используйте градиент, идущий от темного цвета (я использовал темно-фиолетовый цвет #2e001c) до черного. Используйте радиальный градиент и тяните его от центра к краю.
Шаг 3. Используйте текстовый инструмент, чтобы напечатать что-нибудь в середине документа белым цветом. Теперь идем Window>Character (Окно>символ), я использовал настройки: шрифт - Times New Roman, размер 300pt с параметрами трекинга 100. Это должно выглядеть так же, как показано на рисунке ниже. Теперь создайте новый слой, щелкните 2 раза на его названии и переименуйте его в слой Lines, затем, нажмите Alt+Backspace, чтобы заполнить его цветом переднего плана, цвет не имеет значения.
Нажмите Ctrl+click на миниатюре текстового слоя, чтобы загрузить выделенную область, затем нажимаем на кнопку добавить векторную маску. Теперь скройте текстовый слой, выберете слой Lines , и идем Filter>Blur>GaussianBlur (Фильтр> размытие> размытие по Гауссу) используйте интенсивность 10px. Установите заливку этого слоя (fill) на 0 %.
Шаг 4. Выбираем слой Lines и направляемся Layer>LayerStyle>PatternOverlay (Слой>Стиль слоя>Наложение узора). Выбираем узор, созданный нами раннее, и делаем наложение так, как показано на рисунке ниже.
Шаг 5. Теперь Вы можете изменить непрозрачность этого слоя так, как Вам больше нравиться, в любом случае всегда можно вернуться и изменить интенсивность данной настройки.
Шаг 6. Создайте еще текстовый слой с надписью Learning , как показано на рисунке ниже, здесь я использовал еще больший размер трекинга, так как думаю, что заглавные буквы шрифта с засечками выглядят лучше, когда увеличено расстояние между буквами. Снова сделайте их белыми.
Шаг 7.
Делаем активным слой Learning
и идем Layer>LayerStyle> Blending Options
(Слой>Стиль слоя>параметры наложения) и добавляем внутреннюю тень и внешнее свечение так, как показано на рисунках ниже.
Внутренняя тень:
Внешнее свечение:
Шаг 8. Выбираем слой Lines и слой Learning и нажимаем Ctrl+G, слои объединятся в группу. Далее Layer>DuplicateGroup (Слои>Дубликат группы).
Шаг 9. Выделяем новую группу и идемEdit>Transform>FlipVertical (Редактировать> трансформирование > Отразить по вертикали). Нажимаем V, чтобы выбрать инструмент движения, и двигаем наше изображение так, что получился эффект отражения.
Шаг 10. При выбранной группе слоя с отражением, Layer>LayerMask>RevealAll (Уровни>Слой маска>Показать все), выбираем инструмент градиент от черного к белому и тянем его от основания изображения к вершине. Должно получиться так:
Шаг 11. Создайте новый слой, нажмите D, чтобы установить цвета по умолчанию, далее идем - Filter>Render>Clouds (Фильтр> Рендеринг> Облака).
Шаг 12. Нажмите Ctrl+T, чтобы войти в режим свободного трансформирования, опустим изображение облаков вниз, так как это показано на картинке снизу, и нажимаем Enter. Далее идем Edit>Transform>Perspective (Редактировать>Трансформирование> Перспектива) и тянем нижний маркер за границы изображения для придания эффекта удаления. Затем идем Filter>Blur>GaussianBlur (Фильтр> размытие> Размытие по Гауссу) и установите радиус 10px.
Шаг 13. Измените непрозрачность этого слоя до 10 %.
Шаг 14. Создайте новый слой, выберите инструмент "кисть" и установите жесткость на 0%, сделайте несколько ярких цветные пятен как показанно на изображении ниже.
Шаг 16. Теперь осталось только изменить режим наложения для слоя на Color (цветность). Я еще вернулся и подправил несколько настроек параметров непрозрачности. Ниже представлен мой конечный результат.
Фотошоп: Эффект переплетающихся полос
В этом уроке фотошопа мы узнаем как создать интересный эффект переплетающихся полос на фотографии. Мы будем использовать несколько слоёв и Масок слоя, так же Обтравочную Маску и Стили слоя, а также включим сетку Фотошопа чтобы помочь себе.
Вот фотография которую я буду использовать в уроке:
А вот эта же фотография в результате применения урока:
Шаг 1.Откадрируйте изображение в квадрат.
Первое что нужно сделать, это откадрировать изображение и сделать из него квадрат. Можно оставить изображение и прямоугольным, потому что эффект не зависит от размера, но как правило этот эффект смотрится лучше на квадратном изображении. Мы будем использовать инструмент Crop tool, потому выберем его в палитре слоёв:
Кроме того можно вызвать инструмент нажатием клавиши С. Далее, выбрав инструмент Crop tool, удерживайте нажатой клавишу Shift сделайте выделение вокруг лица. Клавиша Shift ограничивает выделение квадратом:
Нажмите клавишу Enter когда сделаете выделение, и фотошоп обрежет изображение в виде квадрата:
Шаг 2. Продублируйте фоновый слой дважды.
Следующая вещь которую мы должны сделать - это создать несколько копий нашего изображения. Если посмотреть в палитру слоёв, то можно увидеть что там всего один слой Background (Фон), вернее то что мы Откадрировали (Обрезали). Нужно продублировать этот слой дважды, для этого нужно использовать сочетание клавиш Ctrl+J, нажмите это сочетание дважды чтобы получить две копии. Теперь в палитре слоёв три слоя. Дважды щёлкните по названию слоя и и переименуйте верхний слой в Vertical Strips (Вертикальные полосы), а затем переименуйте нижний слой в Horizontal Strips (Горизонтальные полосы):
Шаг 3. Заполните фоновый слой Чёрным цветом.
Нажмите на клавиатуре клавишу D, чтобы перезагрузить цвета Переднего и Заднего планов. Нажмите на слой Background в палитре слоёв и заполните этот слой чёрным цветом. Используйте для этого сочетание клавиш Alt+Backspase, эта команда заполнит слой чёрным цветом. Кажется ничего не произошло с изображением, но это потому что верхние два слоя блокируют слой Background. Но если посмотреть в палитру слоёв то можно увидеть иконку фонового слоя заполненую чёрным цветом:
Шаг 4. Временно отключите видимость верхнего слоя.
Сначала мы будем создавать горизонтальные полосы, но слой Вертикальные полосы блокирует наш слой Горизонтальные полосы, потому мы должны временно отключить видимость этого слоя. Для этого нажмите на иконку Видимости слоя в палитре слоёв (в виде глазного яблока), слой отключится и иконка глазного яблока исчезнет, показывая что слой скрыт:
Шаг 5. Включите сетку фотошопа.
Мы будем создавать горизонтальные и вертикальные полосы, и поможет нам в этом Сетка фотошопа. Идите в меню View>Show>Grid (Вид-Показать-Сетка), или можно воспользоваться сочетанием клавиш Ctrl+", чтобы быстро вызывать или отключать Сетку. Когда сетка появится, то возможно на вашем изображении её будет плохо видно. Чтобы изменить цвет Сетки нажмите сочетание клавиш Ctrl+K, всплывёт диалоговое окно Настроек (Preferences) фотошопа. Сверху из выпадющего Меню выберите Guides, Grid and Slices (Линейки, Сетка и Части). Здесь вы можете изменить цвет Сетки, нажмите на Образец цвета в правом верхнем углу, выберите цвет. Вы можете видеть что в моём варианте я изменил цвет Сетки на жёлтый:
Нажмите ОК для выхода из диалогового окна Настроек. Теперь вы можете видеть ваш новый цвет (в моём случае жёлтый) на верхней части изображения:
Шаг 6. Выделите ряд горизонтальных полос.
Давайте создадим серию горизонтальных полос с помощью инструмента Прямоугольное выделение, выберите этот инструмент в палитре слоёв, или вызовете клавишей М:
Теперь будем использовать Сетку, чтобы создать горизонтальные полосы. Сначала удостоверьтесь что в палитре слоёв выбран слой Горизонтальные полосы. Я собираюсь создать горизонтальные полосы, которые являются двумя рядами Сетки. Я хочу удостовериться что глаза женщины включены в этот эффект, таким образом я сначала сделаю выделение вокруг глаз женщины. По умолчанию моё выделение будет прилипать к Сетке, что сделает выделение очень лёгким. Если этого не происходит идите в Меню View>Snap To и поставьте галочку напротив Grid.
Вот моё выделение вокруг глаз с двумя рядами Сетки:
Это выделение станет одной из наших горизонтальных полос. Давайте создадим остальную часть выделений. Удерживая нажатой клавишу Shift делайте другие горизонтальные выделения, чередуя два ряда Сетки через один. Удерживая нажатой клавишу Shift вы добавляете новое выделение к остальным. Вот так должно выглядеть ваше изображение после создания выделений:
Шаг 7. Добавьте Маску слоя.
Сделав горизонтальные выделения, добавьте Маску слоя, для этого нажмите на иконку Layer Mask в основании палитры слоёв, чтобы добавить Маску слоя, к слою Горизонтальные полосы:
Фотошоп добавит Маску слоя, и использует выделения для определения того какие части изображения будут скрыты. Там где были сделаны выделения, изображение остнется видимым, в то время как невыделенные области исчезли, и заполнились чёрным цветом:
Шаг 8. Верните Видимость слоя слою Вертикальные полосы.
Тоже самое мы сделаем для создания вертикальных полос. Во-первых верните Видимость слоя Вертикальные полосы, и выберите этот слой в палитре слоёв:
Шаг 9. Выделите ряд вертикальных полос.
Точно также как мы делали при создании горизонтальных полос, создайте серию вертикальных полос. Сделаем выделение полос шириной в две полосы сетки, оставляя между ними один ряд сетки. Используйте для этого Инструмент Прямоугольное выделение, и удерживайте нажатой клавишу Shift для добавления выделений. Вот так должно выглядеть изображения после выделения вертикальных полос:
Шаг 10. Добавьте Маску слоя.
Добавьте Маску слоя к слою Вертикальные полосы, щёлкнув в основаниипалитры слоёв на иконку Layer Mask:
Фотошоп добавит к слою Вертикальные полосы Маску слоя, и использует наше выделение чтобы определить какие области изображения останутся видимыми, а какие исчезнут. Области что были выделены останутся видимыми, а те что остались невыделнными исчезнут, и заполнятся Чёрным цветом:
Шаг 11. Выберите все точки пересечения полос.
У нас есть теперь и горизонтальные и вертикальные полосы, но всё это не очень похоже на нужный эффект. В данный момент мы просто имеем кучу чёрных квадратов. Нам же нужно создать иллюзию переплетённых полос. Чтобы сделать это нужно выделить те районы где вертикальные и горизонтальные области пересекаются. Отключите сетку, если вы ещё не сделали этого, так как нам она больше не нужна. Далее, удерживая нажатой клавишу Ctrl нажмите на иконку Маски слоя Горизонтальные полосы в палитре слоёв:
Это позволит загрузить горизонтиальные полосы обратно в изображение:
Это позволит сделать две вещи. Первое: загрузит вертикальное выделение к изображению, и Второе: оставит выделение только там где вертикальные и горизонтальные полосы пересекаются, всё остальное останется невыделенным:
Шаг 12. Сохраните Выделение.
Шаг 13. Отсейте ненужные выделения.
Находясь на слое Horisontal strips, c активным инструментом Прямоугольное выделение, удерживайте нажатой клавишу Alt и делайте выделение вокруг каждого квадратного выделения. Это удалит выделения. Продолжайте это делать чтобы удалить половину оригинальных квадратных выделений. Ваше изображение должно выглядеть теперь примерно так:
Шаг 14. Скопируйте выделения на новый слой.
Нажмите на слой Горизонтальные полосы в палитре слоёв, затем нажмиет Ctrl+J чтобы скопировать выделенные области на новый слой. Вобщем на изображении ничего не случилось. Но если вы глянете в палитру слоёв, то увидите что там появился новый слой Layer 1, со скопированными квадратными областями:
Шаг 15. Создайте обтравочную Маску.
С новым выбранным слоем пройдите в Меню Layer>Create Clipping Mask (Слой-Применить Обтравочную Маску). Можете также использовать клавиатурное сокращение Ctrl+Alt+G, Обтравочная Маска обрежет нижний слой. Мы не увидим никакого различия непосредственно в изображении, но в палитре слоёв видно что новый слой теперь является Обтравочной Маской нижнему слою:
Шаг 16. Перезагрузите сохранённое выделение.
Давайте вернём выделение, что мы сохранили минуту назад. Сделать это легко с помощью сочетания клавиш Ctrl+Alt+4:
Шаг 17. Отсейте противоположные выделения.
С выбранным инструментом Прямоугольное выделение, удерживая нажатой клавишу Alt делайте выделение вокруг других квадратных выделений, которые не были затронуты в прошлый раз, чтобы удалить их. Когда вы закончите, изображение будет выглядеть так:
Шаг 18. Скопируйте выделение на новый слой.
Нажмите на слой Вертикальные полосы в палитре слоёв чтобы выбрать его, затем нажмите Ctrl+J, чтобы скопировать выделение на новый слой. Опять мы не заметим никаких изменений на самом изображении, но в палитре слоёв фотошоп создаст нам новый слой Layer 2, над слоем Вертикальные полосы, который содержит наши скопированные квадраты:
Шаг 19. Создайте Обтравочную Маску.
Точно также как мы сделали минуту назад идите в Меню Layer>Create Clipping Mask (Слой-Применить Обтравочную Маску). Можете также использовать клавиатурное сокращение Ctrl+Alt+G. В палитре слоёв можно увидиеть что Layer 2 теперь является Обтравочной Маской нижнему слою:
В этом уроке мы собираемся создать небольшую полоску с текстом в Photoshop, которую вы можете расположить в правом верхнем углу своей дизайнерской работы. Эти маленькие полоски выглядят очень модно, включая Web2.0-y, особенно в веб-дизайне! Это довольно простой эффект, также в этом уроке мы добавим мягкие светотени, чтобы сделать эффект выразительным!
Шаг 1
Как всегда мы начнём этот урок с красивого радиального градиента. Я пристрастился к радиальным градиентам, поэтому вы тоже должны! Я использую комбинацию красивых синих тонов. Цвета градиента, которые я использовал:
Цвет 1 - #0e324f
Цвет 2 - #062033
Эффект будет отлично смотреться, если вы добавите светлый тон градиента в верхний правый угол, там, где мы расположим нашу небольшую полоску с текстом. Это связано с тем, как мы будем добавлять светотени позже.
Шаг 2
Данный шаг не является обязательным для выполнения, но я собираюсь добавить гигантскую букву ‘M’, таким образом, у меня будет что-то, поверх чего будет проходить моя текстовая полоска. Когда текстовая полоска взаимодействует с задним фоном таким образом, то эффект становиться ещё красивее.
Так или иначе, я добавил гигантскую букву ‘M’ белого цвета, а затем поменяйте режим наложения для данного слоя с буквой на Перекрытие (Overlay) и уменьшил непрозрачность слоя до 40%, таким образом, мы совместили букву с радиальным градиентом, включая светотени.
Светотени – это наши друзья, они делают наши работы намного красивее. В реальной жизни и дизайне принта, светотени создаются за счёт свет (солнечный свет, электрический свет и т.д.), но на экране монитора всё выглядит однообразно. Поэтому, очень хорошо, когда вы добавляет светотени, чтобы оживить композицию. Обратите внимание, что это практически не работает в печати.
Шаг 3
Далее, создайте новый слой. Нарисуйте длинный прямоугольник светло-серого цвета. Прямоугольник должен быть длинной формы, потому что, когда мы повернём его, он должен быть достаточно длинным. Также добавьте текст. Я написал "Made with Love!", используя забавный шрифт Gill Sans Ultra Bold. У меня есть предрасположенность к жирным шрифтам, потому что они выглядят дружелюбно и броско.
Шаг 4
Далее, я выбрал фигуру сердца из стандартного набора фигур Photoshop. Вы можете сделать это с помощью инструмента Произвольная фигура (Custom Shape Tool (U). В настройках данного инструмента, щёлкните по значку стрелки выпадающего меню Фигура (Shape), как показано на скриншоте ниже. Если ваше меню предлагает небольшой выбор символов, тогда вы можете загрузить еще несколько наборов из библиотеки, для этого, щелкните по значку маленькой стрелки в правом верхнем углу и в выпадающем меню, выберите опцию Загрузить фигуры (Load Shapes).
Шаг 5
Итак, используя фигуру сердца, я нарисовал меленькую фигурку сердца красного цвета на новом слое. Данная комбинация красного, белого и синего выглядит потрясающе.
Трюк с цветовыми комбинациями, как этот, имеет два свойства. Во-первых, у вас должен быть основной цвет (в данном случае синий), далее, вы должны использовать другие цвета, чтобы выделить этот основной цвет. Таким образом, здесь мы имеем много синего, немного светло-серого и небольшой объём красного цвета, который действительно выделяется.
Во-вторых, что нужно помнить, это то, что некоторые цветовые комбинации сталкиваются, как никто. Как если бы вы поместили наш красный цвет на синем, то он будет раздражать. Поэтому, здесь я использовал светло-серый цвет как промежуточный цвет.
Шаг 6
Теперь, чтобы красный цвет по-настоящему выделялся, я перешёл на слой с фигуркой сердца, а затем создал новый слой поверх слоя с фигуркой сердца. Затем, используя ещё более светлый оттенок красного цвета, я нарисовал небольшой градиент в верхнем правом углу. Таким образом, мы добавили радиальный градиент к нашему сердечку, и мы вновь используем светотени!
Я также добавил лёгкую размытую тень к тексту "Made with Love", используя стиль слоя Тень (Drop Shadow). Для этого, щёлкните правой кнопкой по данному слою и в появившемся окне, выберите опцию Параметры наложения (Blending Options). Далее, выберите стиль слоя Тень (Drop Shadow). Установите Смещение (Distance) на 0, а также поменяйте цвет на светло-серый, чтобы тень не была слишком грубой. Не добавляйте стандартную тень, потому что мы нужно, чтобы буквы текста были частью полоски, а не зависали над ней.
Шаг 7
Далее, я хочу добавить границы на полоску, для этого, удерживая клавишу (Ctrl), щёлкните по миниатюре слоя с полоской, чтобы загрузить активное выделение, создайте новый слой, а затем залейте этот слой тёмно-серым оттенком. Далее, идём Выделение – Модификация – Сжать (Select > Modify > Contract). Установите значение Сжатия (contract) выделенной области на 2 px.
Далее, нажмите клавишу (delete), чтобы удалить внутреннюю часть тёмно-серой заливки, сохранив только края. (Обратите внимание, что вам необходимо дважды нажать клавишу со стрелкой вправо, а затем нажать клавишу (delete), далее, необходимо дважды нажать клавишу со стрелкой влево, а затем нажать клавишу (delete), чтобы создать края слева и справа).
Шаг 8
OК, итак, мы создали текстовую полоску, у неё есть края, текст и красивое выделяющееся красное сердечко.
Если вы повернёте текст и края и другие элементы без создания объединённого слоя, то у вас может получиться странный эффект. Когда вы применяете поворот, Photoshop имеет тенденцию размывать и смещать объекты, поэтому лучше всего свести к минимуму побочные эффекты, объединив все составляющие элементы вместе. Конечно же, это означает, что вы должны быть уверены, что ваша текстовая полоска полностью завершена, прежде чем создать объединённый слой!
Совмещение также имеет дополнительное преимущество, которое мы можем использовать позже для Осветления и Затемнения (Dodge и Burn) и коррекции светотеней. Вы скоро увидите, что я имею в виду...
Шаг 9
Итак, сейчас нажмите клавиши (Ctrl+T) для трансформации, удерживая клавишу (Shift), поверните текстовую полоску под 45" градусов.
Шаг 10
Теперь сместите текстовую полоску вверх и вправо. Эффект уже выглядит здорово, но теперь нам нужно добавить немного теней, включая другие эффекты.
Итак, создайте новый слой поверх всех слоёв, а затем установите цвет переднего плана на светло-серый цвет. Удерживая клавишу (Ctrl), щёлкните по миниатюре слоя с текстовой полоской, чтобы загрузить активное выделение. Далее, создайте градиент, цвета градиента от светло-серого к прозрачному, сверху вниз, а затем создайте второй градиент, только на это раз снизу вверх.
Результат должен быть, как на скриншоте ниже – немного серых тонов поступает сверху и немного серых тонов поступает снизу.
Шаг 11
Теперь поменяйте режим наложения для нового слоя на Умножение (Multiply). Поскольку мы использовали приятный слабый серый цвет, это помогло создать хорошую тень. Если вы использовали более тёмный серый цвет, то вам, возможно, придётся приглушить эффект с помощью уменьшения непрозрачности.
Шаг 12
Теперь возвращаемся на сам слой с текстовой полоской. Выберите инструмент Затемнитель (Burn Tool (O), установите большую мягкую кисть, с которой вы будете работать.
Аккуратно затемните нижнюю и верхнюю часть полоски. В настройках инструмента Затемнитель (Burn Tool), уменьшите значение Экспозиции (Exposure), я использовал значение 20%. Это позволит вам создать нежный эффект, не переусердствовав с эффектом.
Когда вы завершите работу над затемнением верхней и нижней части полоски, то вы можете, если хотите, удерживая клавишу (Alt), аккуратно и слегка прокрасить среднюю часть. Удержание клавиши (Alt), когда активен инструмент Затемнитель (Burn Tool) переключит инструмент на инструмент Осветлитель (dodge).
Инструменты Затемнитель / Осветлитель (Burn and Dodge) – это как две противоположности друг друга. Затемнитель затемняет, Осветлитель осветляет. Это довольно полезные инструменты, однако, старайтесь использовать их аккуратно, иначе вы можете слегка испортить эффект.
Шаг 13
Итак, наша текстовая полоска выглядит отлично, теперь давайте добавим тень за ней.
Создайте новый слой ниже слоя с текстовой полоской.
Удерживая клавишу (Ctrl), щёлкните по миниатюре слоя с текстовой полоской, чтобы загрузить активное выделение. Залейте выделенную область серым цветом средних тонов на новом слое.
Далее, отмените активное выделение (Ctrl+D), а затем дважды нажмите клавишу со стрелкой вниз и дважды на клавишу со стрелкой влево, таким образом, чтобы ваш новый слой был расположен ниже и справа от текстовой полоски (как показано на скриншоте ниже)
Это будет наш слой тенью.
Шаг 14
Поменяйте режим наложения для слоя с тенью на Умножение (Multiply), а затем идём Фильтр – Размытие- Размытие по Гауссу (Filter > Blur > Gaussian Blur). Установите радиус размытия примерно на 3-4px. В результате, мы получим красивую тень.
Шаг 15
Теперь нам нужно, чтобы наша текстовая полоска выглядела так, как будто она выпуклая посередине. Это означает, что тень станет меньше сверху, и в нижней части полоски, потому что концы текстовой полоски будет ближе к заднему фону. Имеет ли это смысл?
В основном, если что-то расположено далеко от заднего фона, то его тень будет больше, а если ближе, то тень будет меньше...
В любом случае, выберите инструмент Ластик (Erase Tool (E), установите большую мягкую кисть, а затем слегка удалите тени сверху и снизу, чтобы они были едва уловимыми с обоих концов текстовой полоски.
Шаг 16
На скриншоте ниже, вы можете увидеть итоговый результат:: красивую полоску с текстом!
