Создание макета сайта в редакторе Adobe Photoshop

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Государственное бюджетное профессиональное образовательное учреждение

Ленинградской области

Подпорожский политехнический техникум

Тема: «Создание макета сайта в редакторе Adobe Photoshop»

ПМ.06 «Ввод и обработка цифровой информации»

Выполнил студент группы № 213

специальность 09.02.02

Выполнил: Трофимов Д.О.

Подпорожье 2016

Содержание

Введение

1. Основные возможности Adobe Photoshop

1.1 Разрешение изображения

1.2 Глубина цвета

1.3 Изменение разрешения путем интерполяции изображения-маски

1.4 Маски

1.5 Каналы

1.6 Фильтры

2. Инструменты Adobe Photoshop

2.1 Инструменты выделения

2.2 Инструменты ретуширования в Adobe Photoshop

2.3 Работа со слоями

Введение

Сегодня практически каждый пользователь Internet имеет свою собственную личную страницу в сети, не говоря уже о коммерческих фирмах. Разработка Internet-представительств стала одной из самых стремительно развивающихся и достаточно дорогих услуг. Заказчики заинтересованы в создании красочных, стильных, привлекательных страниц и Web-элементов. Прошло время, когда корпоративные веб-сайты создавали собственными силами самоучки из числа сотрудников компаний, теперь этим занимаются только специалисты по веб-дизайну. Веб-дизайн сегодня - это сложившаяся система принципов и приемов оформления, которая не только обеспечивает профессиональный результат, но и позволяет конструктивно подойти к процессу создания интернет-ресурса. И как бы там ни было, но графический дизайн лежит в основе этого процесса. В то же время web-графика - это не только и не столько создание конкретных объектов, размещаемых на веб-страницах, сколько методология организации пространства. Те кто собирается профессионально заниматься веб-дизайном, главное знать и использовать методы и приемы создания изображений.

Целью моего проекта является Создание макета сайта в редакторе Adobe Photoshop.

Для реализации своего проекта я поставил перед собой следующие задачи:

- определить назначение использование графики для Веб-дизайна;

- изучить теоретическую часть: назначение программы Adobe Photoshop, панель инструментов;

- описать основные способы работы инструментов графического редактора;

- проанализировать способ подачи демонстрационного материла для защиты своего проекта (видеоролик).

- разработать макета сайта в графическом редакторе.

1. Основные возможности Adobe Photoshop

Adobe Photoshop - это программа для создания и обработки растровой графики, проще говоря - графический редактор. Растровая графика - это любое изображение, которое состоит из отдельных пикселей разного цвета - фотографии в фотоаппарате, картинки на сайтах, спрайты в играх - вообще, основная масса всей графики относится к растровой. Все это Photoshop прекрасно открывает и предоставляет неимоверное количество инструментов для работы с изображением. Сам по себе Photoshop - всего лишь набор инструментов, которые собраны воедино. Но все сделано настолько продумано и аккуратно, что создается настоящая рабочая лаборатория для художника или дизайнера. Есть инструменты по рисованию - различные кисти и заливки, инструменты для вставки и работы с текстом, для векторной графики… Последние версии позволяют даже загружать 3D-модели в популярных форматах, созданных в редакторах трехмерной графики.

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

В связи с этим видно, что знать основы Photoshop для того, кто пользуется компьютером не только для игр - так же важно, как уметь набирать текст в Word-е. Эти две программы - одни из самых необходимых в наборе любого мало-мальски грамотного «юзера». А посему требуется осваивать и эту программу. Благо, своим удобством Photoshop завоевал такую любовь пользователей, что созданы тысячи сайтов, посвященных ему, написано сотни книг, как для начинающих, так и для профессионалов, снято сотни часов обучающего видео. Все это легко доступно каждому, притом с любым уровнем подготовки. Даже тот, кто совсем ничего не знает о графике, может освоить ее и многому научиться. Нужно только попробовать познакомиться с этой программой поближе и мир компьютерной графики может увлечь вас надолго.

1.1 Разрешение изображения

Растровые изображения формируется из совокупности крошечных элементов, называемых пикселями. Пиксель является основным кирпичиком растровых изображений и это единица принята в компьютерной графике, подобно тому, как метр, килограмм и литр приняты для измерений в повседневной жизни. Количество пикселей в изображении определяет его разрешение. Пиксели часто называют точками, тогда разрешение измеряется в dpi (dot per inch), то есть в количестве точек на дюйм.

Чем выше разрешение, тем большее количество пикселей содержит изображение и тем большим количеством деталей (то есть - качеством) такое изображение характеризуется. С другой стороны, более высокое разрешение изображение прямо связано с большим размером файла такого изображения. Поэтому установка величины разрешения зависит от целей и задач компьютерного художника и для конкретной работы будет разной. Например, веб-дизайнеры обычно работают с изображениями 72-96 dpi, в то время как полиграфисты предпочитают разрешения изображений от 300 dpi и выше (рис. 1).

Рисунок 1 Изображение высокого разрешения слева (файл 977 Кб) и низкого разрешения справа (файл 41 Кб)

1.2 Глубина цвета

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

Глубина цвета характеризует число воспроизводимых градаций яркости пикселя в черно-белых изображениях и количество отображаемых цветов в цветном изображении.

Для примера на рис. 2 показано одно и то же изображение, но с разной глубиной цвета: в два цвета сверху, и в 256 оттенков серого снизу. Из этой иллюстрации наглядно видно, что чем выше число воспроизводимых градаций яркости пикселя в черно-белых изображениях (и количество отображаемых цветов в цветном изображении), тем качество растрового изображения выше.

Рисунок 2 Одно и то же изображение, но с разной глубиной цвета

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

Для монохромного черно-белого (Black and White) изображения используются только два типа ячеек: черные и белые. Поэтому для запоминания каждого пикселя требуется только 1 бит памяти компьютера. Такие изображения часто называются 1-битовыми изображениями. Соответственно, их цветовая разрешающая способность будет равна 1 бит/пиксель.

В другом типе растровых изображений, называемом оттенки серого (Grayscale), на каждый пиксель выделяется до 8 бит информации. Это позволяет оперировать с комбинацией из 256 градаций яркости, перекрывающей весь диапазон оттенков серого от черного до белого. Пример десятиступенчатой шкалы оттенков серого приведен на рис. 3.

Рисунок 3 Десять градаций серого цвета - от белого (100%) до черного (0%)

1.3 Изменение разрешения путем интерполяции изображения

Если разрешение цифрового изображения, полученного посредством матрицы сканера (или цифровой фотокамеры) совпадает с числом светочувствительных элементов сканера (или камеры), то говорят о фактическом (аппаратном или физическом) разрешении. Однако как в аппаратуре оцифровки изображений, так и в графических программах предусмотрена возможность использования операции интерполяции (Resampling), то есть изменения разрешения, которая может быть реализована разными способами. Например, в программе Adobe Photoshop (рис. 4) реализованы три способа интерполяции - по соседним, билинейная и бикубическая.

Рисунок 4 Способы интерполяции изображений в Adobe Photoshop

При интерполяции по соседним (Nearest Neighbor) для добавляемого программой пикселя берется значение пикселя соседнего с ним. То есть, если соседний пиксель красный, то и программа увеличивает разрешение изображения добавлением красного пикселя.

1.5 Маски

Термины "маска" и "выделение" взаимосвязаны: выделенная область доступна для редактирования, а область изображения закрытая маской от редактирования защищена.

Новый термин

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

Маска является изображением, которое создается в модели Grayscale (Градации серого) и помещается поверх другого изображения, защищая его от изменений. Для любого пикселя маски значение оттенка серого цвета можно изменять в пределах 256 градаций серого (от 0 до 255). Область маски со значением цвета пикселей, равного 0 (черный), полностью защищает изображение от изменений (она и служит маской). Область, пиксели которой имеют значение 255 (белый), полностью открыта для проведения изменений. Остальная (серая) часть маски частично прозрачна.

1.6 Каналы

В растровом редакторе есть два типа каналов: цветовые и альфа-каналы. Количество цветовых каналов определяется количеством базовых цветов в используемой цветовой модели. Так, изображение в формате Grayscale имеет один канал, в цветовой модели RGB - три канала, а в модели CMYK - четыре канала. В Photoshop доступ к ним реализуется с помощью палитры Channels (Каналы), для отображения которой необходимо выбрать команду Window (Окно) | Channels (Показать каналы) - рис. 5.

Рисунок 5 Слои

Наряду с цветовыми каналами в растровых редакторах возможно использование альфа-каналов, тесно связанных с понятием маски - каждый такой канал представляет собой маску. Говоря иными словами, создание маски приводит к одновременному и автоматическому созданию альфа-канала, в который помещается изображение этой маски. Для работы с альфа-каналами предусмотрен ряд инструментальных средств, доступ к которым осуществляется с помощью набора кнопок, размещенных в нижней части палитры Channels (Каналы).

1.7 Фильтры

Фильтры представляют собой небольшие программы, которые (подобно макросам и скриптам) выполняют заранее установленную последовательность команд. При этом они автоматически вычисляют значения и характеристики каждого пикселя изображения и затем модифицируют их в соответствии с новыми значениями. Большинство фильтров (filters) предназначено для имитации реальных эффектов. Например, группа художественных эффектов позволяет имитировать самые разнообразные виды живописи (масло, акварель и т. п.) и стили разных художников. Большинство современных графических программ поддерживает подключаемые фильтры других фирм (plug-ins). Их использование расширяет функциональные возможности графического редактора.Вероятно, что слово "альфа канал" все же пока вам не понятно и пугает вас. Тем не менее, в этом примере мы увидим, что даже не умеющий работать в Photoshop пользователь может легко и быстро создать альфа-канал и маску. А пошаговая инструкция для этого будет такая:

Командой Файл | Открыть загрузите в программу любое изображение из имеющихся в вашем компьютере.

Найдите среди инструментов геометрического выделения инструмент Rectangular Marquee (Прямоугольная область) и выделите им на изображении прямоугольную область (рис. 6).

Выполните команду Select (Выделение) | Inverse (Инвертировать выделение). Теперь выделенная и защищенная области поменялись местами: функции выделенной области выполняет рамка, а бывшее прямоугольное выделение становится не редактируемым.



Рисунок 6 На изображении выделена прямоугольная рамка

Примените к выделению какой-либо фильтр, например, командой Фильтр | Текстура | Витраж. В результате прозрачная часть маски будет деформирована фильтром и образует художественную рамочку для нашей фотографии.(рис 7.)

Рисунок 7 Применение к выделению фильтра Витраж

Для завершения примера снимите выделение с помощью команды Select (Выделение) - Deselect (Убрать выделение).

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

Рисунок 8 Овальная рамка с помощью фильтров Photoshop

photoshop растровый маска ретуширование

2. Инструменты Adobe Photoshop

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

Рисунок 9 Палитра инструментов (повернуто)

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

* инструменты рисования и закрашивания;

* инструменты для выделения и перемещения выделенных областей;

* инструменты редактирования и ретуши изображений;

* текстовые инструменты.

Примечание

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

Панель атрибутов инструментов

На панели (палитре) атрибутов (параметров) для любого активного (выбранного) инструмента отображаются все его настройки. Иначе говоря, данная панель меняет свой вид в зависимости от выбранного инструмента (рис. 10).



Рисунок 10 Панель параметров для инструмента Кисть

Плавающие палитры

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

Примечание

Палитры называют "плавающие", потому, что размещение палитр не статично. Вы можете менять палитры местами, добавлять или убирать их. Но об этом будет рассказано позднее.

Отображать все палитры на экране одновременно не всегда целесообразно, так как они зачастую излишне загромождают рабочее пространство экрана. Поэтому ненужные вам для текущей работы палитры вы всегда можете спрятать. Восстановить все палитры, представленные на экране по умолчанию, можно с помощью команды Window (Окно) | Workspace (Рабочая область) | Default Workspace (Восстановить расположение палитр по умолчанию).

Итак, палитра (palette) - способ вывода и управления информацией посредством специальных окон, которые можно перемещать, сворачивать, разворачивать и убирать. Photoshop содержит несколько таких палитр. Палитры снабжены закладками (вкладками).

На палитре Color (Цвет) отображены значения текущих цветов переднего и заднего плана, которые можно отредактировать перемещением ползунков соответствующих компонентов цветовой модели. Вкладка Swatches (Образцы) этой палитры содержит набор доступных для использования цветов и позволяет добавлять в набор новые и удалить ненужные цвета. Вкладка Styles (Стили) содержит варианты заливок рабочей области (рис. 11).



Рисунок 11 Палитра Color (Цвет)

В палитре History (История) программа фиксирует каждый шаг редактирования изображения. Здесь отображаются все операции, проделанные вами с помощью инструментов и команд графического редактора (рис. 12).

Рисунок 12 Палитра История

В палитре Layers (Слои) перечислены все слои изображения, начиная с верхнего и кончая фоновым. Эту палитру используют для определения параметров слоев (рис. 13).

Рисунок 13 Палитра Слои

Вкладка Channels (Каналы) этой палитры предназначена для создания и редактирования каналов. Вкладка Paths (Контуры) содержит список всех созданных пользователем контуров.

2.1 Инструменты выделения

По принципу формирования выделенных областей все инструменты выделения можно разделить на четыре группы:

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

Рисунок 14 Инструменты геометрического выделения в Adobe Photoshop

Инструменты выделения от руки, например, Lasso (Лассо). Такие инструменты используются для выделения объектов сложной формы путем их обводки рис. 15.

Рисунок 15 Инструменты из группы Лассо

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

Рисунок 16 Инструменты из группы Перо

Цветочувствительные инструменты выделения, в которых выделенная область изображения определяется цветом изображения. К ним относятся инструмент Волшебная палочка и ряд команд из меню Select (Выделение). В основе работы этих инструментов лежит назначение двух параметров: базового цмеета и диапазона цветов, близких к базовому.

2.2 Инструменты ретуширования в Adobe Photoshop

Инструменты клонирования (Cloning Tools) предназначены для копирования деталей из одного места изображения (неповрежденного) в другое (поврежденное). Типичным примером такого инструмента является Stamp (Штамп). Клонирование штампом рекомендуется применять для удаления царапин и пятен - рис.17

Рисунок 17 Инструмент Штамп

Инструменты размытия (Blur) и повышения резкости (Sharpen) позволяют соответственно локально снижать или усиливать контраст между пикселями изображения - рис.18. Так, локальное ослабление нежелательных дефектов кожи человека (морщин, шрамов) маскирует их. Однако если дефекты значительные (крупная родинка, татуировка), то их лучше убирать не инструментами размытия, а штампом. Инструмент Smudge (Палец) сглаживает различия между соседними участками изображений, смягчая их границы. Это может быть важно, например, на границах фотомонтажа: если края вклеиваемого в монтаж объекта пройти инструментом Палец, то он более естественно впишется в фон.

Рисунок 18 Инструмент Размытия

Инструменты Dodge (Осветлитель) и Burn (Затемнитель) делают объекты более светлыми или более тусклыми. Эти средства предназначены для локальной (местной) коррекции освещенности или изменения значения яркости, чтобы выделить или скрыть некоторые детали - рис.19.

Рисунок 19 Инструмент Осветлитель

2.3 Работа со слоями

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

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

Совет

Не увлекайтесь созданием большого числа слоев без необходимости. Два слоя в 2 раза увеличат размер файла исходного изображения, три слоя - в 3 раза.

Слой можно сделать невидимым или полупрозрачным. Слои в многослойном изображении можно поменять местами или часть слоев удалить. Применение слоев расширяет возможности в работе с цифровыми изображениями.

Внимание

Сохранить рисунок со слоями можно только в некоторых специальных графических форматах, например, PSD или TIFF.

Для работы со слоями в Adobe Photoshop есть специальная палитра, которую вы можете вызвать с помощью команды Window (Окно) | Layers (Показать Слои) - рис. 20.

Рисунок 20 Палитра Слои (Layers)

На палитре Layers отображается список всех слоев, с их названиями, миниатюрами изображений и специальными пиктограммами. Ниже приведено название и назначение некоторых атрибутов этой палитры.

В области Закрепить расположены атрибуты блокировки слоев, позволяющие блокировать прозрачность, цвет и положение слоя.

Пиктограмма с изображением глаза (Show/Hide) управляет доступностью слоя для редактирования. Щелкните на ней, чтобы скрыть или показать слой в окне изображения. Если на палитре рядом со слоем изображен глаз, это значит, что слой включен.

По поводу кнопки New layer style (Добавить стиль слоя) следует заметить, что стиль это набор параметров для слоя, который может быть быстро применен к лежащим на нем объектам.

Щелчок на пиктограмме New layer (Создать новый слой) приводит к созданию нового слоя.

Размещено на Allbest.ru