Можете посмотреть отличное пособие!

Введение

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

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

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

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

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

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

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

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

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

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

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

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

Узнайте о новых возможностях в последней версии Photoshop.

В Photoshop версии 2018 (20.0) появились новые полезные функции для дизайнеров, цифровых фотографов и иллюстраторов. В этом разделе предлагается краткое описание этих функций и приводятся ссылки на дополнительные сведения.

Примечание.

• Начиная с выпуска Photoshop (версия 20.0) от октября 2018 г. 32-разрядные версии Windows больше не поддерживаются. Для работы с 32-разрядными версиями драйверов и подключаемых модулей используйте более ранние версии Photoshop. Ссылки на предыдущие версии установщиков и обновлений .
• С новой функцией Автоматическое обновление приложения Creative Cloud теперь автоматически устанавливают доступные обновления. Управлять настройками обновления можно с помощью приложения Creative Cloud для настольных ПК. .
• Если выполняется обновление с более ранней версии Photoshop, см. особые указания и советы .

Без труда маскируйте изображения, помещая их в рамки. Используйте Инструмент «Кадр» (К), чтобы быстро создавать прямоугольные или овальные рамки-местозаполнители. Также можно превратить любую фигуру или текст в рамки и заполнять их изображениями.

Чтобы поместить изображение в рамку, просто перетащите ресурс Adobe Stock или ресурс библиотеки с панели «Библиотеки» или с локального диска. Изображение автоматически масштабируется по размеру рамки. Содержимое, которое помещается в рамки, всегда добавляется в виде смарт-объектов, что обеспечивает возможность обратимого масштабирования.

Усовершенствована функция заливки с учетом содержимого

На базе технологии Adobe Sensei

Новая специальная рабочая среда «Заливка с учетом содержимого» обеспечивает возможность интерактивного редактирования для получения идеальной заливки. Теперь можно выбрать, какие исходные пиксели использовать, а затем поворачивать, масштабировать и отражать с использованием технологии Adobe Sensei. Также поддерживается предварительный просмотр изменений в полном разрешении прямо во время работы и сохранение результатов на новый слой.

Запуск рабочей среды «Заливка с учетом содержимого»

1. Откройте изображение в Photoshop. С помощью любого инструмента выделения создайте первоначальную область, которую требуется залить.
2. В строке меню выберите Изменить > Заливка с учетом содержимого .

В окне документов внутри этой рабочей среды отображается область пробы по умолчанию. Она имеет вид наложенной маски внутри изображения. Изменить область пробы и исходную область для заливки можно с помощью инструментов на панели «Инструменты» (в левой части экрана). На панели «Заливка с учетом содержимого» (в правой части экрана) можно указать параметры области пробы, а также настройки заливки и вывода, чтобы получить желаемый результат заливки. По мере внесения изменений итоговый результат будет сразу отображаться на панели «Просмотр» в полном разрешении.

Новый режим многократной отмены

Теперь можно использовать сочетания клавиш «Control + Z» (Win) / «Command + Z» (Mac) для отмены нескольких действий в документе Photoshop, совсем как в других приложениях Creative Cloud. Новый режим многократной отмены по умолчанию включен.

При включенном режиме многократной отмены в меню Редактирование отображаются следующие команды:

• Отменить : перемещает на шаг назад по цепочке отмен. Используйте сочетания клавиш: «Control + Z» (Win) / «Command + Z» (Mac).
• Повторить : перемещает на шаг вперед. Используйте сочетания клавиш: «Shift + Control + Z» (Win) / «Shift + Command + Z» (Mac).
• Переключить последнее состояние работает так же, как и в прежнем режиме. Используйте сочетания клавиш: «Alt + Z» (Win) / «Command + Z» (Mac).

Как вернуть устаревшие сочетания клавиш отмены?

(Photoshop)

Чтобы вернуться в устаревший режим отмены в Photoshop, сделайте следующее.

1. В строке меню выберите Редактирование > Клавиатурные сокращения .
2. В диалоговом окне Клавиатурные сокращения и меню выберите и нажмите кнопку ОК .
3. Перезапустите Photoshop.

(Adobe Camera Raw)

Чтобы вернуться в устаревший режим отмены в Adobe Camera Raw, сделайте следующее.

1. В строке меню Photoshop выберите Редактирование > Установки > Обработка файлов .
2. В разделе Совместимость файлов щелкните Настройки Camera Raw .
3. В диалоговом окне Настройки Camera Raw установите флажок Использовать устаревшие сочетания клавиш отмены и нажмите кнопку ОК .
4. Перезапустите Photoshop.

В меню «Редактирование», рядом с командами «Отменить» и «Повторить», также отображается название шага, который будет отменен.
Например, Редактирование > Отменить редактирование текста .

Команды Шаг вперед и Шаг назад удалены из меню Редактирование . Эти команды по-прежнему доступны во вспомогательном раскрывающемся меню на панели История . Кроме того, теперь по умолчанию можно отменять изменения видимости слоя. При щелчке значка видимости на панели Слои создается состояние на панели «История». Это поведение можно изменять с помощью параметра Включить отмену для изменения видимости слоев в диалоговом окне Параметры палитры «История» , которое можно открыть с помощью дополнительного раскрывающегося меню панели История .

Улучшения для удобства использования

Контрольная точка по умолчанию скрыта

Трансформируя объекты, теперь можно с легкостью перемещать их на холсте. Контрольная точка , которая раньше появлялась при трансформировании объектов, теперь по умолчанию скрыта. Можно установить флажок Переключить контрольную точку на панели «Параметры», если требуется отобразить контрольную точку.

Теперь можно дважды щелкнуть текстовый слой инструментом «Перемещение», чтобы быстро приступить к редактированию текста в документе. Теперь для редактирования текста больше не требуется переключать инструменты.

Автоприменение

Эффективно обрезайте, трансформируйте и размещайте или вводите текст с помощью функции автоприменения. Теперь для применения изменений больше не требуется нажимать клавишу ВВОД (Windows)/RETURN (macOS) или нажимать кнопку «Применить» на панели «Параметры».

В процессе кадрирования или трансформирования выполните одно из следующих действий для автоматического применения изменений.

• Выберите новый инструмент.
• Щелкните область за пределами холста в окне документа.
• Щелкните область за пределами ограничительной рамки на холсте.

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

• Выберите новый инструмент.
• Щелкните слой на панели «Слои». (Это действие автоматически применяет изменения и выбирает слой.)

Пропорциональное трансформирование по умолчанию

Теперь Photoshop трансформирует большинство типов слоев (в том числе пиксельные, текстовые слои, слои-фигуры, растровые изображения, размещенные смарт-объекты) пропорционально по умолчанию. Фигуры и траектории, являющиеся векторами, по-прежнему по умолчанию трансформируются без сохранения пропорций .

Теперь, чтобы сохранить пропорции слоя при трансформировании, больше не требуется удерживать клавишу «Shift» во время перетаскивания углового маркера для изменения размера выделенного слоя. При перетаскивании углового маркера во время трансформирования всегда выполняется пропорциональное изменение размера слоя. Теперь удержание клавиши «Shift» при перетаскивании углового маркера во время трансформирования приводит к непропорциональному изменению размера.

Чтобы пропорционально изменить размер слоя при трансформировании, выполните следующие действия.

1. Выберите слои, размер которых требуется изменить, на панели Слои .
2. Нажмите клавиши «Command + T» (Mac) / «Control + T» (Win). Или выберите Редактирование > Свободное трансформирование .
3. Перетащите угловой маркер ограничительной рамки, чтобы изменить размер слоя.
4. Примените изменения.

Как отключить пропорциональное масштабирование по умолчанию при трансформировании слоев?

Чтобы вернуться к прежнему поведению функции трансформирования, сделайте следующее.

1. С помощью Блокнота (Windows) или текстового редактора на Mac OS создайте обычный текстовый файл (TXT).
2. Введите указанный ниже текст в текстовый файл:

   TransformProportionalScale 0
   
   

3. (Windows ) Сохраните файл как "PSUserConfig.txt " в папку параметров Photoshop. [Диск установки]:\Users\[Имя пользователя]\AppData\Roaming\Adobe\Adobe Photoshop CC 2019\Adobe Photoshop CC 2019 Settings\

   (macOS ) Сделайте следующее.

   1. Сохраните файл как "PSUserConfig.txt " на рабочий стол.
   2. Нажмите клавишу Control и щелкните файл PSUserConfig.txt, сохраненный на рабочем столе. Выберите во всплывающем меню Копировать .
   3. В Finder выберите "Переход" > "Перейти в папку" . В диалоговом окне "Переход в папку" введите ~/Library/Preferences/Adobe Photoshop CC 2019 Settings/
   4. Вставьте скопированный файл в это расположение.
4. Перезапустите Photoshop.

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

Используйте новый параметр Заблокировать рабочую среду , чтобы предотвратить случайное перемещение панелей рабочей среды, в частности, при работе в Photoshop на планшете с пером. Для доступа к этому параметру выберите Окно > Рабочая среда > Заблокировать рабочую среду .

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

Прокручивание вариантов режима наложения на панели «Слои».

Режим симметрии

Делайте мазки кистью, образуя идеально симметричный орнамент. При работе с инструментами «Малярная кисть», «Микс-кисть», «Карандаш» или «Ластик» щелкните значок «Бабочка» () на панели «Параметры». Выберите один из доступных типов симметрии: Вертикальная, Горизонтальная, Двухосевая, Диагональная, Волнистая, Круговая, Спиральная, Параллельные линии, Радиальная или «Мандала» . Во время рисования мазки в реальном времени отражаются по оси симметрии, что позволяет создавать замысловатые симметричные узоры.

Узор, созданный с использованием симметрии «Мандала». (Узор создан Майком Шоу (Mike Shaw).)

Цветовой круг для выбора цветов

Используйте цветовой круг для визуализации цветового спектра и быстрого выбора цветов на основе гармоний, таких как комплементарные и сходные цвета. В дополнительном раскрывающемся меню на панели Цвет выберите Цветовой круг .

Начальный экран

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

Улучшенное обучение в приложении

После завершения урока в приложении (панель Обучение ) можно улучшать собственные изображения, затрачивая на это меньше времени.

Самые востребованные пользователями функции

Распределять расстояние (как в Adobe Illustrator)

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

(Слева) Параметры распределения расстояния между объектами в Photoshop. (Справа) Расстояние между объектами распределено по горизонтали.

Математические действия в числовых полях

Также можно выполнять простые математические действия в любых полях для числовых значений. Например, теперь можно вводить простые математические операции, такие как «200/2», которые тут же вычисляются как 100, а в поле вводится окончательный результат. Это очень полезно, когда требуется быстро найти кратное определенного значения или разделить значение. Дополнительные сведения см. в разделе Используйте простые математические действия в числовых полях .

Изображение с простым математическим действием в диалоговом окне «Размер холста».

Теперь для длинных имен слоев Photoshop сохраняет начало и окончание имени, а центральную часть заменяет троеточием (…). Раньше конец длинного имени слоя заменялся троеточием (...).

Теперь Photoshop ставит троеточие (…) в центре длинных имен слоев.

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

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

Рис.3. Инструменты редактора

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

2. Группа инструментов, предназначенных для рисования, включает такие традиционные инструменты как Аэрограф , Кисть , Карандаш и Ластик . Инструмент Штамп применяют для операции набивки, с помощью которой удобно восстанавливать поврежденные элементы рисунка (например, старой фотографии), копируя небольшие части изображения с неповрежденные участков. Инструмент Палец имитирует сдвиг сырой краски и используется для операций размывка. Инструменты с альтернативным выбором Размытие/Резкость позволяют управлять резкостью отдельных участков, а инструменты группы Осветлитель/Затемнитель/Губка служат для местной регулировки яркости и цветовой насыщенности. Губка имитирует операцию отмывки.

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

4. Последнюю группу составляют инструменты управления просмотром. Инструмент Масштаб позволяет работать с увеличенными фрагментами рисунка, а инструмент Рука используют для перемещения рисунка, выходящего за пределы окна программы.