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

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

Введение

Не секрет, что Фотошоп играет большую роль в сайтостроении, в особенно создания макета сайта, перед публикацией в сети сайт проходит несколько этапов развития одним из которых является создание его шаблона (Макета) в программе фотошоп. Данная курсовая работа разбита на 3 главы, а именно:

В 1 Главе будет рассмотрена История создания Фотошоп, кем была создана, пути её развития и основные элементы.

А во второй главе мы рассмотрим практическую часть, в которой создадим макет сайта.



Глава 1. Основные понятия Adobe Photoshop

1.1 История создания Adobe Photoshop

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

Своё начало Photoshop берёт гораздо раньше. Программа, на экранной заставке которой сегодня список разработчиков - их 41, ранее принадлежала двум братьям - Томасу и Джону Нолл. С детства отец привил сыновьям любовь к искусству и компьютерной технике. В фотолаборатории отца, которая была расположена в подвале, Томас изучал основы цветокоррекции и контраста, а Джон с интересом ковырялся в стареньком Apple. В 1984 году отец купил один из первых Макинтошей, функциональные возможности которого очень разочаровали братьев - именно это и положило начало созданию программы, которая в будущем принесёт прибыль в миллионы долларов.

Начало

До 1987 г. Джон Нолл работал в Industrial Light and Magic (ILM) - в подразделении фирмы Lucasfilm, которое специализировалось на создании спецэффектов для проекта «Звёздные войны» (“Stars Wars”). Томас в это время писал диссертацию о процессе обработки изображений - получение степени кандидата наук для него было самым главным в то время. Окончательно разочаровавшись в новеньком Apple Mac Plus - монитор только что купленного компьютера не отображал полутоновые изображения (Grayscale images), Томас приступил к написанию программы, которая поможет исправить ситуацию.

Как ни странно, в ILM Джон также работал над процессом обработки изображений. Поражённый успехами брата, Джон предложил Тому объединить усилия. В своей книге «Основы компьютерной графики» Джон писал: «Как только увидел результаты работы Томаса, я вспомнил программное обеспечение по обработке изображений в студии Pixar, сходства были поразительными». С того момента мы начали совместную разработку более сложной и совершенной программы, которую в последствии нарекли Display.

Немного времени спустя Джон приобрёл новый Макинтош II с цветным экраном и убедил Томаса переписать “Display” для работы с цветными изображениями. Более того, чем больше Джон работал с “Display” тем больше функций он требовал от программы: коррекцию цветовой гаммы, импорт и сохранение файлов в различных форматах и т.д.

Работа над программой отвлекала Томаса от написания диссертации, но все, же он был этому рад. Некоторое время спустя Том разработал инновационный метод выбора отдельного участка изображения и последующей работы с ним, а также наборы приложений для обработки изображений, которые позже будут известны как плагины - “Plug-ins”. Затем были разработаны: настройки тонов (Levels), функция управления балансом, управление оттенками и насыщением (Hue and Saturation). Эти возможности стали ключевыми в Photoshop, ведь в то время, таки функции присутствовали лишь в специализированном программном обеспечении, которое находилось в лабораториях - или в ILM.

В 1988 “Display” был переименован в “ImagePro”. Программа была современной на то время, Джон надеялся, что у них есть шанс продать её в виде коммерческого приложения. Томас был против этого, кроме того, он ещё не закончил свою диссертацию и для разработки полностью завершённого программного продукта потребуется много времени и труда. После проведения анализа конкурентов братья поняли, что созданный ими ImagePro по многим параметрам опережал аналоги.

Путь От Image Pro к Photoshop.

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

На удивление, большинство производителей программного обеспечения повернули свои корпоративные носы в направлении Photoshop или пытались разработать подобные программы своими силами. Всего лишь одной компании было по силам купить Photoshop - это была Adobe, но до взаимовыгодного решения было ещё далеко. Производитель сканеров Barneyscan предложил братьям поставлять Photoshop в комплекте со своей продукцией, в итоге чего около 200 копий программы разошлось под торговой маркой Barneyscan XP.

К счастью для будущего цифровой графики, переговоры с Adobe длились не долго - вскоре Джон пришёл в компанию, чтобы привлечь больше внимания к своему продукту. Там он встретился с Расселом Брауном и продемонстрировал ему возможности программы, затем Photoshop был продемонстрирован арт-директору, который остался доволен увиденным и настоял на немедленной покупке программного обеспечения. То ли по наивности со стороны Adobe, то ли по осторожности со стороны братьев, Photoshop не был продан полностью, а только лицензирован и гонорары от продаж программы принадлежали братьям.

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

Томас продолжал работу над исходным кодом программы. В это время Джон отдельно вёл разработку расширений (Plug-ins), что сильно волновало некоторых сотрудников Adobe - они видели во всём этом хитрость и обман.

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

Даже во время окончательного этапа работы над финальной версией вносились изменения и усовершенствования - любым способом Томас находил время и силы, чтобы делать это. При поддержке Джона и Рассела Брауна - который вскоре стал ярым сторонником Photoshop - как и остальных креативных решений в Adobe, программа постепенно стала обретать форму. Официальная версия Adobe Photoshop была выпущена в феврале 1990 года.

Цифровая графика для всех

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

Adobe обещала, что при помощи Photoshop вы сможете достичь таких же результатов, которых раньше можно было получить с помощью профессионального программного обеспечения стоимостью несколько тысяч долларов. Главным конкурентом Photoshop на то время была программа под названием Letraset's ColorStudio стоимостью $1,995, в то время как Photoshop можно было приобрести менее чем за $1,000.

В процессе разработки версии 2.0, Adobe расширил штат программистов. Для внедрения в программу кривых Безье в команду был приглашён Марк Гамбург. В это время для Photoshop были разработаны новые возможности: перо (Pen tool), работа с двух тоновыми изображениями, импорт и растеризация векторных изображений из Illustrator, вдобавок ко всему появилась поддержка CMYK. Теперь для Photoshop был открыт путь на профессиональный рынок полиграфических услуг, что является очень важным тактическим ходом Adobe. Первый менеджер по продажам, Стивен Гутман, предложил давать кодовые названия к бета-версиям программы - эта традиция соблюдается по сегодняшний день. `Fast Eddy' - кодовое название бета-версии 2.0, которая была запущена в 1990 году.

Продолжительное время Photoshop работал исключительно на платформе Макинтош, но его успех гарантировал появление версии для развивающегося на то время рынка графических приложений для Windows. Разработка версии для новой платформы являлось заданием не из лёгких - для этого было основано новое подразделение во главе с Брайаном Лемпкином. Не смотря на то, что было разработано большое количество нововведений, как например поддержка 16-битных файлов, это появилось лишь в версии 2.5.1 в 1993 году.

Так же как издание третьего альбома для музыкальной группы - разработка версии 3.0 могла принести успех или потерпеть полное фиаско. К счастью удача была на стороне команды разработчиков - был сделан огромный шаг в развитии программы - разработана поддержка слоёв (Layers).

Поддержка слоёв получила всеобщее одобрение и являлась одной из основных функций программы, которая в скором будущем склонила множество художников и дизайнеров на свою сторону. Всё же поддержка слоёв на то время уже не была уникальной. HSC - позже известная как MetaCreations - разрабатывала программу для обработки изображений под названием Live Picture, которая поддерживала такую же технологию. MetaCreations допустили единственную и роковую ошибку - достойная по своим возможностям Live Picture, была выпущена по очень завышенной цене, что и оставило Photoshop 3.0 вне конкуренции на рынке.

В последующих версиях таких глобальных изменений, как например поддержка слоёв, не было. Несмотря на это совершенствование программы продолжалось. В версии 5.0 были введены возможности управления цветом и панель истории (History Palette), с помощью которой можно было влиять на произведённые пользователем действия - что позволило расширить творческие возможности программы. Значительные изменения произошли вместе с выходом версии 5.5 (именно с этой версии началось моё знакомство с Photoshop) - в комплекте с Photoshop поставлялась ещё одна программа - ImageReady, которая добавила к функционалу ещё и богатые средства разработки графики для WEB. В следующей версии - 6.0 появились стили слоя (Layer Styles) и расширенные возможности управления текстом. Восстанавливающая кисть (Healing Brush) появилась в версии 7.0

Сегодня и завтра

Поддерживая позиции лидера на рынке столь продолжительное время, на удивление, Adobe продолжает совершенствовать программу. На сегодняшний день Photoshop входит в состав пакетов Creative Suite 2 (CS2) и Creative Suite 3 (CS3), Creative Suite 4 (CS4), Creative Suite 5 (CS5), Creative Suite 6 (CS6) , вдобавок ко всему Adobe подчеркнула функциональную совместимость программ входящих в пакеты при помощи Adobe Bridge.

К счастью разработка программы не прекращается и скорее всего не прекратится. Во-первых, из-за высокой конкуренции огромного количества производителей программного обеспечения, многие из которых предлагают функциональные возможности Photoshop бесплатно. Также конкуренцию составляют более дешёвые программы-аналоги, которые предназначены для любительского и домашнего использования, к примеру, Paint Shop Pro, который ориентировался на Photoshop многие годы. В ответ Adobe выпустили бюджетную версию программы, хоть и с урезанными возможностями, но всё же достаточно функциональную - Photoshop Elements.

Что же будет дальше? К сожалению, Adobe не анонсирует. Photoshop - это драгоценный камень в короне Adobe и аспекты его разработки тщательно скрываются, но изредка компания всё-таки делает намёки. Брайан Лемкин, занимающий пост старшего вице-президента отдела по разработке цифровых изображений и видео, подтвердил предположения о выпуске 64-битной версии приложения (Adobe Photoshop CS6 x64), а также возможную поддержку технологии Apple's CoreImage, которая существенно увеличит производительность программы. Также разносятся слухи о возможном объединении Illustrator и Photoshop в единое целое приложение (уже не могу дождаться...).

Что бы ни произошло, Томас Нолл продолжит принимать участие в проекте. Хоть он непосредственно разработкой Photoshop не занимается, но постоянно держит руку на пульсе событий, продолжая разрабатывать новые версии плагинов Adobe Camera Raw и участвуя в дискуссиях на форумах компании Adobe.

Так случилось, что Photoshop начал свой путь 21 год спустя, одновременно со мной - мы ровесники. Я очень рад, что моё знакомство с этой замечательной программой продолжается уже 8 лет, и я абсолютно уверен, что Adobe продолжит приятно удивлять и восхищать нас своими нестандартными идеями и разработками в области программного обеспечения.



1.2 Основные инструменты Adobe Photoshop

Рис. 1

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

Для экономии места на экране разработчики Adobe Photoshop объединили некоторые инструменты в логические группы и спрятали их во вложенные меню. Т.е. под одной кнопкой может скрываться несколько инструментов. Если на кнопке инструмента в правом нижнем углу есть небольшой черный треугольник, это означает, что при нажатии мышью на эту кнопку раскроется меню со списком всех инструментов входящих в одну группу. Выбирайте необходимый инструмент и продолжайте работу.

Далее приведено описание инструментов. Описание построено по следующему принципу: вначале идет иконка инструмента, затем его название, клавиатурное сокращение, и непосредственно описание самого инструмента.

Палитра инструментов для выделения области геометрической формы

Move (перемещение) - [V] - позволяет переместить выделенную область или активный слой путем перетаскивания курсора при нажатой левой клавише мыши.

Параметры:

-Auto Select Layer (Автовыбор слоя). При включении этой опции для инструмента move щелчок мышью на изображении автоматически выбирает слой, пиксели которого видны в том месте, где находится курсор

-Show Bounding Box (Показать ограничивающую рамку) - включает отображение рамки при помощи которой можно перемещать, поворачивать и масштабировать активный слой.

Палитра инструментов для выделения области геометрической формы

Рис. 2

Rectangular marquee (прямоугольная область) - [M] - позволяет произвести выделение прямоугольной области для последующего её редактирования. Выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши.

Elliptical marquee (эллиптическая область) - [M] - позволяет произвести выделение эллиптической области. Использование идентично rectangular marquee (прямоугольная область).

Single row marquee (строка пикселей) - [M] - позволяет произвести выделение одной строки пикселей.

Single column marquee (столбец пикселей) - [M] - позволяет произвести выделение одного столбца пикселей.

Палитра инструментов для выделения области произвольной формы

Рис. 3

Lasso (лассо) - [L] - позволяет произвести выделение участка произвольной формы. Выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши.

Polygonal lasso (многоугольное лассо) - [L] - позволяет произвести выделение участка произвольной формы составленной из прямых линий.

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

Параметры:

- Width (Ширина) - ширина рабочей области инструмента выделения (диаметр кисти). Если нужно точное выделение, то лучше взять значение поменьше, если же точность не столь важна или контур очень явный (например, черный рисунок на белом фоне), то можно выставить большое значение;

- Edge contrast (Контраст краев) - величина яркости, на которую должны отличаться смежные пиксели, чтобы по ним прошла граница;

- Frequency (Частота) - частота опорных точек. Если у вас много мелких деталей, то необходимо задать значение этого параметра как можно выше;

- Pen pressure (Давление пера) - задавать настройки исходя из силы нажатия. Актуально только для перьевых манипуляторов.

Magic wand (волшебная палочка) - [W] - щелкните мышью на изображении и Photoshop выделит непрерывную область, залитую одним цветом.

Параметры:

- Tolerance (Допуск) - основной параметр этого инструмента. Например, работаем с RGB-изображением. Оно состоит из трех цветовых каналов: красного, зеленого и голубого. Каждый из них имеет показатель яркости - от 0 до 255. Этого достаточно для получения любого (видимого человеческим глазом) цвета. Допуск задает степень близости цвета пикселов, необходимую для добавления их в выделение. Таким образом, если значение этого параметра равно 0, то выделятся только точно совпадающие по цвету пиксели, если 255 - все пикселя;

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

- Use ALL Layers (Использовать все слои) - распространяет действие данного инструмента выделения на все слои. Если этот параметр не установлен, инструмент работает только на текущем слое.

Crop (кадрирование) - [C] - позволяет удалить ненужные поля изображения. Перетаскивая курсор при нажатой левой клавише мыши производится выделение области (кадра) которую необходимо оставить. Всё, что находится вне области выделения будет отрезано. После выполнения перетаскивания на экране появляется рамка, у которой можно: изменять размер, потянув за квадратные маркеры на её углах, изменять её положение, выполнив перетаскивание внутри рамки, и осуществлять её поворот, выполнив перетаскивание вне контура рамки.

Палитра инструментов для работы с ломтиками

Рис. 4



Slice (нарезка) - [K] -создаёт модульную сетку для последующей нарезки изображения и публикации его в Интернет.

Параметры:

- Style normal (Обычный) - свободные размеры;

- Style Constrained Aspect Ratio (Фиксированный коэффициент) - фиксированный коэффициент отношения сторон прямоугольника;

- Fixed Size (Фиксированные размеры) - заданные размеры фрагмента;

- Show Slice Numbers (Показать нумерацию фрагментов) - если вы сбросите этотфлажок, то у вас не будет появляться номер фрагмента;

- Line Color (Цвет линии) - цвет линий, ограничивающих фрагменты.

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

Рис. 5

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

Brush (Кисть) в панели инструментов.

Параметры:

- Mode (Режим наложения). Режимы наложения пикселов для инструмента.

- Opacity (Непрозрачность). Задает непрозрачность пикселов.

- Flow (Плотность). Этот параметр весьма похож на предыдущий. Однако отличие состоит в том, что непрозрачность - это постоянное свойство. Если вы проведете кистью по уже нанесенному цвету с непрозрачностью 10 %, то он так и останется непрозрачным на 10 %. Параметр Flow (Плотность), напротив, имитирует реальную краску, учитывая плотность ее нанесения (толщину слоя). Если вы второй раз проведете по цвету, для которого установлена плотность 10 %, то он станет уже более плотным, близким к 20 %.

Airbrush Capabilites (Возможности аэрографа). Переводит кисть в режим аэрографа для имитации разбрызгивания краски из баллончика.

Pensil (карандаш) - рисование карандашом в результате дает линии с резкими, зазубренными краями.

Палитра инструментов клонирования

Рис. 6

Clone Stamp (копирующий штамп) - [S] - позволяет производить копирование (клонирование) одной части изображения в другую. Для использования этого инструмента необходимо определить место на изображении, откуда будет произведено копирование.

Действует он так: вы указываете мышью (с нажатой клавишей Alt), из какого места на изображении перерисовывать, а затем просто водите кистью в том месте, где необходимо повторить выбранный фрагмент.

Параметры:

- Mode (Режим наложения) - режим наложения пикселов при применении данного инструмента;

- Opacity (Непрозрачность) - непрозрачность накладываемого изображения. Применяется во многих случаях, поэтому лучше поэкспериментировать с этим параметром, чтобы «почувствовать» его;

- Flow (Плотность). Настройка режима рисования, учитывающего плотность нанесения краски;

- Airbrush Capabilities (Возможности аэрографа). Рисовать штампом, используя в качестве кисти аэрограф;

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

- Use All Layers (Использовать все слои) - название говорит само за себя. Если установлено это значение, инструмент Stamp (Штамп) игнорирует наличие слоев и копирует все видимое.

Pattern Stamp (штамп узора) - [S] - тоже что и копирующий штамп, с той лишь разницей, что рисует он не копией текущего изображения, а образцом изображения (узором), который можно изготовить самостоятельно, или выбрать из готовых в выпадающем меню Patterns на палитре настроек. Для того чтобы изготовить свой собственный узор необходимо выделить часть изображения инструментом прямоугольного выделения (Rectangular Marquee) и в меню редактирования (Edit) выбрать пункт назначить узор (Define Pattern). После этого новый узор станет доступным в выпадающем меню Patterns на палитре настроек. Во всем остальном инструмент Pattern Stamp полностью идентичен инструменту Stamp.

Параметры:

- Brush (Кисть) - настройки размеров и прочих параметров кисти инструмента;

- Mode (Режим наложения) - режим наложения пикселов ;

- Opacity (Непрозрачность) - непрозрачность накладываемого изображения;

- Flow (Плотность). Настройка режима рисования, учитывающего плотность нанесения краски;

- Airbrush Capabilities (Возможности аэрографа). Рисовать фигурным штампом, используя в качестве кисти аэрограф;

- Pattern (Образец) - определяет, какую текстуру использовать в качестве «краски». Используя этот раскрывающийся список, вы можете загружать разные палитры (файлы палитр имеют расширение pat);

- Aligned (С выравниванием) - определяет способ переноса клонируемой области;

- Impressionist (Импрессионизм). Если этот параметр установлен, то текстура значительно упрощается за счет перевода в широкие области одного цвета.

Палитра инструментов для работы с историей создания изображения

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

Параметры:

- Brush (Кисть) - настройки размеров и прочих параметров кисти.

- Mode (Режим наложения) - режим наложения пикселов.

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

- Flow (Плотность). Настройка режима рисования с учетом плотности слоя краски.

- Airbrush Capabilities (Возможности аэрографа). Рисовать штампом, используя в качестве кисти аэрограф.

Art History Brush (кисть предыстории со спецэффектами) - [Y] - позволяет создавать спецэффекты, используя в качестве источника предыдущее состояние изображения. Принцип возврата к предыдущему состоянию такой же как и у кисти предыстории (History Brush). Но если кисть предыстории восстанавливает изображение в точности таким как оно было, то кисть предыстории со спецэффектами искажает восстанавливаемое изображение дорисовывая к нему мазки кистью, и таким образом создает различные эффекты.

Параметры:

- Brush (Кисть) - настройки размеров и прочих параметров кисти инструмента.

- Mode (Режим наложения) - режим наложения пикселов при применении данного инструмента.

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

- Style (Стиль) - способ применения инструмента. Основной параметр - Art Brush (Художественная кисть).

- Area (Площадь) - область применения кисти. Именно на эту площадь будут раскидываться мазки.

- Spacing (Интервалы) - расстояние между мазками.

- Tolerance (Допуск) - новый параметр, появившийся в Photoshop CS. Если значение допуска равно нулю, то будет видоизменяться любая область, попавшая в зону действия инструмента. Чем больше значение допуска, тем более жесткие требования предъявляются к соответствию цветов области цвету переднего плана (Foreground Color).

Палитра инструментов для устранения дефектов изображений

Рис. 7

photoshop brush графика сайт

Healing Brush (Лечащая кисть). Этот Инструмент является некоей вариацией старого инструмента Stamp (Штамп), и применяется для текстурной коррекции с учетом подложки. Типичный пример - восстановление фрагментов кожи на фотографии при помощи взятых за образец сохранившихся фрагментов. При этом, и это главное отличие от Stamp (Штамп), будут учтены яркостные показатели нижележащих пикселов. Этот инструмент предназначен в основном для ретуширования.

Параметры:

- Brush (Кисть). Настройки используемой кисти. За счет мощнейшего инструментария кистей можно получать самые разнообразные результаты.

- Mode (Режим наложения). Режим наложения пикселов, используемый инструментом.

- Source (Источник). Позволяет задать источник текстуры для инструмента.

Есть два варианта:

(Выбранный). Пользователь сам определяет источник на изображении, нажав клавишу Alt;

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

- Use All Layers (Все слои). Действие инструмента будет распространено на все слои изображения.

Patch (Заплатка) - еще один новый инструмент Photoshop. Является сочетанием произвольного выделения и заливки. Его удобно использовать при ретушировании.

Параметры:

- Source (Источник). Режим, в котором область переноса будет копироваться в исходную;

- Destination (Цель). Режим, обратный предыдущему;

- Transparent (Прозрачность). Если этот параметр включен, вырезанный кусок будет накладываться в полупрозрачном виде, частично сливаясь с исходным изображением;

- Use Pattern (Использовать текстуру). Для заливки будет использован выбранный вами узор.

Color Replacement (Замена цвета). Быстро, качественно и очень просто перекрашивать объекты любой сложности.

Параметры:

- Mode (Режим). Режим работы инструмента. Содержит стандартные варианты для работы с цветом.

- Sampling (Выборка). Определяет механизм действия инструмента. Есть следующие варианты:

(Непрерывно). Инструмент будет работать все время, пока зажата клавиша мыши;

(Однажды). Инструмент затронет только область его кисти;

(По фону). Инструмент будет перекрашивать только пиксели, окрашенные в цвет заднего плана (Background Color).

- Limits (Пределы, Границы). Задает область действия инструмента. Варианты:

(Несмежные). Инструмент действует на все пиксели;

(Смежные). Инструмент действует на пиксели того же цвета, что и находящиеся под центром указателя и при этом смежные с ним;

(Найти края). Режим, похожий на предыдущий, но в нем компьютер «обращает больше внимания» на узкие области одного цвета внутри более широких областей другого цвета.

- Tolerance (Допуск). Задает сходство пикселя с первым под центром указателя для замены цвета. При малых значениях перекрашены будут только самые близкие пиксели, при максимальных - все.

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

Рис. 8

Eraser (ластик) - стирает изображение с текущего слоя. Если текущий слой - фон, или слой с заблокированной прозрачностью, то ластик просто закрашивает изображение цветом фона. Если при нажатой клавише Shift щелкать ластиком в разных местах изображения, то каждая последующая точка, в которой произведен щелчок, будет соединяться с предыдущей точкой прямой стёртой (закрашенной) линией.

Параметры:

- Brush (Кисть) - настройки размеров и прочих параметров кисти инструмента.

- Mode (Режим) - режим работы инструмента. Имеет три варианта:

(Кисть) - основной и наиболее часто применяемый. Подходтдля большинства случаев;

(Карандаш) - необходим, если требуется очень тонкое стирание;

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

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

Erase to History (Стирать в историю) - очень полезная настройка. Попробуйте воспользоваться инструментом без нее. В результате у вас будет стерто все до цвета заднего плана. А что, если необходимо стереть лишнее, но исходное изображение трогать не стоит? Тогда и приходит на помощь этот параметр. В результате установки этого параметра стирание производится до исходного изображения, а не до цвета заднего плана, и это на одном слое! Т.е. если например вы покрасили кистью что-то не-то, то можно воспользоваться этой функцией, и тогда сотрётся только результат работы.

Background Eraser (ластик фона) - [E] - позволяет удалять фон не затрагивая объекты переднего плана. Ластик фона производит выборку цвета пикселя в центре кисти и удаляет все пиксели с таким цветом, находящиеся внутри кисти.

Ластик фона удаляет цвет фона на границах объектов переднего плана, так что "ореол" из цвета фона не будет мешать вклейке этих объектов на другой фон.

Параметры:

- Discontiguous (Несмежные). Аналогичен одноименному параметру инструмента Magic Wand (Волшебная палочка): пиксели, соответствующие по цвету пикселям, попавшим в зону действия инструмента, будут удалены во всем изображении.

- Contiguous (Смежные). Будут удаляться только смежные с попавшими в зону действия инструмента пиксели.

- Find Edges (Найти края). Режим повышенной чувствительности к контрасту.

- Tolerance (Допуск). Задает допустимое отклонение цвета пикселов от образца.

- Protect Foreground Color (Защитить цвет переднего плана). В этом режиме не будут удаляться пиксели, имеющие цвет переднего плана (Foreground Color).

- Sampling (Выбор цвета). Метод действия ластика. Есть три варианта;

- Continuous (Непрерывный). Режим, в котором стираемый цвет изменяется много раз в зависимости от изменения фона. Наиболее полезный режим, так как задний план редко бывает одноцветным;

- Once (Однажды). Стираемый цвет определяется один раз - при первом щелчке на изображении;

- Background Swatch (Образец фона). Параметр, обратный по действию Protect Foreground Color (Защитить цвет переднего плана), - будут удаляться только те пиксели, цвет которых совпадает с установленным в данный момент цветом переднего плана.

Magic Eraser (волшебный ластик) - [E] - позволяет за один щелчок мышью стереть с изображения область, залитую одним цветом. Это может быть замкнутая область или все области на изображении, залитые таким цветом. Стираться будет цвет, по которому был произведен щелчок мышью. Действие волшебного ластика во многом сходно с действием волшебной палочки. Только волшебный ластик не выделяет, а стирает изображение.

Параметры:

- Tolerance (Допуск) - определяет, какие цвета включать в выделение.

- Anti-Aliased (Сглаживание) - сглаживание неровностей краев.

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

весь черный цвет с изображения, то этот флажок, наоборот, надо сбросить.

- Use All Layers (Использовать все слои) - распространяет действие данного инструмента на все слои.

- Opacity (Непрозрачность) - делает стираемое изображение непрозрачным на указанное количество процентов.

Палитра инструментов заливки

Gradient (градиент) - [G] - позволяет залить слой или выделенную область плавным переходом цветов. Во время перетаскивания курсора Photoshop рисует линию, указывающую направление по которому будет залит градиент. Длина линии - это длина непосредственно цветового перехода. Поля до линии и после линии заливаются чистыми цветами с которых, соответственно, начинается и заканчивается градиент. Если при перетаскивании инструмента градиент нажать и удерживать клавишу Shift, то линия, указывающая направление заливки будет привязываться к направляющим, повернутым друг относительно друга на 45 грд. Это позволяет нарисовать градиент, например, в точном вертикальном или точном горизонтальном направлении.

Внимание: инструмент градиент не работает в цветовых режимах Bitmap, indexed-color или 16 бит на канал.

Параметры:

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

Окно редактирования градиента открывается по двойному щелчку мыши на списке образцов градиентной заливки.

В диалоговом окне находятся следующие параметры:

- Presets (Предопределенные) содержит готовые градиенты. Их можно загружать командой Load (Загрузить) и сохранять командой Save (Сохранить).

В стандартной поставке программы имеется шесть наборов самых разных градиентов, но все же чаще всего приходится их создавать самим.

- Name (Имя) - уникальное имя градиента. Если имя - «Custom», значит, это градиент с пользовательскими настройками.

К Gradient Type (Тип) - тип градиента. Есть два варианта: Noise (Шум) и Solid (Однородный цвет). Шум почти не используется, большинство задач решается при помощи однородных цветов.

- Smoothness (Сглаживание) - мягкость перехода цветов в градиенте.

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

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

Если же необходимо удалить ненужный цветовой ограничитель, просто передвиньте его за пределы полосы с цветовыми переходами. Ограничитель исчезнет, а цветовая полоса преобразуется в соответствии с новыми условиями. При необходимости скопировать цветовой маркер, не удаляя его, следует перетащить его мышью при нажатой клавише Alt. Можно перемещать указатели при помощи мыши либо, сделав их активными, указать числовое значение в поле Location (Положение).

Надо иметь в виду, что если вы используете числовое позиционирование цветовых ограничителей, то значение 0 % соответствует крайнему левому положению, а 100 % - крайнему правому. Эти позиции абсолютны на полосе цветов и не изменяются при добавлении новых цветовых ограничителей. Совсем иначе обстоит дело при числовом задании указателей средних точек. В этом случае значение 50 % соответствует среднему положению между двумя соседними цветовыми ограничителями, 0 % - положение над левым ограничителем, 100 % - над правым. Таким образом, положение средних точек задается относительно цветовых указателей, а не цветовой полосы, При изменении цветовых ограничителей Photoshop автоматически перемещает отметку средней точки, сохраняя ранее заданные пропорции.

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

Вид градиента задается пятью кнопками в панели параметров.

Режимы работы:

- Mode (Режим наложения) - режим наложения пикселов в градиенте.

- Opacity (Непрозрачность) - непрозрачность градиента.

- Dither (Разбавление цвета) - имитировать большее количество цветов.

- Reverse (Обратный порядок) - геометрически перевернуть градиент.

- Transparency (Прозрачность) - использовать или нет прозрачность.

Paint Bucket (ковш) - [G] - позволяет залить слой выделенную или замкнутую область сплошным цветом или образцом изображения (узором), который можно изготовить самостоятельно, а можно выбрать из готовых в выпадающем меню Patterns на палитре настроек.

Параметры:

- Fill (Заливка) - определяет, что использовать в качестве краски. Есть два варианта:

(Цвет переднего плана) - основной цвет.

(Образец) - заливать текстурой.

Pattern (Образец) - узор для заливки.

- Mode (Режим наложения) - режим наложения пикселов при применении данного инструмента.

- Opacity (Непрозрачность) - непрозрачность заливки.

- Anti-aliased (Сглаживание) - смягчение неровностей краев заливки.

- Contiguous (Смежные) - эта настройка определяет, заливать ли по цветовой близости только соседние пиксели или пиксели на всем изображении.

Палитра инструментов, контролирующих четкость границ изображения

Рис. 9

Blur (размытие) - [R] - размывает изображение, т.е. уменьшает контрастность изображения.

Параметры:

- Brush (Кисть) - применяемая кисть.

- Mode (Режим изменения) - режим изменения пикселов при размытии. Аналогичен режиму наложения пикселов в инструментах рисования.

- Strength (Сила) - эффективность инструмента.

- Use All Layers (Использовать все слои) - распространяет действие инструмента на все слои.

Sharpen (резкость) - [R] - делает изображение более четким, т.е. повышает контрастность изображения. Использование и настройки идентичны инструменту Blur (размытие).

Параметры:

- Brush (Кисть) - применяемая кисть.

- Mode (Режим изменения) - режим изменения пикселов при увеличении контрастности.

- Strength (Сила) - эффективность инструмента. Чем выше это значение, тем быстрее происходит увеличение контрастности.

- Use All Layers (Использовать все слои) - распространяет действие данного иструмента на все слои.

Smudge (размазыватель) - [R] - позволяет размазать изображение. В момент нажатия на кнопку мыши Photoshop захватывает пиксели находящиеся под кистью, и в процессе дальнейшего перетаскивания курсора тянет их за курсором, постепенно оставляя часть пикселей на изображении.

Параметры:

- Brush (Кисть) - применяемая кисть.

- Mode (Режим наложения) - режим изменения пикселов в обрабатываемой области.

- Strength (Сила) - эффективность инструмента.

- Use All Layers (Использовать все слои) - распространяет действие инструмента на все слои.

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

Панель инструментов для осветления и затемнения изображений

Рис. 10

Dodge (осветлитель) - [O] - позволяет осветлить изображение. Перетаскивание этого инструмента приводит увеличению яркости изображения.

Параметры:

- Brush (Кисть) - применяемая кисть.

- Range (Диапазон) - определяет, к какому виду пикселов по яркости применять воздействие: теням (Shadows), средним тонам (MidTones), светам (Highlights).

- Exposure (Экспозиция) - эффективность инструмента.

- Airbrush (Аэрограф) - работать в режиме аэрогрофа.

Burn (затемнитель) - [O] - позволяет затемнить изображение. Перетаскивание этого инструмента приводит уменьшению яркости изображения.

Sponge (губка) - [O] - позволяет уменьшать или увеличивать насыщенность цветов изображения.

Параметры:

- Brush (Кисть) - применяемая кисть.

- Mode (Режим) - направление изменения насыщенности цвета: уменьшение (Desaturate) или увеличение (Saturate).

- Flow (Плотность) - параметры рисования с учетом плотности нанесения краски.

- Exposure (Экспозиция) - эффективность инструмента.

Панель инструментов для работы с текстом

Рис. 11

Type (текст) - [Клавиша T] - позволяет вывести текст на изображение. Результатом использования инструмента текст является новый текстовый слой (Text Layer). Основным отличием такого слоя от обычных слоёв является возможность в любой момент отредактировать текст, изменить шрифт, цвет и другие параметры. Эта возможность сохраняется до того момента пока текстовый слой не будет растеризован, т.е. преобразован в обычный слой. Для этого преобразования необходимо щелкнуть правой кнопкой мыши на текстовом слое в палитре слоёв (Layers) и в выпадающем меню выбрать пункт растеризовать слой.



Глава 2. Реализация практическая часть

2.1 Основные инструменты, применяемые в реализации практики

В создании шаблонов сайта применяются следующие инструменты:

Инструмент перемещения - для перетаскивания слоев по экрану.

Инструмент Пипетка - для выбора какого-либо нужного цвета.

Инструмент Линейка - для измерения, какого либо объекта.

Инструмент Градиент - заливка цвета с переливанием от одного цвета к другому.

Инструмент Заливка - заливка цветом, какого- либо объекта.

Инструмент Текст - для написания каких-либо текстов на макете.

Инструменты Фигуры

Рис. 12

Для рисования всяких фигур на макете.

Палитра слои - служит для выбора, какого- либо слоя на документе и его настроек.

Палитра История - отмена, каких- либо действий в хронологическом порядке.



2.2 Создание макета сайта в Фотошоп

Шаг 1. Всего за 18 шагов, можно создать красивый, яркий макет. Начнём с создания панели меню и поля для содержания. И так, создаём новый документ в Photoshop размером 800х600 пикс., делаем чёрный фон. Выбираем инструмент Прямоугольник  и создаём серый цвет (191b1b) прямоугольник.

Секция для содержания будет разделена на два главных сегмента. Выбираем инструмент Прямоугольник со скруглёнными краями , устанавливаем радиус, равный 12 и создаём два тёмно-серых (080808) прямоугольника со скруглёнными краями.

Шаг 2. Теперь мы создадим панель меню. На палитре переднего плана меняем цвет на коричневый/оранжевый (b21e00) и создаём более узкий прямоугольник со скруглёнными краями.

Растрируем этот прямоугольник, нажав правой кнопкой мыши на этот элемент в панели слоёв и выбрав растрировать слой. Это добавит гибкость в работе с формой прямоугольника. Выделяем созданный прямоугольник, нажав на него на панели слоёв и в меню. Выбрать, выбрав. Загрузить выделение.

Шаг 3. Устанавливаем оранжевый цвет (ff4a00) заднего фона, выбираем инструмент Градиент  и нажимаем на Линейный градиент .

Рис. 13



Создаём эффект градиента в прямоугольнике, проведя вертикальную линию от верхней границы прямоугольника к нижней.

Рис. 14

Шаг 4. Создаём новую группу, назвав её «Меню» и помещаем прямоугольник со скруглёнными краями в неё. Создаём персиковый (ffc981) прямоугольник со скруглёнными краями на прежнем прямоугольнике, растрируем его и делаем выделение при помощи меню Выбрать > Загрузить выделение.

Рис. 15

Рис. 16

Шаг 5. Устанавливаем оранжевый цвет (ff5e00) заднего фона, создаём линейный градиент во втором прямоугольнике со скруглёнными краями.

Рис. 17

Для текста в данном примере используются параметры, указанные ниже.

Рис. 18

Шаг 5. Создание шапки сайта. Мы используем эту замечательную картинку заката, которая была уменьшена до размера 900х675 пикс. Как показано ниже, уменьшенная картинка заката была помещена прямо над панелью меню.

Рис. 19

Рис. 20

Шаг 6. Теперь немного украсим шапку, чтобы она смотрелась интересней. Начнём с узора обесцвеченных квадратов. Создаём новую группу, называем её «Квадраты слева» и создаём в ней белый квадрат.

Рис. 21

Рис. 22

Шаг 7. В панели слоёв уменьшаем Непрозрачность созданного квадрата до 60%. Теперь, когда есть один квадрат, можно создать дубликат этого слоя, кликнув правой кнопкой мыши на данный элемент в панели слоёв и выбрав создать дубликат слоя. В дубликате выбираем другой уровень Непрозрачности, например, ставим 40%.

Рис. 23

Рис. 24

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

Рис. 25

Окончив заполнение сетки слева, делаем дубликат группы «Квадраты Слева», перемещаем её в левую часть и отражаем по горизонтали - Редактировать > Трансформировать > Отразить по горизонтали.

Рис. 26

Шаг 9. Фигуры, использованные в шапке, могут запросто быть созданы самостоятельно в программе Photoshop. Однако, для того, чтобы не тратить много времени, можно использовать другую замечательную бесплатную графику, которая поможет нам получить прекрасный результат. Открываем Изображение в Photoshop и перемещаем его прямо над левыми квадратами. В панели слоёв меняем Режим наложения изображения на осветление. Таким образом, мы уберём чёрный цвет, но оставим контур фигуры.

Рис. 27

Рис. 28

Шаг 10. Перемещаем изображение в верхний левый угол.

Рис. 29

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

Рис. 30

Шаг 11. Нужно быть осторожным, стирая эти части, чтобы не стереть соседние части фигур. После этого, создаём дубликат фигурной графики и перемещаем его в верхний правый угол шапки. Используем инструмент Ластик  , чтобы стереть отрезанные части.

Рис. 31

Рис. 32

Шаг 12. Теперь создадим ещё немного кругов, которые в основном будут использоваться в заголовках содержимого. В панели инструментов выбираем инструмент Произвольной фигуры . На верхней панели нажимаем на стрелочку вниз, чтобы увидеть выбранную группу фигур. Теперь нажимаем на стрелочку вправо, чтобы увидеть список таких фигур, как стрелки, орнаменты и др. Выбираем Фигуры. Сейчас перед Вами должна быть группа «фигур». Выбираем Окружность.

Рис. 33

Создаём белую окружность на том месте, где была старая.

Рис. 34

Шаг 13. Используя инструмент Волшебная палочка  , делаем выделение внутри окружности. 

Рис. 35

Сжимаем выделение при помощи меню. Выбрать > Модифицировать > Сжать на 4 пикс., заливаем его белым цветом, используя инструмент Заливка.

Рис. 36

Шаг 14. Копируем новую фигуру и перемещаем на правую сторону.

Рис. 37

Шаг 15. Теперь добавим заголовки содержимого и внесём последние штрихи в панель меню. В данном примере для заголовков были использованы параметры, указанные ниже:

Рис. 38

Для создания рамки, делаем выделение, используя текст при помощи меню Выбрать > Загрузить Выделение. Увеличиваем выделение при помощи меню Выбрать > Модифицировать > Расширить на 3 пикс. и заливаем новый слой серым цветом.

Шаг 16. Сделаем дубликат круглой фигуры и перемещаем её под заголовок. Изменяем её размер при помощи меню Редактировать > Трансформировать > Масштабировать, делаем ещё несколько дубликатов, также изменяем их размер, для того, чтобы создать узор.

Шаг 17. Создаём ещё несколько заголовков, немного изменяя узор. Для основного текста в данном примере используются параметры, указанные ниже.

Рис. 39

Теперь добавим последние штрихи в панели меню, чтобы меню гармонировало с графикой шапки нашего сайта. Нажимаем на группу меню в панели слоёв и меняем режим наложения на Осветление.

Рис. 40



Рис. 41

Шаг 18. Меню слишком сильно сливается с шапкой, поэтому делаем дубликат группы меню.

Рис. 42

меняем Режим наложения на «Нормальный» и уменьшаем его непрозрачность до 25%

Рис. 43



Шаг 19. Теперь на экране должно получиться следующее:

Рис. 44



Заключение

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



Список литературы

1. Adobe Photoshop CS5. Экспресс-курс Нина Комолова.

2. Adobe Photoshop CS6 П.А. Каменский, К.А. Иваницкий.

3. Adobe Photoshop CS5 с нуля! Эндрю Фолкнер.

4. Adobe Photoshop CS4 для фотографов. Вершины мастерства Джеф Шеве, Мартин Ивнинг - Москва, Русская Редакция, БХВ-Петербург.

5. Adobe Photoshop CS4. Официальный учебный курс: - Москва, Эксмо, 2009 г.

6. Adobe Photoshop CS4.Ретуширование, цветокоррекция, спецэффекты: В.Б. Комягин, В.С. Анохин - Москва, Триумф.

7. Adobe Photoshop CS5. Официальный учебный курс: - Москва, Эксмо, 2011 г.

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