Как верстать газету в фотошопе
Это действительно интересный эффект. Я его использовал не один раз - он производит сильное впечатление на людей, они часто хотят узнать, как я это делаю. Нет, я не использую печатный станок. И нет, я не не сканирую настоящую газету и не меняю текст Фотошопом. На самом деле я использую только Photoshop, от начала и до конца. Картинка была сделана с использованием различных приемов, которые в сочетании дают такой вот неплохой результат.
Для начала создайте новое RGB-изображение. Я задал размеры 400х400 пикселей.
Если вы когда-нибудь видели настоящую английскую газету, вы должны были заметить, что на самом деле она не черно-белая - газетная бумага имеет теплый оттенок. А поскольку мы хотим, чтобы было похоже, установим цвет краски как RGB (237,224,221) и фона - RGB (42,29,26).
Теперь давайте начнем.
Создайте новый слой и назовите его "Paper". Используйте инструмент выделения, чтобы выделить квадрат (или прямоугольник, это не имеет значения) немного меньше, чем наш документ. 310-325 пиксел на каждую сторону будет нормально. Залейте его нашей краской, а потом уберите выделение (Ctrl+D).
Ну вот, настало время хорошенько повеселиться. Напечатайте статью цветом фона. Times и Times New Roman - хорошие газетные шрифты. Некоторые заголовки британских газет набираются шрифтом Old English. Используйте те шрифты, которые вам кажутся более подходящими. Создайте новый слой для создания разделителей статей (линеек). Их можно нарисовать, используя иструмент рисования линий с шириной 1 пиксель и цвет фона. Размещайте статью и рисунки так, чтобы они выходили за правую и нижнюю границу газеты.
Помните, я говорил, что цвета нашей газеты не черно-белые, а имеют розоватый оттенок? Это относится и к фотографиям. Поэтому нам нужно их подредактировать. Откройте фотографию в новом окне. Конвертируйте изображение в "grayscale" (оттенки серого), и потом снова верните в RGB. Создайте новый слой и заполните его цветом краски. Выделите все, уменьшите выделение на 1 пиксель и нажмите Delete. Мы получим черные (или, я бы сказал, теплые черные) границы вокруг картинки. Склейте слои и скопируйте в новый слой нашей газеты.
Примечание: Мы собираемся порвать газету справа и снизу. Держите это в голове, когда будете верстать статьи. Текст, который должен читаться, нужно разместить на некотором расстоянии от правой и нижней границы газеты.
Обычно на этом этапе я склеиваю текст, изображение и линейки в один слой. Однако, если вы следуете этому уроку и вдруг понимаете, что неправильно написали адрес своей веб-страницы, будет много слез. Поверьте мне, я знаю это на собственном опыте. Поэтому лучше делайте копии слоев или файла перед тем, как склеивать.
Ну а теперь - склеиваем слои и переименовываем получившийся слой в "Front Page".
НА САМОМ ДЕЛЕ фотографию сделал не японский турист, я ее взял с Dr. Ozone's Image Archives.
Если вы внимательно посмотрите на мою газету, то заметите текст и картинки на обратной стороне. Это придаст вашей газете реалистичность. Скройте слой "Front Page", а потом повторите все сначала, но теперь текст, заголовок и картинка должны быть другими. Единственная разница должна состоять в том, что граница картинки и текста должна быть справа, а не слева. Можно было бы просто дублировать слой "Front Page" и отразить его по горизонтали, но тогда газета будет выглядеть недостаточно реалистично.
Текст может быть нечитаемым, но заголовок и изображение должны быть настоящими.
Ну вот, мы создали обратную сторону, теперь можно склеить слои и назвать получившийся слой "Back Page". Щелкните по этому слою и переверните его по горизонтали (Edit > Transform > Flip Horizontal) и выставьте непрозрачность на 10%. Теперь сделайте слой "Front Page" видимым и двигайте слой "Back Page" так, чтобы границы текста на обоих слоях совместились.
Примечание: Следующие несколько шагов описывают метод, без которого просто невозможно обойтись - неважно, делаете ли вы газету, обрабатываете ли фотографию или имитируете листок записной книжки. Тут описывается, как сделать реалистичные разрывы бумаги.
Надеюсь, вы оставили зазор справа для разрывов. Иначе вам придется долго мучиться с лассо, чтобы не удалить лишнего или вернуться на несколько шагов назад.
Переключитесь на слой с газетой и используйте инструмент "лассо", чтобы нарисовать зубчатую линию справа и снизу изображения. Затем перейдите к левой части вырежите дырки в поле. Затем переместите инструмент к краю картинки, как можно ближе к точке, откуда вы начали выделение. Все это нужно сделать за один сеанс выделения. Теперь переключитесь на быстрое выделение ("quick mask").
Этот шаг придаст нашему рваному краю реалистичный вид. Выполните Filter->Pixelate->Cristalize со значением "3". Если я объяснил все это недостаточно понятно - посмотрите на картинку ниже.
Инвертируйте выделение, затем переключитесь к нормальному режиму выделения и нажмите Delete. Удалите это выделение не только в слое "Front Page", но и в "Back Page". Если вы также осторожны, как я (ну, скажем, как я в Фотошопе), вы можете сохранить выделение прежде чем убирать его.
Верхний край газеты обычно перфорирован. Чтобы воспроизвести этот эффект, вам понадобиться создать новую кисть. Вот параметры, которые я использовал:
Diameter: 20
Hardness: 90%
Spacing: 75%
Angle: 90°
Roundness: 28%
Выберите инструмент "резинка" (тот, который похож на кирпичик), и, удерживая Shift кликните и тащите кисть горизонтально вдоль верхнего края картинки. Должно получиться примерно так:
Если все получается как надо, продолжайте, а если что-то не так, попробуйте поменять настройки кисти.
Если ваша картинка больше по размеру, чем моя, вам нужно увеличить размер кисти.
Чтобы придать нашей картинке реалистичную глубину, нужно добавить тень. Тем из вас, кто любит делать тень, используя эффекты слоя, придется пользоваться старомодным методом, если вы хотите еще сделать загиб страницы. Создайте новый слой под названием "Shadow" и заполнить его (fill) черным цветом (на этот раз совершенно черным). Выделите слой с газетой (Ctrl+клик на слое "Paper"), щелкните на слое "Shadow" и нажмите Delete. Затем выполните Gaussian blur со значением 3. Не сдвигайте пока тень, сначала создадим эффект загиба страницы.
Я делаю копию файла на этом этапе, так как сейчас нам нужно будет склеить слои. Склейте все, кроме слоя "Shadow" и фона, если он у вас есть.
Вот теперь можно сдвинуть тень на свой вкус, и все, в принципе, работу можно считать законченой, но я бы сделал загиб страницы, добавив изображению реалистичности.
Я очень растерялся, когда стал думать, как можно реализовать загиб страницы. И единственный приемлемый путь, который я в итоге нашел - использовать возможности displacement map. Но для начала нужно создать эту самую карту. Для этого создайте новое изображение размером 400х400 (такое же по размеру, как первое). Измените цвет краски и фона обратно к стандартным, черному и белому, без всяких оттенков.
Выберите инструмент градиентной заливки. Нажмите на кнопку с инструментом и держите, пока не появится дополнительная панель с кнопками заливки.
Теперь выберите "Gradient editor" (нажмите "edit" на панели инструментов или, если у вас версия 6+, два раза кликните на градиенте). Установите точку смещения на 80%.
Теперь давайте размоем все это. Выполните размывание по Гауссу (Gaussian blur) со значениями 8, 4, 2 и 1, поочередно. Это должно немного скруглить загиб, так, чтобы убрать артефакты.
Примечание: Иногда у меня не сразу получается то, что надо. Мне нравится, когда получается хорошая 50% серая область в левом верхнем углу, чтобы остаток страницы не загибался. Если мой градиент не имеет такой области, приходится заливать заново.
Ну наконец, все получается как надо, выделите все и скопируйте. Затем сохраните картинку как dismap.psd. Вот что неприятно в использовании displacement map, так это то, что приходится использовать внешний файл, я бы предпочел, чтобы можно было использовать каналы изображения, чтобы не приходилось производить весь этот обмен файлами, ну да ладно. Вернемся к файлу с газетой и вставим карту из буфера в новый слой. Он нам потом пригодится, но пока скроем его.
Выбираем Filter > Distort > Displace. , а там выбираем dismap.psd. Устанавливаем для Horizontal Scale и Vertical scale одинаковые значения, а сами значения могут быть любыми. На мой взгляд с 50% работает хорошо, но вы можете выбрать значение чуть больше или чуть меньше.
Выбираем слой "Shadow". Используем фильтр Displacement с теми же или меньшими значениями, чем те, что мы использовали на газете, но добавьте еще минус перед значением. Я использовал -25%.
Ну вот, тень готова, но она должна смягчаться по мере отдаления от газеты. Если у вас еще сохранился наш градиент в буфере, вам везет, если же нет, придется вернуться в файл dismap.psd и достать его отткуда. Вставьте градиент в новый канал файла с газетой. Выполните Image -> Adjust -> Auto Levels на канале, чтобы увеличить контрастность (Shift+Ctrl+L). Теперь выделите этот канал.
Вернемся к палитре слоев и сделаем активным слой с тенью. Снова размываем. Выполните Gaussian blur со значениями - последовательно 8, 4, 2 и 1. Уберите выделение и выполните на весь слой тени Gaussian blur со значением 5.
Выделите все (Ctrl+A) и сдвиньте тень на 3 пикселя вниз и на 3 пикселя направо.
Помните слой с градиентом? Теперь мы его используем, чтобы придать странице реалистичный вид загнутой, а не просто деформированной. Выделите слой с газетой и удалите выделенное со слоя с градиентом. Теперь установите параметр наложения слоя с градиентом на "Overlay".
Если хотите, можете слегка повернуть слой с газетой и тенью. Для этого склейте все слои кроме фона и выполните Edit -> Transform -> Rotate. Это будет завершающий штрих.
И последнее, но не в последнюю очередь - нам нужно прикрепить обрывок к "стенке". Я воспользовался уроком с Photoshop Guru's Handbook (перевод урока на русский язык - здесь). Но вы можете вместо скотча использовать канцелярскую кнопку - воспользуйтесь любым уроком для создания кнопок и действуйте по аналогии.
Иногда я рад, что технический прогресс подарил пользователям несметное количество средств для дизайна, оформления, верстки изданий разных типов и уровней сложности. В частности, я рад тому, что знакомый всем Word не стал единственным инструментом для верстки больших книг. Всем ясно, что для подобных задач существует тот же InDesgin.
В момент такой радости я однажды наткнулся на феномен верстки журналов в Фотошопе. Вы спросите: как возможно верстать текст в программе, которая разработана для работы с графикой? Я отвечу вот такой картинкой:
Остановимся только на верстке текста, ради которого газета и издается. Невнимание дизайнера обложки к тексту выдает ее «графическое» происхождение. Шапка неизменна в каждом номере «Народного учителя». Вроде бы как фон — радужный градиент — задает непринужденно-молодежное оформление газеты. И читатель вправе ожидать того же от шрифта, однако гарнитура в наборе отдает глухими 90-ми. Шрифт тяжеловесен, контрастирует с ярким, приветливым фоном, в конечном счете, заглушает его. Отношение к читателю у «шапки» — такое же наплевательское, как и по отношению к фону, ибо здесь всё случайно и непредсказуемо: синяя обводка, широкий набор резко переходит в узкий (шрифт Impact). Такое чувство, что газета сама не знает, чего хочет.
«Учитель» почему-то набран с большой буквы, хотя не является именем собственным. Если же тут есть намек на миссию Учителя, то слишком робкий. Но всё это мелочи по сравнению с тем, что «УрГПУ» в «шапке», по сути, написано трижды. Если что-то газета и знает, так это название своего вуза.
Для типографов здесь большой простор: после «№» нет полагающегося отступа; прописные буквы набираются без разрядки; дефис набран вместо тире — для дизайнера это одно и то же; наконец, для ярых перфекционистов можно сделать так:
После шапки мы наталкиваемся на новые попытки дизайнеров усложнить восприятие текста. Для этого был выбран уже не градиент с белым цветом текста, как в шапке, а смена начертания текста. В качественных изданиях, будь то книги или журналы, как правило, используется какое-то одно начертание (полужирное или курсив) для выделения фрагмента текста. Например, заголовок традиционно делают полужирным, а выделения в тексте — на вкус издателя. Об этом пишет как А. Э. Мильчин в «Справочнике издателя и автора», так и А. Лебедев в § 79 «Ководства». В газете мы видим, что дизайнер пошел по простому пути, не усложняя себе жизнь: выделил весь текст обложки и зафигачил его полужирным курсивом целиком.
Здесь можно придираться к самым разным мелочам: неразличение короткого и длинного тире; «стр. стр. стр. стр.»; двоеточие, которое в заголовках никогда не ставится; неожиданное чередование прописных и строчных букв в анонсах; непонятное внешнее «свечение» у прописных букв; появление скругленных углов у блоков с анонсами, в то время как вся обложка выдержана в прямых углах и т. д. Всё это действительно мелочи. Остается только снова обратиться к перфекционистам:
Поля? Отступы? Всё это действительно неважно, господа. Обложка газеты — хороший пример ошибочно выбранного программного средства. Другая проблема — отсутствие навыков работы с ПО, но это уже из совершенно другой оперы. Здесь нет виноватых. В идеальном мире редакция газеты имеет штатного типографа, при отсутствии которого работа с текстом перекладывается на верстальщика. Если же нет и его, а газету делает 1-2 человека, то ее выпуск превращается в настоящий подвиг, а половина перечисленных мной изъянов оправдываются сложившейся в нашей стране ситуацией.
Автор/Переводчик: PSprofi No Comments
Материалы для урока:
Архив
(После того, как кликните по ссылке — браузер выдаст вам ошибку «Forbidden…». Не закрывая окна браузера, в адресной строке «перейдите» по ссылке еще раз — начнется скачивание архива.)
Шаг 1
Создайте новый документ размером 1024×780 pх, с разрешением 72dpi, RGB 8 bit. Скачайте архив с материалами и пометите в ваш рабочий документ файл с гранжевой текстурой — DSC_0371.jpg (просто перетащите изображение из папки в ваш рабочий документ). Поскольку изображение не полностью перекрывает холст, растяните его до нужного размера, потянув на угловой маркер и удерживая клавишу Shift.
Теперь можете объединить фоновый слой и слой с текстурой, выделив их на панели слоев и нажав Ctrl+E.
Выберите инструмент Rectangle Tool (U)/ Инструмент «Прямоугольник» , проверьте, что у вас установлен режим Shape/Фигура на верхней панели настроек, и нарисуйте вот такой прямоугольник белого цвета:
Загрузите выделение прямоугольника, кликнув по его иконке на панели слоев с зажатой клавишей Ctrl:
Затем примените фильтр Add Noise (Filter> Noise> Add Noise/Фильтр > Шум > Добавить шум) к выделенной области со следующими настройками (В появившемся окошке с вопросом о растрировании слоя нажмите ОК):
Кликните дважды по этому же слою на панели слоев, чтобы добавить стиль слоя Inner Shadow / Внутренняя тень со следующими настройками:
Откройте папку с материалами к уроку и установите файл с кистями (ubersuper-folded-paper.abr), кликнув по нему дважды. Затем создайте новый слой (Ctrl+Shift+N) , возьмите инструмент Кисть/Brush Tool ( B ), выберите кисть, показанную на рисунке, и сделайте ей отпечаток поверх вашего прямоугольника (цвет кисти – черный). Перед тем, как будете делать отпечаток кисти, загрузите выделение слоя с прямоугольником.
При необходимости, увеличьте размер кисти так, чтобы она полностью перекрывала белый прямоугольник
Измените режим смешивания этого слоя с полоской на Linear Burn/ Линейный затемнитель:
Теперь возьмите инструмент Line Tool (U)/ Инструмент «Линия» и нарисуйте линии черного цвета как показано на рисунке:
Поместите на ваш рабочий холст изображения из папки с материалами или возьмите понравившиеся вам фотографии или картинки. Разместите их следующим образом:
Измените режим смешивания каждого слоя с картинкой на Multiply/Умножение:
Возьмите инструмент Horizontal Type Tool (T)/ Инструмент «Горизонтальный текст» и добавьте желаемый текст. Чтобы добавить текст ровно в прямоугольную колонку сделайте следующим образом: возьмите инструмент Rectangle Tool (U)/ Инструмент «Прямоугольник» и нарисуйте прямоугольник нужной формы в режиме Path. Затем возьмите инструмент Horizontal Type Tool (T)/ Инструмент «Горизонтальный текст» , кликните внутри полученного контура и вставьте скопированный заранее текст (Ctrl+V).
Теперь давайте добавим название газеты. В данном случае автор выбрал название «Le Monde» («Мир»). Вы можете либо поместить изображение с названием из папки с материалами, либо написать свое шрифтом GothicRusMedium или English Ggothic 17th
Добавьте еще различных логотипов, надписей и изображений по своему вкусу. У автора получилось следующее:
Измените режим смешивания слоя с градиентом на Difference/ Разница и уменьшите его Непрозрачность (Opacity) до 55%
Теперь выделите все слои кроме фонового слоя с текстурой, продублируйте их (правый клик по слоям на панели слоев > Duplicate Layers) и слейте в один слой полученные копии (Ctrl+E) .
Выделите полученный слой, активируйте режим трансформации (Ctrl+T) и поверните верхнюю газету на небольшой угол:
Добавьте объединенному слою с газетой два стиля слоя, кликнув по нему дважды на панели слоев:
Drop Shadow/Тень и Bevel and Emboss/Тиснение
Вот, что у вас получится:
Продублируйте (Ctrl+J) полученный слой с газетой еще несколько раз и поверните копии в режиме трансформации (Ctrl+T) на небольшой угол относительно верхней газеты.
И в завершении, добавьте корректирующий слой Color Balance/Цветовой Баланс (Layer> New Adjustment Layer> Color Balance/Слой > Новый Корректирующий слой > Цветовой Баланс ) и установите для него следующие настройки:
Финальный результат!
Когда малый бизнес сталкивается с необходимостью организации собственной ИТ-инфраструктуры, непременно возникает вопрос организации собственной службы технической поддержки. Оптимальный решением для компаний такого размера является комплексное абонентское обслуживание компьютера.
Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.
Как вырезать и сохранять картинки?
Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.
Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:
Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.
Во-вторых, в окне "Слои" в нужном слое нажать на правую кнопку мыши и выбрать пункт "Создать дубликат слоя…". В диалоговом окне "Дубликат слоя" выбрать в выпадающем списке пункт "Новый".
Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.
Далее в левой панели необходимо выбрать инструмент "Рамка". Весь документ затемнится, кроме нужной картинки.
Жмем Enter. Наша картинка готова.
Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web
Как правило, картинки сохраняют в JPEG и PNG-24.
Сохранение SVG картинок в Photophop
Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на "Экспортировать как…"
Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на "Экспортировать все". Важно, чтобы картинка в документе была одна.
Информация о font-family, font-size, line-height, color
Чтобы найти данные по этим трем компонентам, достаточно дважды кликнуть на слой с текстом, чтобы он стал активным. Как правило, информацию о font-family и font-size можно найти в верхней панели, а данные о line-height в окне "Символ". Обычно он располагается в правой части, но если его пока там нет, достаточно открыть его через Окно -> Символ.
Информация о margin и padding
Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент "Прямоугольная область" и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.
Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.
Информация об opacity
Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности. Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна "Слои". На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%. Следовательно, в css следует записать следующее: opacity: 0.9
Горячие клавиши Photoshop для верстака
В процессе верстки я применяю "горячие клавиши", которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:
Ctrl + "-" — уменьшить масштаб
Ctrl + "+" — увеличить масштаб
Ctrl + "1" — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно "Размер изображения"
P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.
Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю:
В этом уроке вы узнаете как с помощью шрифтов, фигур, текстур и кистей создать текстовый эффект в виде вырезанных фрагментов из газеты.
Сложность урока: Средний
В этом уроке вы узнаете, как с помощью множества шрифтов, фигур, текстур и кистей создать текстовый эффект в виде вырезанных фрагментов газеты в Photoshop. Начнем!
На создание этого эффекта меня вдохновили стили слоя доступные на сайте GraphicRiver.
1. Создаем фон и текстовые слои
Шаг 1
Шаг 2
Каждую букву добавляем в группу (в названии пишем ту же букву), затем каждое слово группируем в отдельную группу.
Шаг 3
После этого рядом с каждой буквой слева или справа мы должны добавить дополнительные буквы, чтобы финальный результат выглядел реалистичнее, так как в газетах обычно не используют текст с большим расстоянием между символами.
2. Добавляем фигуры и текстовые блоки
Шаг 1
Берем Rectangle Tool (U) (Прямоугольник) и под любой группой букв рисуем линию.
Если вы добавляете дополнительные детали к тексту, то текстовый слой и слои с деталями добавляем в новую группу внутри группы с буквой.
В итоге у нас получится структура с вложенными друг в друга папками. Это позволит содержать панель слоев в порядке и не запутаться во время работы.
Шаг 2
Чтобы добавить блок текста под любой буквой, берем Type Tool (T) (Текст), кликаем и тянем левой кнопкой мышки, чтобы создать рамку под нужной буквой, затем переходим Type – Paste Lorem Ipsum (Текст – Вставить Lorem Ipsum).
Примечание переводчика: Lorem Ipsum – это так называемый текст-заполнитель, который вставляется в дизайн. Чаще всего его используют в печати и веб-дизайне.
Настраиваем внешний вид текста и выбираем любой шрифт и размер.
Шаг 3
Если вы хотите добавить блоки текста под другими буквами, то удаляем часть текста, чтобы он не повторялся.
Шаг 4
3. Добавляем маски
Шаг 1
Берем Lasso Tool (L) (Лассо), выбираем группу с буквой и рисуем выделение вокруг основной буквы, которая есть в названии группы.
Постарайтесь нарисовать выделение в форме оторванного клочка бумаги.
Вот здесь нам и пригодятся буквы, которые мы добавляли рядом с основными. Это придаст эффекту реалистичности.
Шаг 2
После создания выделения, в нижней части панели слоев жмем на кнопку Add layer mask (Добавить слой-маску).
Шаг 3
Повторяем первые два шага и добавляем маску для остальных групп с буквами. При необходимости, вы в любой момент можете отредактировать маску, поэтому не беспокойтесь, если у вас не получилось красивое выделение с первого раза.
4. Добавляем текстуру бумаги
Шаг 1
Размещаем зернистую текстуру бумаги в нижней части группы с первой буквой и, при необходимости, корректируем размер.
Шаг 2
Меняем режим смешивания слоя или группы над текстурой бумаги на Linear Burn (Линейный затемнитель).
Шаг 3
Дублируем (Ctrl+J) слой с текстурой бумаги и добавляем копию в следующую группу с буквой. Повторяем процесс, пока не заполним текстурой все клочки.
Шаг 4
Если после добавления маски вы хотите передвинуть содержимое группы, то для начала нужно отсоединить маску от слоя, нажав на значок с цепью между ними. Затем двигаем слои и после этого снова связываем маску и слой.
5. Добавляем текстуру мятой бумаги
Шаг 1
В верхней части группы с первой буквой вставляем текстуру бумаги 1, корректируем ее размер и меняем режим смешивания на Multiply (Умножение).
Шаг 2
Дублируем текстуру и добавляем ее в остальные группы.
6. Создаем кисточку в виде разорванных краев
Берем Brush Tool (B) (Кисть) и открываем панель Window – Brush (Окно – Кисть).
Выбираем кисточку Chalk размером 23 пикселя и настраиваем ее:
Brush Tip Shape (Форма отпечатка кисти)
Shape Dynamics (Динамика формы)
7. Создаем рабочий контур из выделения
Шаг 1
Зажимаем клавишу Ctrl и кликаем по миниатюре маски группы с первой буквой, чтобы загрузить ее выделение.
Шаг 2
Открываем панель Window – Paths (Окно – Контуры) и в нижней части нажимаем кнопку Make work path from selection (Создать рабочий контур из выделенной области).
8. Выполняем обводку контура
Шаг 1
Убедитесь, что инструмент Brush Tool (B) (Кисть) активен и выбрана созданная выше кисточка. Затем проверяем, чтобы была выделена маска группы с первой буквой и устанавливаем цвет переднего плана на черный.
Шаг 2
Жмем клавишу Enter, чтобы автоматически обвести кисточкой контур и добавить эффект оборванных краев.
Шаг 3
Повторяем процесс для остальных букв.
Закончив, берем Direct Selection Tool (A) (Частичное выделение) и последний раз жмем на клавишу Enter, чтобы убрать контур.
9. Добавляем белые оборванные края
Шаг 1
Чтобы результат выглядел реалистичнее, по контуру клочков бумаги мы добавим белые края.
Вставляем текстуру бумаги 2 под группой с первой буквой. При этом убедитесь, что слой находится именно под группой, а не внутри нее.
Шаг 2
Зажимаем клавишу Alt, хватаем маску группы и перемещаем ее на слой с текстурой бумаги 2, чтобы скопировать.
Шаг 3
Берем Move Tool (V) (Перемещение) и с помощью стрелок на клавиатуре вправо и вниз смещаем текстуру бумаги 2, чтобы она выглядывала из-под фрагмента бумаги.
Шаг 4
Повторяем действия с добавлением текстуры для остальных букв.
10. Добавляем тень
Шаг 1
Дважды кликаем по текстуре бумаги 2, которую мы добавляли для первой буквы, и применяем стиль слоя Drop Shadow (Тень) со следующими параметрами:
Шаг 2
Кликаем правой кнопкой по слою, которому мы применили тень, выбираем Copy Layer Style (Скопировать стиль слоя), выделяем все остальные слои с текстурой бумаги 2, кликаем по ним правой кнопкой мышки и выбираем Paste Layer Style (Вставить стиль слоя).
11. Добавляем просвечивающийся эффект
Шаг 1
Чтобы добавить эффект просвечивающейся бумаги, в верхней части группы с буквой добавляем блок с текстом Lorem Ipsum.
Шаг 2
Переходим Edit – Transform – Flip Horizontal (Редактирование – Трансформация – Отразить по горизонтали) и уменьшаем Opacity (непрозрачность) слоя до 10%.
Повторяем процесс для других букв.
12. Трансформируем фрагменты с буквами
Шаг 1
Шаг 2
Далее мы трансформируем некоторые фрагменты, чтобы придать текстовому эффекту динамики.
Выделяем группу с буквой и слой с текстурой бумаги 2, жмем Ctrl+T, чтобы активировать режим свободной трансформации.
Если вы сразу попытаетесь редактировать фрагмент с буквой, то трансформация будет происходить немного странным образом. Это возникает из-за того, что текстура бумаги достаточно большая, а опорная точка, относительно которой происходит трансформация, находится не в центре буквы.
Шаг 3
Перемещаем, поворачиваем и корректируем размер буквы. Закончив, жмем клавишу Enter, чтобы применить трансформацию.
Шаг 4
Повторяем процесс, чтобы трансформировать остальные буквы.
13. Добавляем фон
Шаг 1
Над слоем Solid Color (Цвет) добавляем копию текстуры бумаги 2, корректируем ее размер и уменьшаем непрозрачность до 50%.
Шаг 2
Имейте в виду, что вы в любой момент можете настроить шрифты, размеры и отредактировать маски каждой буквы.
Поздравляю, мы закончили!
В начале урока мы создали много текстовых слоев, используя разные шрифты и размеры. Затем сгруппировали все буквы и добавили несколько текстур бумаги.
Также мы создали кусочки бумаги, добавили блоки с текстом Lorem Ipsum и создали специальную кисточку для создания эффекта рваных краев.
В конце мы изменили цвет некоторых элементов и применили трансформацию, чтобы результат выглядел реалистичнее.
Не стесняйтесь оставлять комментарии, предложения и делиться результатами.
Читайте также: