Два дебила - это СИЛА (с) "...пельмени требуют повышения зарплаты..."(с)
Вводная статья по теме компьютерная графика и графические редакторы
Коллаж, урок 1. Когда светит солнце.
Я считаю, что, когда мы выполняем с вами какую-то конкретную задачу - учиться и запоминать пройденное гораздо легче, поэтому в этом и еще парочке уроков мы будем с вами учиться создавать коллажи от самого простого до более-менее сложного, а заодно мы выучим много нужных функций программы Adobe Photoshop, которые следует знать каждому.
Итак, в этом уроке, имея для начала в своем распоряжении две незатейливые картинки солнца и облака:
Мы будем пытаться создать в итоге картинку "Солнце на небе в окружении двух злобных тучек":
Прежде всего вам нужно сохранить у себя на компьютере изображения с солнцем и тучкой. Для этого сначала кликаем правой кнопкой мышки по картинке с солнцем. В выпавшем меню выбираем пункт Save picture as (Сохранить картинку как). Затем таким же образом сохраняем картинку с облаком.
читать дальшеСоздаем новое изображение
Теперь нам следует открыть Photohop и создать там новое изображение: File - New.
Name - имя файла с изображением (называйте, как хотите). Width - ширина картинки, в нашем случае в пикселах, т.к. мы создаем изображение для веб, но мы можем изменить единицы измерения ширины на сантиметры, миллиметры и т.д. Height - высота картинки.
Сейчас мы будем создавать изображение 400 на 400 пикселов.
Resolution - разрешение, в компьютерной графике число точек на единицу длины или площади, будет иметь значение, если мы будем работать с графикой для печати, для веб нам хватит 72-х точек. Mode - режим изображения. Нам нужен режим RGB - Red + Green + Blue - система цветоделения, используемая для графики на веб-сайтах, при которой каждый цвет разбивается на 3 составляющие: красный, зеленый и синий.
И последний пункт, который вам может быть не ясен, когда вы задаете параметры для нового изображения: Contents - Transparent - Подложка под изображение - Прозрачная.
Итак, когда мы задали все нужные параметры для нового изображения, мы можем приступать к работе. Позже, если вы задали ширину или высоту больше или меньше, чем вам нужно было, вы можете исправить это (Image - Image size или Image - Canvas size), так что для начала мы задаем лишь примерные размеры изображения.
Открываем уже имеющиеся у нас в наличии изображения
Теперь нам нужно открыть в Photoshop картинки с солнцем и облаком. Вы уже должны знать по предыдущим статьям, как это делать, но если вы забыли, то я вам напомню: File - Open.
Открыли. Теперь, т.к. эти картинки были сохранены ранее, как *.gif, то они имеют цветовой режим Indexed Color, для того, чтобы сейчас работать с ними, нам нужно изменить его на RGB. Выбираем картинку с солнцем. Выбираем в верхнем меню пункт: Image - Mode - RGB color. Теперь выбираем картинку с облаком. Проделываем с ней ту же операцию.
Зачем мы меняли цветовой режим? Дело в том, что Indexed color ограничен 256-ью цветами, так же в этом режиме мы не можем работать со слоями (что это такое, я расскажу чуть попозже), также картинки в этом режиме мы не сможем перенести на нашу новую картинку, т.к. в ней мы используем режим RGB.
Задаем и изменяем цвет
Итак, т.к. мы с вами создаем небо, то нам нужно, чтобы оно было голубым. Как закрасить нашу новую картинку голубым. Для начала переключитесь на нее (щелкните мышкой по окошку с картинкой kollazh). Далее выбираем на панели инструментов (если у вас по каким-то причинам она еще не открыта, вызовите ее при помощи верхнего меню: Window - Tools) инструмент "пипетка" (eyedropper tool). Теперь мы можем ткнуть пипеткой на любое изображение, которое у нас открыто в Photoshop, и таким образом взять с него цвет. В нашем случае мы будем тыкать по картинке с облаком, чтобы взять с нее голубой цвет.
Как проконтролировать, взяли ли мы "пипеткой" нужный нам цвет с другой картинки. Обратите внимание: внизу панели инструментов у нас есть два квадрата. Нас интересует верхний квадрат (он показывает, какого цвета будет передний план нашей картинки). Если верхний квадрат стал голубым, значит у нас все получилось.
Если у вас во время работы с изображениями что-то не получилось, или получилось, но не так, как вы хотели, то, чтобы отменить сделанное вами действие нажмите на клавиатуре Alt+Ctrl+Z (через меню Edit - Step Backward), если вы передумали отменять предыдущее действие, то нажмите на клавиатуре Shift+Ctrl+Z (через меню Edit - Step Foward), чтобы вернуть все обратно.
Есть и другой способ изменить цвет: если вы два раза щелкните левой кнопкой мыши по верхнему квадрату, то у вас появится цветовая палитра, на которой вы можете выбрать нужный вам цвет. Обратите внимание, в режиме выбора цвета на цветовой палитре мы переключились автоматически на инструмент "пипетка", и вы можете, как выбрать цвет в окошке с цветовой палитрой, так и взять "пипеткой" цвет с открытых вами ранее в Photoshop картинок.
Теперь, когда мы выбрали с вами нужный нам цвет для неба, зальем голубым цветом нашу картинку. Для этого выбираем инструмент "ведро с льющейся краской" (Paint Bucket Tool) на панели инструментов, затем левой кнопкой мыши кликаем по нашей пока что пустой картинке, чтобы залить наш холст голубым цветом.
После того, как мы окрасили наше небо в голубой цвет, мы будем переносить солнце и облако на нашу картинку. Для этого переключимся на инструмент Move tool (черная стрелка с плюсом) на панели инструментов. Затем, кликнем мышкой по окошку, где у нас находится картинка с солнцем, чтобы сделать окно активным. Теперь кликаем левой кнопкой мыши по рисунку с солнцем, удерживая кнопку нажатой перетаскиваем солнышко в окошко с небом. Тоже самое проделываем с облаком. В итоге у нас должно получится примерно следующее:
Учимся работать со слоями
Вы этого не видите пока что и не понимаете, но у нас с вами получилось в итоге три слоя с изображениями на нашем холсте (kollazh). Наверное, мне следует объяснится, как это. Представьте, что у вас на столе лежит пачка листов бумаги. В этой пачке три листа. Листы лежат точно друг под другом. Самый нижний лист - наше небо. Лист в серединке - на нем изображено солнышко. Лист верхний - облако. Мы с вами можем поменять листы местами - например солнце поместить поверх облака. Мы можем добавить новый лист (с еще одним облаком, или другим изображением). Это и есть слои в Photoshop. Чтобы оперировать со слоями мы вызовем окошко со специальным меню: Window - Layers.
По умолчанию слои называются Layer1, Layer2, Layer3 и т.д. По очередности их создания. Мы можем задать слоям свои названия для того, чтобы было удобно работать. Для этого кликните два раза левой мышкой по названию слоя, теперь вы можете задать ему свое название. После того, как вы ввели название слоя, нажмите кнопку Enter на вашей клавиатуре.
Чтобы создать новый слой нужно выбрать в основном меню пункт Layer - New Layer.
Допустим, вы захотите передвинуть рисунок с облаком в пределах вашего листа (холста). Для этого надо переключиться на слой с облаком (кликнуть в меню со слоями мышкой на нужный слой). Обратите внимание: иконка глаза стоит около видимых слоев, если вы уберете иконку глаза напротив слоя (кликнув по ней левой кнопкой мыши), то слой станет не видим на картинке. Для того, чтобы он снова стал видимым - снова кликните мышкой в том месте, где должна быть иконка с глазом. Еще один момент: иконка кисти стоит около редактируемого слоя: т.е. если вы захотите подвигать облако, а кисть у вас стоит у слоя с солнцем, то вы по ошибке будете двигать солнце, поэтому следите за тем, чтобы кисточка стояла на нужном слое.
Мы также с вами можем копировать или удалять уже существующие слои. Если вы помните, нам нужно для воплощения нашей задумки два злобных облака. Для этого мы создадим второй слой с облаком - создав копию первого. Для этого нам нужно переключиться на слой с облаком (кликните левой кнопкой мыши по нему), теперь, удерживая левую кнопку мыши, подтащим слой с облаком к иконке, изображающей листы бумаги (см. рисунок)
В итоге у нас с вами появится новый слой, который будет иметь в своем названии имя копируюемого слоя + copy. Если вы захотите удалить какой-либо слой, то наши действия аналогичны тем, что мы производили во время копирования слоя, только в этот раз мы перетаскиваем слой на иконку с изображением мусорного ведра.
Изменение размеров изображения, перемещение изображения по листу, вращение и т.д.
Но вернемся к нашему изображению. Давайте немного подвигаем новый слой с облаком. Для этого переключимся на него на панельке со слоями. Затем на панели инструментов выбираем инструмент Move tool (черная стрелка с плюсом), теперь мы можем подвигать наше облако, либо нажав на него и удерживая левую кнопку мыши, либо при помощи кнопок со стрелками на нашей клавиатуре.
На рисунке выше, вы можете видеть, что мы немного развернули наше облако. Как такое вы можете сделать: выбираем слой с облаком, Move tool на панели инструментов, теперь наживаем на клавиатуре Ctrl+T (в меню Edit - Free Transform), теперь, потянув за уголки появившейся вокруг картинки рамочки, вы можете уменьшить или увеличить рисунок с облаком в размерах (нам нужно уменьшить его, чтобы уменьшить пропорционально - удерживаем во время процедуры кнопку Shift на вашей клавиатуре), а так же повращать рисунок вокруг его оси (около уголка ставим курсор с мышкой, смотрим, чтобы он изменился на изогнутую стрелку). Когда мы закончим все операции - нажимаем кнопку Enter на нашей клавиатуре, чтобы выйти из режима Free Transform.
Для того, что мы хотим получить в итоге, нам не нужно вращать облако (так что если вы его вращали, то отмените ваше действие), нам надо перевернуть его по горизонтали (зеркально). Выбираем в меню: Edit - Transform.
Посмотрите на рисунок. В выпавшем меню вам нужно выбрать пункт Flip Horizontal, чтобы перевернуть рисунок по горизонтали. По вертикали - Flip Vertical.
Обратите внимание на другие пункты в выпавшем меню: Rotate - вы можете вращать вашу картинку не только в ручную, как я объясняла ранее, но и задав точное количество градусов, на которые ее нужно повернуть, через Rotate. Rotate 180 - развернуть на 180 градусов, Rotate 90CW - развернуть на 90 градусов по часовой стрелке, Rotate 90CCW - размернуть на 90 градусов против часовой стрелки.
Что еще: Scale - изменить размеры картинки (также, как и с Free Transform, только без вращения). Skew - наклонить картинку. Distort - искажение изображения. Perspective - перспектива.
Посмотрите на этот пример - так должны быть расположены относительно друг друга наше солнца и облака. Для этого вы должны самостоятельно, переключаясь со слоя на слой, перетащить солнце и облака относительно друг друга, как указано в примере, при помощи Move Tool (черной стрелки с плюсом). Облако, которое мы создали путем копирования слоев, вы должны были уменьшить и развернуть по горизонтали, как это делается я уже объяснила. Однако, к этому моменту, у вас может быть одно несоотвествие примеру - маленькое облако у вас находится поверх солнца, тогда как в примере оно под ним. Что делать? Как вы помните, я говорила, что слои можно менять местами, а значит слой с маленьким облаком мы можем положить под слой с солнышком. Для этого выбираем на панели со слоями слой с маленьким облаком, кликаем по нему левой кнопкой мыши, удерживая ее, перетаскиваем слой с облаком под слой с солнцем на нашей панельке со слоями. Ничего сложного.
Изменяем размер холста (обрезка)
Мы с вами задали несколько великоватый размер для нашей картинки. Как обрезать наш холст? Выбираем на панели инструментов инструмент Crop Tool. Кликаем левой кнопкой мыши в любом месте нашего хоста, растягивая появившееся выделение. Мы можем подкорректировать выделение потянув за уголки или грани мышкой. Если мы нажмем Enter, то затемненная область обрежется, что нам и нужно.
Градиенты
Если вы помните, то на примере в коллаже в начале нашего урока, который мы поставили себе задачу сделать, небо не просто голубое, наше небо постепенно переходит из темно-голубого цвета в светло-голубой. Плавный переход из одного цвета в другой называется градиент.
Чтобы создать градиент на нашей картинке, сначала переключимся на слой с небом на панели со слоями. Затем выберем на панели с инструментами инструмент Gradient Tool. Он для нас сейчас не виден, но если вы нажмете левой кнопкой мыши на инструмент Paint Bucket Tool и несколько секунд будете кнопку мыши удерживать, то выпадет меню, в котором вы можете выбрать Gradient Tool. Запомните на будущее, если нажать на инструмент в черной стрелкой в правом нижнем углу, то появится выпадающее меню, где вы можете выбрать дополнительные инструменты.
Когда вы выбираете какой-либо инструмент, то должна открываться панелька с дополнительными опциями для данного инструмента (см. рисунок). Если у вас такой панельки нету, то ее надо вызвать через основное меню - Window - Options.
Для инструмента Gradient Tool на панели с опциями мы можем выбать тип градиента при помощи выпадающего меню, а также нажав на одну из из пяти иконок.
Итак, давайте разберемся для начала с выпадающим меню, где вы можете выбрать тип градиентной заливки. Если вы наведете курсор мышки на один из квадратов в выпавшем меню, то появится подсказка, какой тип заливки у вас будет, если вы выберете этот квадрат в выпавшем меню.
Нас интересует заливка - Foreground to Background - градиент из основного цвета (переднего плана - в нашем случае он синий) в цвет фона (подложки - должен быть белым, если это не так, то измените цвет нижнего квадрата на панели с инструментами на белый, прежде, чем осуществлять градиентную заливку).
Чтобы выбрать тип заливки Foreground to Background, выберите верхний левый квадрат в меню с градиентами.
Теперь надо выбрать способ заливки. Способ заливки мы выбираем посредством пяти иконок на панельке с дополнительными опциями для инструмента Gradient Tool (т.е. все там же). Если вы наведете курсор мышки на какую-либо иконку, то опять же получите подсказку, для чего она предназначена. Нас с вами интересует Linear Gradient - линейная заливка (т.е. по указанной линии). За линейную заливку отвечает первая слева иконка - нажмите на нее.
На картинке-иллюстрации не видно остальных опций, но, тем не менее, они нам понадобятся для выполнения нашей задачи: нас интересуют прежде всего - mode - режим заливки (нам нужен normal), и - opacity - непрозрачность - выберите opacity равную 50-60 процентам (100 процентов - совсем не прозрачная заливка, чем ниже показатель, тем прозрачнее будет наша заливка).
Теперь, когда мы выбрали нужные опции, будем делать переход цвета неба из темно-голубого в светло-голубой, как задумано. Для этого на панели со слоями переключитесь на слой с нашим небом, если вы еще этого не сделали. Теперь удостовертесь на всякий случай, что у вас выбран инструмент Gradient Tool и стоят все нужные нам опции для этого инструмента. Далее кликаем левой кнопкой мыши почти в левом верхнем углу нашей картинки. Удерживая кнопку мыши нажатой, тянем появившуюся в результате предыдущего действия линию в в противоположенный угол (нижний правый), отпускам кнопку мыши, чуть не доводя линию до самого угла, и... получаем градиентную линейную заливку
, как нам и требовалось. Теперь наша картинка должна выглядеть примерно вот так: Т.е. мы создали свой первый коллаж, и можем гордиться этим фактом, ведь нам пришлось проделать весьма непростую работу.
Сохранение полученного изображения для веб и для дальнейшего редактирования
Но на этом наш первый урок не заканчивается, ведь нам нужно еще сохранить наше изображения на нашем компьютере, чтобы мы могли в дальнейшем использовать его на своих страничках (для этого нам нужны форматы *.jpg, *.gif, *.png), а также нам нужно сохранить его в таком формате, чтобы мы могли позже без проблем внести изменения в наше изображение, если захотим.
Итак, вы наверное уже знаете, а если не знаете, то возьмите на заметку - *.jpg, *.gif, *.png - имена графических файлов сохраненные в форматах для веб, т.е. в таких форматах, которые поймет любой броузер, и отобразит такую картинку.
Прежде, чем сохранять картинку для веб, мы сохраним ее для дальнейшего редактирования в специальном формате для программы Adobe Photoshop - *.psd.
Выбираем в основном меню File - Save As. Появится окошко с опциями сохранения. Выбираем имя картинки, формат PSD, и где наш файл с картинкой будет хранится на нашем компьютере (см. иллюстрацию).
Когда мы проделали эту операцию, можно сохранить нашу картинку в формате для веб.
Чтобы сохранить картинку для веб выбираем в основном меню File - Save for web. Появится панель, на которой справа будет вид вашей картинки до сохранения, а слева, как она будет выглядеть, когда вы ее сохраните в выбранном формате с выбранными опциями. Нам нужно выбрать формат JPEG. Опцию Quality (качество), которая появится, когда вы выберете этот формат, поставьте на значение 42-62 - для веб такого качества изображения достаточно. Нажимаем на кнопку Save и в появившимся окошке выбираем, где именно на вашем компьютере будет храниться картинка.
Чем отличается PSD от форматов для веб - PSD сохраняет слои и прочии опции, которые вы совершили с картинкой, когда вы откроете ваш PSD-файл в фотошопе, то увидите картинку в прежнем качестве, и сможете продолжить спокойно работу над ней. JPG, GIF, PNG - специальные форматы для веб, которые сжимают картинку, при этом она существенно теряет в качестве (но для веб много и не нужно
, что делает затруднительным ее дальнейшее редактирование, опять же в этих форматах не хранится информация о слоях и многое прочее.Т.е. вам нужно всегда сохранять вашу работу в формате PSD, чтобы иметь возможность потом когда-нибудь что-то подправить, изменить и т.п. В форматах JPG, GIF, PNG нужно сохранять вашу работу, если вы хотите выложить вашу картинку на сайте, чтобы все ее увидели, в других форматах картинки на веб-страницах не отобразятся.
Пара слов на последок
Возможно, вас немного напугал этот первый урок, поэтому я считаю нужным сказать вам, чтобы вы зря не пугались - сложно только по началу, периодически работая в Photoshop, вы постепенно освоите этот многофункциональный и лучший из имеющихся графических редакторов. Глаза боятся - руки делают.
Однако, ничего просто так не дается - без постоянной практики, без любознательности, без усидчивости нельзя ничему научится. Поэтому, лучше всего, если вы еще раз пройдетесь по только что изученному, и, например, опробуете опции инструмента Gradient Tool (градиента), которые мы с вами не использовали. Создайте новое изображение, поэкспериментируйте, попереключайте и поизменяйте опции градиентной заливки, посмотрите, что и как. В помощь вам будут всплывающие подсказки, незнающие английский язык - запаситесь простейшим англо-русским словариком, и всё сразу станет ясно и понятно. Естественно, что мой совет касается не только инструмента Gradient Tool, но и других, с которыми мы ознакомились в этом уроке.
Вот пожалуй и все на сегодня