Задание на второй семестр.

Задание на второй семестр.
Целью задания на второй семестр является создание
небольшого сайта из двух-трех страниц, Тема сайта “Где-то есть
город ….” и он должен быть посвящен какому-нибудь городу мира.
Для создания сайта необходимо собрать в Интернете разнообразную
информацию – описательную, графическую, картографическую и
пр. При разработке сайтов необходимо уметь работать с
графической информацией. Поэтому в работу включены занятия по
Fotoshop. Последние
занятия заключительные – собрать
информацию в Dreamweaver.
1. Создание изображения – создание фона для сайта, знакомство
с инструментами.
2. Работа с фрагментами – сбор пазла, геометрические
инструменты выделения, выделение на основе цвета,
знакомство с масками.
3. Работа со слоями.
4. Ретуширование изображение, сбор изображения.
5. Поиск информации в Интернет для сайта.
6. Создание сайта
7. Тэги HTML
ЛАБОРАТОРНАЯ РАБОТА 1 ........................................................................ 2
ЛАБОРАТОРНАЯ РАБОТА 2 ...................................................................... 10
ЛАБОРАТОРНАЯ РАБОТА 3 ...................................................................... 21
ЛАБОРАТОРНАЯ РАБОТА 4 ...................................................................... 28
ЛАБОРАТОРНАЯ РАБОТА 5 ...................................................................... 32
ЛАБОРАТОРНАЯ РАБОТА 6. ..................................................................... 38
ЛАБОРАТОРНАЯ РАБОТА 7 ...................................................................... 44
ЛАБОРАТОРНАЯ РАБОТА 1
«СОЗДАНИЕ ИЗОБРАЖЕНИЯ В PHOTOSHOP»
Приложение Photoshop загружается по ярлыку Photoshop CS на рабочем
столе. В данной работе мы создадим изображение для обоев (BackGround, фон)
будущей персональной Web-страницы, например:
1. Работа с файлами
Файлы с данными среды Photoshop имеют расширение .PSD (PhotoShop
Document). Все операции с файлами выполняются по стандартной для Windows
схеме. Создание, открытие, сохранение – по меню Файл. По пунктам Импорт и
Экспорт этого меню можно загружать и сохранять файлы различных устройств
ввода и вывода.
ЗАДАНИЕ. Открыть какой-нибудь .psd файл из папки с заданиями.
Полюбоваться на картинку и закрыть окно без сохранения файла.
2. Создание нового документа
По меню Файл – Новый открывается диалоговое окно. Следует задать
имя файла и первоначальные установки (все эти значения потом можно будет
изменить).
Выбор ширины и высоты изображения определяется дальнейшим
использованием рисунка уже вне среды Photoshop. Поскольку мы
ориентируемся на Web, то можно сконструировать небольшое изображение,
которое потом как фрагмент мозаики размножится в обозревателе, или картину
во весь экран. Большой размер требует большой дисковой памяти, поэтому
остановимся на более скромных запросах. При Ширине 260 пикселей и Высоте
155 пикселей мы получим изображение, которое повторится 3 раза по вертикали
и горизонтали на будущей Web-странице.
В поле Режим цвета следует выбрать RGB, поскольку мы собираемся
рисовать цветное изображение.
В области Содержимое фона переключателями указывается исходный
фон рисунка: Белый, цвет фона – по выбранному цвету, Прозрачный – серобелое клетчатое поле.
ЗАДАНИЕ 1. Создать новый файл. Задать подходящие размеры
изображения, нужный режим и Содержимое фона – Белый.
ЗАДАНИЕ 2. Изменить размеры созданного изображения (контекстное
меню на заголовке окна с изображением), обращая внимание на флажок
Сохранить пропорции (Constrain Proportions). Если он отключен, то ширина
и высота изменяются независимо друг от друга. Вернуться к первоначальным
размерам изображения.
3. Настройка основного цвета и цвета фона
Основной цвет используется активным инструментом для рисования.
Установленные цвета отображаются в двух разных местах на экране. Первое: на
палитре инструментов большими «кнопками» Цвет переднего плана, Цвет
фона. Обычно в верхнем квадрате – основной цвет, внизу – цвет фона. Второе:
на палитре Цвет.
Настройка цвета нагляднее всего производится с помощью Палитры
цветов (Color Picker). По щелчку левой кнопкой мыши на одном из квадратов,
отображающих установленный цвет, открывается диалоговое окно. Бóльшая
часть окна – цветовое поле, на котором курсором в форме кружка можно
указать понравившийся цвет. Вертикальный ползунок – спектральная шкала с
возможностью плавного перемещения между оттенками. Переключатели –
компоненты цветовых моделей. Мы будем использовать аддитивную (addition
– сложение) модель RGB (Red –Красный, Green – Зеленый, Blue - Синий), в
которой новый цвет получается за счет смешивания трех базовых цветов,
взятых в определенной пропорции. Доля каждого базового цвета колеблется в
диапазоне от 0 до 255. Выбор переключателя приводит к перемещению
спектральной шкалы и цветового поля в область с соответствующими
значениями выбранного базового цвета.
ЗАДАНИЕ. Выбрать приятные для себя оттенки в качестве основного
цвета и цвета фона. Следует учесть, что обои на Web-странице не должны быть
слишком яркими, ибо они могут затмить собою основное изображение.
4. Закрашивание фона
Для сплошной закраски отдельных деталей изображения имеется
инструмент Заливка. Если активен этот инструмент и курсор находится внутри
замкнутого контура, то щелчок левой кнопки мыши приведет к закрашиванию
области внутри контура ОСНОВНЫМ ЦВЕТОМ.
Другой способ закрашивания предполагает обращение к меню. По
пунктам Прав(ка) – Заливка открывается диалоговое окно, в списке
Исп(ользовать) выбирается цвет заливки. Остальные установки можно не
менять.
ЗАДАНИЕ. Закрасить фон выбранным ранее цветом. Сохранить файл как
документ Photoshop, т.е. с расширением .psd.
4.1 Градиентная заливка
Заполняет область плавным переходом от одного цвета к другому. Для того,
чтобы использовать градиентную заливку надо:
1. С помощью инструментов выделения выделить область, для которой
будет выполнена заливка.
2. Выбрать инструмент градиентной заливки
.
3. При нажатой левой клавише мышки провести через всю выделенную
область (как бы перечеркнуть выделенную область в направлении
заливки). После того, как вы отпустите левую клавишу, выделенная
область будет заполнена градиентной заливкой.
4. Параметры градиента можно менять в дополнительном окне, которое
появляется на вашем экране после того, как вы выбираете инструмент
градиентной заливки.
5. Палитра История
В правой стороне окна приложения расположены специальные окна, в
которых как закладки находятся информационные палитры. В палитре История
фиксируется последовательность действий пользователя при работе над
изображением, сохраняются до 20 последних выполненных команд. Если
результат преобразования изображения вас не устраивает, можно удалить
группу ставших ненужными действий. Для этого пролистываем список событий
вниз до конца, устанавливаем курсор на ползунок в левой части последней
строки списка и передвигаем его на строку выше. Действие последней команды
отменилось, но сама команда не стерлась. Так, постепенно передвигая ползунок
вверх, можно добраться до «неправильного» действия. Теперь по контекстному
меню удаляем это действие, а вместе с ним и все следующие.
ЗАДАНИЕ. Удалить лишние действия из палитры История. Сохранить
файл.
5. Палитра инструментов
Палитра инструментов среды выводится в специальном окне в левой
части окна приложения. Каждый инструмент среды представлен в палитре
отдельной кнопкой. Утопленное и подсвеченное изображение кнопки означает,
что данный инструмент активен. В среде ВСЕГДА АКТИВЕН ОДИН ИЗ
ИНСТРУМЕНТОВ, именно с ним или для него выполняются операции. Черная
пометка в правом нижнем углу кнопки обозначает скрытую группу
родственных инструментов и соответствующих им кнопок. Они становятся
доступными, если на кнопке инструмента нажать и некоторое время удерживать
левую кнопку мыши.
ЗАДАНИЕ. Найти на палитре инструментов кнопки Кисть, Ластик,
Карандаш, Пипетка, Заливка, Осветлить, Горизонтальный текст, они
понадобятся для создания изображения.
6.1 Распылитель краски и рисование кистью.
Инструмент аэрограф позволяет окрашивать объекты (и, естественно,
рисовать) без резких цветовых переходов. Этот эффект подобен рисованию при
помощи аэрозольного баллончика-распылителя. При использовании этого
инструмента удается получить значительно более мягкие штрихи и переходы,
нежели при использовании инструмента Paintbrush. Инструмент находится в
панели свойств инструмента Brush.
Рисование кистью Инструмент кисть предназначен для нанесения мягких
мазков. Имитирует кисть художника. На панели параметров щелкните по
стрелочке списка Кисть (Brush), откройте список с набором кистей и выберите
нужную вам кисть.
В раскрывшейся палитре задайте размер мазка линии (толщину линии,
которой будет рисовать кисть) – ползунок Master Diametr (Главный диаметр), а
также жесткость кисти - ползунок Hardness (Жесткость).
Если в открытом наборе требуемой кисти нет, нужно нажать на
треугольную кнопку и выбрать другой набор кистей из коллекции
установленных в Photoshop.
Задание. Попробуйте эти инструменты на этих рисунках:
6.2 Карандаш и ластик.
Для рисования используются еще Карандаш и Ластик. Инструменты
рисуют выбранным основным цветом. Размеры и качество инструментов
устанавливаются в строке настроек, которая размещается в верхней части окна
приложения.
ЗАДАНИЕ. Потренироваться с инструментами рисования на своем
документе. Удалить ненужные действия. Нарисовать 2-3 легких виньетки, не
утяжеляющих фон будущей страницы. Сохранить файл.
6.3 Инструмент Осветление
Монотонность фона можно снять с помощью осветления некоторых
областей. Особенно полезно осветлять границы, поскольку на странице это
будут места стыковок, лучше, когда они не слишком заметны.
ЗАДАНИЕ. Поработать инструментом Осветлить над фоном своего
рисунка. Сохранить файл.
6.4. Увеличение и уменьшение яркости изображения
Увеличивает яркость Dodge Tool; уменьшает яркость Bum Tool; изменяет
насыщенность цветов Sponge Tool (губка).
7. Текст в изображении
Текст заносится на изображение инструментом Горизонтальный текст.
В диалоговом окне можно переустановить параметры текста.
ЗАДАНИЕ. Набрать свою фамилию в создаваемом документе. Сохранить
файл.
8. Слои изображения
Замечательной особенностью Photoshop является возможность
компоновки изображения из нескольких слоев, с независимым редактированием
каждого слоя по отдельности. Слои изображения отмечаются в палитре Слои. В
нашем примере получилось 2 слоя – фон и текст. Активным является
выделенный в палитре слой.
ЗАДАНИЕ 1. Добавить 2-3 светлых пятна на изображении.
ЗАДАНИЕ 2. Повернуть текст под небольшим углом к горизонтали.
Сохранить файл.
9. Использование эффектов и фильтров
Для придания особой декоративности изображению в среде имеются
эффекты (в основном для текстовых слоев) и богатейший набор фильтров для
слоев с рисунком. Эти настройки доступны по меню Слой – Стиль слоя или
Фильтр. Поскольку набор фильтров почти необозримо велик, рекомендуется
обратить внимание на Distort, Render и Texture.
ЗАДАНИЕ. Украсить текст и фон своего документа, используя
возможность перехода из одного слоя в другой. Сохранить файл как документ
Photoshop, а затем как .jpg-файл.
Вы можете поэкспериментировать с разными фильтрами. Для этого создайте новый
слой, залейте его краской или градиентом (на рисунке желто-синий градиент), далее
Фильтры (Filter) -> Filter Gallery, откроется окно:
Это
окно
условно состоит из трех частей. Слева окно предварительного просмотра, где вы будете
видеть все происходящие изменения. Посередине расположена галерея фильтров, где
папки - это группы фильтров, а миниатюры - сами фильтры. Щелкая по ним, изменяется
правая часть окна, где располагаются настройки определенного фильтра.
Выберете фильтр из папки Текстура - Витраж (Texture - Stained Glass) и изменим его
настройки:
Размер ячейки (Cell size) - сделаем равным 10.
Толщина линий (Border Thickness) - сделаем равной 3.
Интенсивность света (Light Intensity) - сделаем равной 6.
Жмем ОК и смотрим на результат:
Фильтры - это отличный инструмент для поиска интересных решений. Пробуйте,
придумывайте свои или ищите готовые решения в интернете. Здесь же мы рассмотрим
еще одно применение фильтров, создадим текстуру воды.Текстура воды
Создайте новый файл. Сделайте цвет переднего плана - черным, а цвет фона - белым.
Примените фильтр Clouds (как в первом примере), Фильтр (Filter) -> Render -> Облака
(Clouds). Получим такое же изображение, как на первом рисунке, только в серых тонах.
Теперь, применим фильтр Chrome, Фильтр (Filter)-> Эскиз (Sketch) -> Рельеф (Bas
Relef), зададим следующие настройки этого фильтра:
Жмем
ОК. Осталось сделать воду голубой. Для этого на панели меню: Изображение (Image) ->
Настройки (Adjustments) -> Цветовой баланс (Color Balance). В открывшемся окне
установите следующие настройки:
Жмем ОК и смотрим на результат.
Если вам не нравится такая текстура воды, то можно сделать так:
Для этого:
Создайте новый слой.
Сделайте цвет переднего плана - синим, а цвет фона - белым.
Примените фильтр Облака (Clouds), как в первом примере: Фильтр (Filter) ->
Render -> Облака (Clouds).
А теперь фильтр Рябь (Ripple): Фильтр (Filter) -> Искажение (Distort) -> Рябь
(Ripple), с настройками как на рисунке:
КОНТРОЛЬНЫЕ ВОПРОСЫ И ЗАДАНИЯ
1. Какие действия сохранены в истории вашей работы в программной
среде?
2. Покажите, как можно выполнить поворот текста на произвольный
угол.
3. Добавьте к рисунку несколько штрихов разного цвета и разной
толщины.
4. Удалите последние действия, пользуясь палитрой История.
5. Можно ли изменять размер Ластика?
6. Как изменить размер изображения, сохранив пропорции?
7. Что происходит с изображением при сохранении в формате jpg?
ЛАБОРАТОРНАЯ РАБОТА 2
ЛАБОРАТОРНАЯ РАБОТА
«ФРАГМЕНТЫ ИЗОБРАЖЕНИЯ»
Редактирование изображения выполняется по схеме, принятой в
Windows: выделить объект (фрагмент) и применить к нему доступные в
соответствии с контекстом действия. В данной работе на примере собирания
«головоломки» мы познакомимся с выделением фрагментов, модификацией,
переносом и копированием границ выделения и выделенных областей
изображения.
Будем знакомиться с Группа инструментов «Выделение» (Selection tools)
В этой группе собраны инструменты для выделения областей различных форм,
перемещения выделенной области, быстрого и аккуратного выделения областей
неправильной формы.
Инструментами для выделения фрагментов являются Волшебная
Палочка и группы
Выделение и Лассо. ПОСЛЕДОВАТЕЛЬНОСТЬ
ДЕЙСТВИЙ ПРИ ВЫДЕЛЕНИИ ФРАГМЕНТА:
1) выбрать инструмент для выделения;
2) на изображении курсора определить выделяющую точку – центр
крестика или острие;
3) зафиксировать начало границы выделения – установить выделяющую
точку в нужное место изображения. Для некоторых инструментов
нужно сделать щелчок левой кнопкой мыши;
4) выполнить выделение – перемещать курсор по границе. Некоторые
инструменты выполняют это действие только при нажатой левой
кнопке мыши;
5) закончить выделение – отпустить кнопку мыши. Если инструмент
продолжает действовать, сделать двойной щелчок левой кнопкой
мыши.
Границы выделения помечаются мерцающей штриховой линией. Снятие
выделения выполняется щелчком левой кнопки мыши вне границ выделенной
области, когда активен инструмент выделения.
Для выполнения работы следует скопировать файл с головоломкой
PUZZLE.PSD из папки 2 семестр Задания в свою личную папку и открыть файл
с головоломкой ИЗ СВОЕЙ ПАПКИ.
У каждого инструмента есть панель параметров, она находится под
строкой меню и меняется в зависимости от выбранного инструмента:
Итак, для прямоугольного выделения имеем следующие параметры:
- новое выделение. Создается новое выделение, при этом
имеющиеся выделенные области (если они есть) исчезают.
- добавить к выделению. Обозначенная область добавится к уже
существующему выделению.
- удалить из выделения. Исключает выделенную область из
выделения.
- выделить пересечение. Из двух выделений (старого и нового)
выделит область пересечения.
Растушевка - по краям выделения появляется область частично
выделенных пикселов. Позволяет сделать плавный переход объекта в фон.
Стиль - задает способ выделения: нормальный (normal) - свободное
выделение, заданные пропорции (fixed aspect ratio) - пропорциональное
выделение, фиксированный размер (fixed size) - область выделения заданного
размера.
Для всех инструментов выделения параметры аналогичны.
1. Выделение прямоугольником
Области с границей в форме квадрата или прямоугольника выделяются с
помощью инструмента Прямоугольное выделение. Начальная точка
выделения - любая из вершин. Курсор при нажатой левой кнопке мыши
перемещается к противоположной вершине.
ЗАДАНИЕ. Выделить деталь «Ковер+носки»
2. Перенос границ выделения
Перенос границ выделения фрагмента выполняется при нажатой левой
кнопке мыши. Инструмент, с помощью которого выполнялось выделение,
должен быть активным.
ЗАДАНИЕ. Выполнить перенос прямоугольной границы на то место в
полном изображении, которое соответствует детали «Ковер+носки».
Убедившись в совпадении размеров ниши и детали, перенести границу назад на
деталь.
3. Перенос выделенной области
Перенос выделенной области, т.е. той части изображения, которая
находится
внутри границ, выполняется при помощи инструмента
Перемещение. Область вместе с границами перемещается за курсором при
нажатой левой кнопке мыши.
ЗАДАНИЕ. Переместить деталь «Ковер+носки» на соответствующее ей
место в полном изображении. Сохранить файл.
4. Выделение кругом или овалом
Фрагменты в форме круга или овала выделяются при помощи
инструмента Овальное выделение. Начальная точка выделения – одна из
вершин прямоугольника, в который будет вписана граница выделения. Самого
прямоугольника при выделении не видно, он появится, если мы позже захотим
выполнить преобразование границ или области выделения. Для получения
круглой границы при выделении нужно удерживать клавишу Shift.
ЗАДАНИЕ. Выделить деталь «Узор» с помощью Овального выделения.
5. Копирование выделенной области
Копирование выделенной области производится так же, как перенос, но
при нажатой клавише Alt.
ЗАДАНИЕ. Скопировать деталь «Узор» на свободное место Холста (окна
с изображением). Перенести копию детали на соответствующее место и
сохранить файл.
6.Выделение многоугольником
Для фрагментов в форме многоугольника используется инструмент
Многоугольное Лассо. Отметив начальную точку контура, перемещаем курсор
к ближайшему углу и делаем там щелчок левой кнопкой мыши. Далее
перемещаемся к следующему углу и т.д. Все перемещения нужно делать в
одном направлении.
ЗАДАНИЕ. Выделить деталь «Атланты» с помощью Многоугольного
Лассо.
7. Преобразование фрагмента
Повороты и искажения фрагмента выполняются по меню
Редактирование – Преобразование или Редактирование – Свободное
Преобразование, или по пункту Преобразовать выделенное из контекстного
меню. Выделенная область обводится прямоугольником со специальными
ограничителями. На границах прямоугольника - незакрашенные квадраты, в
центре – кружок со штрихами. Зацепив квадрат курсором при нажатой левой
кнопке мыши, можно изменять размеры выделенной области (курсор в форме
прямых стрелок), поворачивать область относительно центра вращения, т.е.
кружка со штрихами (курсор в форме полукруглых стрелок). Центр вращения
можно перемещать. Выполнение трансформации с разными сочетаниями
клавиш Ctrl, Shift и Alt приводит к разнообразным изменениям выделенных
фрагментов изображения. Завершение режима трансформации – двойной
щелчок левой кнопкой мыши в выделенной области.
ЗАДАНИЕ. Повернуть деталь «Атланты» на 180о и перенести ее на
соответствующее место. Сохранить файл.
8.Выделение фрагмента с четким контуром
Для фрагментов с четким контуром удобно использовать инструмент
Магнетическое Лассо. Проводимая с его помощью граница «прилипает» к
краю изображения, т.е. выделение получается чистым.
ЗАДАНИЕ. Выделить деталь «Спинка стула» с помощью
Магнетического Лассо. Перенести деталь на соответствующее место. Сохранить
файл.
9. Сложение областей выделения
К выделенной области можно добавлять новые фрагменты. Для этого все
последующие выделения выполняются при нажатой клавише Shift.
ЗАДАНИЕ. Выделить прямоугольный фрагмент на детали «Ножки
стула». Добавить к нему треугольный фрагмент. Перенести деталь на
соответствующее место. Сохранить файл.
10. Выделение однотонных фрагментов
Для выделения однотонных или близких к ним изображений
используется инструмент Волшебная Палочка. Настройка чувствительности
инструмента к изменению тона производится в строке настроек. В поле Допуск
можно задать любое значение от 0 до 100; чем меньше число, тем выше
чувствительность.
ЗАДАНИЕ. Выделить деталь «Брюки» с помощью Волшебной Палочки.
Перенести деталь на соответствующее место. Выполнить поворот детали так,
чтобы она точно подошла к изображению. Сохранить файл.
11. Выделение фрагмента с извилистой границей
Для выделения фрагмента с извилистой границей используется
инструмент Лассо. Острием лассо при нажатой левой кнопки мыши осторожно
и, по возможности, аккуратно обводится контур. Если прекратить обводку до
достижения начальной точки выделения, то крайние точки замкнутся отрезком
прямой линии.
ЗАДАНИЕ. Выделить деталь «Голова», сложив фрагмент, выделенный
при помощи Лассо, с фрагментом, выделенным при помощи Полигонного
Лассо. Переместить деталь на соответствующее место. Сохранить файл.
12. Быстрая маска (Quick Mask).
Рассмотрим более профессиональный инструмент
выделенными областями - маски. Градиентные маски.
работы
с
Суть масок состоит в следующем: если одна часть изображения выделена
и мы можем работать только с ней, то оставшаяся часть изображения
называется маскированной, т.е. закрытой маской. Маску можно сравнить с
чёрной бумагой, которой фотографы закрывают часть фотобумаги при печати
фотографий. Это делается для того, что бы свет из фотоувеличителя попадал
только на определённые участки бумаги и не затрагивал тех участков, которые
фотограф закрыл чёрной бумагой. Схематично маску можно представить
следующим образом.
Маска- это контур выделения,
представленный в виде градаций
серого цвета. При этом:
1. Выделенные
области
представляются белым цветом.
2. Невыделенные
области
представляются черным цветом.
3. Частично выделенные области
представляются оттенками серого
цвета. Чем сильнее выделена
область, тем светлее ее маска.
Соответственно темно-серым цветом представлены почти не выделенные
области.
Быстрая Маска (Quick Mask) - представление выделения, в котором
выделенные области сохраняют исходный цвет, а невыделенные области
закрываются полупрозрачной однотонной маской. По умолчанию она
красного цвета.
В Photoshop маску можно буквально нарисовать, причём любым
инструментом рисования. Очень часто маска является незаменимым
инструментом выделения.
1. Открываем изображение ЦВЕТОК.JPG
.
2. Выделяем объект.
Выделяем желаемый объект любым удобным для Вас инструментом
выделения. В данном случае можно применить Магнитное лассо (L)
Точность сильного значения не имеет, главное – получить выделенную область.
Но здесь, при использовании этого инструмента, коррекция в дальнейшем
сводится к минимуму.
*Кстати, Лассо с зажатой клавишей Shift позволяет добавить область
к выделению. А с зажатой Alt – отнять.
3. Переходим в режим быстрой маски.
Нажимаем клавишу Q. Либо в панели инструментов нажимаем кнопку
(Edit
in Quick Mask Mode)
После этого область, которая НЕ была выделена, закрашивается
полупрозрачным однотонным цветом. Иными словами – на нее накладывается
маска.
*Можно изменить параметры настройки быстрой маски, дважды кликнув на
кнопке
в панели инструментов. Откроется диалоговое окно, в котором можно
изменить и цвет заливки, и прозрачность, и область, на которую будет
накладываться маска.
В данном случае измены настройки – поставлена галочку на Selected Areas –
теперь у меня помечена выделенная область, т.е. сам цветок.
4. Редактируем маску.
Любая маска – это черно-белое изображение. Поэтому в панели инструментов у нас
только черный и белый цвета. Нажимаем D и цвет переднего плана станет черным, а
фона – белым. Активируем Кисть (B)
. Подобрав подходящий размер кисти,
начинаем аккуратно корректировать наше зображение
Ничего страшного, если Вы «промахнетесь». Нажав X, черный цвет
поменяется на белый и спокойно можно будет подправить все как надо.
Соответственно, вернуться обратно к черному цвету можно тем же способом.
5. Выходим из режима быстрой маски. Нажимаем Q или
кнопку
(Редактировать в стандартном режиме) на панели
инструментов – возвращаемся в обычный режим. Теперь наш
объект выделен четко по контуру.
6. Удаляем фон.
Прежде чем удалить фон, необходимо инвертировать изображение, чтобы
выделение перешло на область удаления. Для этого нажимаем Shift + Ctrl + I,
либо Выделение > Инверсия .Удаляем фон, нажав Delete.
Если
Вам нужен прозрачный фон, то перед удалением слой Background надо
перевести в обычный слой. В палитре слоев кликнув дважды по этому слою,
появляется окно. диалоговое
Нажимаем
ОК.
После
этого
нажать
Удалить
-
фон
будет
прозрачным.
Но и это еще не все. Не снимая выделения, посмотрим на наш результат.
Для этого нажмем Ctrl + H – это сделает выделение невидимым. Бывает,
что вокруг изображения остается каемка от фона. От нее можно
избавиться.
7. Удаляем каемку.
Сейчас нам снова понадобится выделение. Если же Вы все-таки
его сняли, то выделите объект снова – удерживая Ctrl, щелкните
по слою. Затем инвертируйте выделение – Shift + Ctrl + I. Либо в
палитре История просто
вернитесь
назад.
Идем
в Выделение > Модификация > Растушевка. В диалоговом окне
устанавливаем
значение
от
1-4,
в
зависимости
от размера изображения. Нажимаем Delete
.
Эта операция дает возможность смягчить края, удаляя каемку. Но
значение придется подбирать самим, т.к. маленький радиус может
не дать нужного эффекта, а слишком большой – удалит часть
изображения.
8.Снимаем выделение. Ctrl + D, либо Выделение > Отменить выделение
В итоге получаем:
Либо
Быстрая маска очень удобна в применении, т.к. позволяет редактировать
изображение в режиме просмотра. Но следует помнить, что в документе может
быть только одна быстрая маска на данный момент! Если Вы создадите
следующую, предыдущая просто исчезнет.
КОНТРОЛЬНЫЕ ВОПРОСЫ И ЗАДАНИЯ
1. Подсчитайте, сколько всего инструментов для выделения фрагментов
имеется в программной среде.
2. Как выделить на изображении одновременно 3 фрагмента разной
конфигурации?
3. Для чего может понадобиться перенос только границ выделения
фрагмента, а не выделенной части изображения?
4. Можно ли копировать фрагменты изображения через буфер памяти?
ЛАБОРАТОРНАЯ РАБОТА 3
СЛОИ ИЗОБРАЖЕНИЯ
Слои – это чрезвычайно гибкое средство, позволяющее манипулировать
отдельными объектами растрового изображения и при этом не портить соседних
областей изображения.
Если представить себе, что разные детали изображения нарисованы на
отдельных листах прозрачной кальки, то когда эти листы накладываются друг
на друга, вы видите цельное изображение. Листы можно сдвигать, вращать,
менять местами – и каждый раз изображение выглядит по-иному. Если вставить
между ними цветную пленку безо всякого изображения, часть объектов или все
изображение окрасится оттенками одного цвета.
Слой – это и есть один такой лист.
Последние версии программы поддерживают работу с такими типами
слоёв:
Слои изображений (Image Layers)
Это слои на основе пикселей. Если Вы откроете фотографию или новый,
пустой слой и нарисуете что-нибудь на нем, это будут слои изображений.
Текстовые слои (Type Layers)
В Photoshop текст не состоит из пикселей, а создается на специальном
слое. В любое время Вы можете выбрать инструмент Текст (Type Tool),
кликнуть в любом месте документа - автоматически будет создан новый
текстовый слой.
Слой-фигуры (Shape Layers)
Эти слои не состоят из пикселей, они векторные. Вы можете не только
создавать полезные фигуры, но также можете изменять их размер без потери
качества, менять цвет заливки двойным кликом по миниатюре слоя или при
помощи новых опций Заливка (Fill) и Обводка (Stroke), которые есть в версии
CS6. Photoshop создает слой-фигуру автоматически при использовании
инструмента Произвольная фигура (Shape Tool).
Заливочные слои (Fill Layers)
Эти слои позволяют заполнить слой однородной заливкой, градиентом
или узором, когда нужно создать новый фон или заполнить выделение цветом.
Также, как со слой-фигурами, дважды кликните по миниатюре заливочного
слоя, чтобы изменить его цвет. В следующий раз, когда будете создавать новый
слой, чтобы заполнить его цветом, воспользуйтесь заливочным слоем.
Корректирующие слои (Adjustment Layers)
Корректирующие слои очень полезны в работе и помогают применять
цвет и изменять яркость всех слоев, находящихся под ним. Однако, эти
изменения на самом деле будут происходить на этом корректирующем слое.
Например, если Вы хотите изменить цвет изображения на черно-белый, можете
использовать корректирующий слой Черно-белый (Black & White Adjustment
layer). Удаление цвета происходит на отдельном слое, оставляя исходный слой
целым и невредимым.
Эти слои не содержат пиксели, а только инструкции, которые указывают
Photoshop, какие изменения Вы хотите сделать. Можно вызвать
корректирующие слои из палитры в правой части экрана. Если Вы их там не
видите, воспользуйтесь меню Окно > Коррекция (Window >Adjustments), либо
через меню Коррекция (Adjustment) в нижней части палитры Слоев (Layers)
(кнопка меню имеет вид черно-белого круга), или через меню Слой > Новый
корректирующий слой ( Layer > New Adjustment layer).
Смарт-объекты (Smart Objects)
Смарт-объекты позволяют работать с файлами, которые не были созданы
в Photoshop, такими, как Raw или векторные файлы. Лучшей функцией смартобъектов является то, что Вы можете поменять и изменить размер его
содержимого без ухудшения качества (до тех пор, пока не будет превышено
первоначальное разрешение файла – если это растровый файл, а не векторный).
Видео-слои (Video Layers)
Новшеством в стандартной версии CS6 является возможность импорта,
редактирования и экспорта видео (ранее эта опция была доступна только в
версии Extended). Вы можете применять Photoshop для редактирования и
применения пользовательских цветовых эффектов и фильтров для отдельных
видеокадров.
3D-слои (3D Layers)
В версии Photoshop Extended Вы можете импортировать 3D файлы в
собственные специальные слои, которые бывают очень полезны для создания и
рисования 3D-объектов.
Палитра Слои (Layers Panel)
Независимо от того, какие слои содержит документ, только один из них
может быть активным. Взглянув на палитру Слоев (Layers panel) можно
увидеть, какой именно сейчас слой активен – он будет подсвечен синим цветом
(открыть палитру Слои (Layers panel) можно через меню Окно > Слои (Window
> Layers) или кликнув по док-панели на правой стороне экрана). Последующее
редактирование будет влиять именно на этот активный слой.
Слои можно создавать, удалять, менять местами с помощью этой
палитры.
На этой палитре предусмотрено огромное количество настроек, которые
мы будем рассматривать по мере необходимости во время работы. Сейчас
познакомимся со следующими
создать новый слой
удалить слой
слой включен
(если щелкнуть по
глазику, то слой
выключится - глазик
пропадет).
Активирование слоев.
Активировать слой в Photoshop очень просто – достаточно только кликнуть
мышью по тому слою, с которым хотите работать. Все изменения, которые Вы
проводите, будут влиять только на активный слой.
По мере работы с документом, объем содержащихся в нем слоев может
возрасти и станет все труднее отыскать нужный слой. Чтобы было проще
выбрать нужный слой, возьмите инструмент Перемещение (Move Тool) (V), в
панели свойств на верхней части экрана включите флажок Автовыбор (AutoSelect), а затем выберите слой из всплывающего меню справа.
После этого, если Вы кликните по одному из объектов на документе,
слой с ним автоматически будет активирован в палитре Слои (Layers). Если
документ содержит объекты, находящиеся на отдельных слоях, либо объекты,
отделенные от фона, опция Автовыбор (Auto-Select) будет работать отлично.
Задание. Установите этот режим.
Фильтрация слоев.
Если слоев в палитре Слои (Layers) слишком много, Вам придется
прокручивать палитру, чтобы найти нужный для работы слой. В CS6 Вы можете
скрыть слои, выбрав основные условия через строку фильтрации в верхней
части палитры Слои (Layers).Вы указываете Photoshop, какие слои Вы хотите
оставить видимыми в палитре и программа автоматически скроет те слои,
которые на данный момент Вам не нужны (при этом, в самом документе
содержимое этих слоев остается видимым). Для фильтрации слоев выберите
опцию из всплывающего меню в левой верхней части палитры Слои (Layers), а
затем, используя элементы управления в меню с правой стороны, уточните
параметры поиска.Варианты поиска слоев:
Тип (Kind)
Эта опция стоит по умолчанию. Она дает возможность выбрать, какой
тип слоев оставить видимым в палитре Слои (Layers). Используйте кнопки этого
меню справа для просмотра только слоев с изображениями, корректирующих
слоев, текстовых слоев и слоев с фигурами или смарт-объектов.
Например, чтобы видеть только текстовые слои, Вы можете сделать их
активными и изменить шрифт. Для этого, убедитесь, что в меню всплывающего
окна установлен вариант Тип (Kind) и нажмите кнопку Т. Photoshop спрячет все
слои, кроме текстовых. Также, Вы можете нажать дополнительно любую кнопку
и увидите слои другого типа, например, текстовые слои и слой-фигуры.
Имя (Name)
Если Вы дали слоям осмысленные имена, выберите эту опцию из
всплывающего меню – в появившемся поле поиска введите имя слоя. Для
получения результата поиска не нужно нажимать Return/Enter – фильтрация
слоев начнется, как только Вы наберете название слоя.
Если Ваше изображение содержит больше одного слоя, Вы можете
использовать новую функцию фильтрации в CS6, которая позволяет
просмотреть слои, соответствующие конкретным условиям (маленький
переключатель в верхней правой части палитры Слои (Layers) становится
красным, когда фильтрация включена).
После того, как Вы сделали видимыми некоторое количество слоев,
сделать их все активными не сложно. Просто войдите в меню Выделение > Все
слои (Select >All Layers) и Photoshop сделает их активными.
Эффекты (Effect)
Эта опция позволяет фильтровать слои на основе стилей слоя. Например,
чтобы увидеть все слои, которые имеют тень, выберите эту опцию из
всплывающего меню.
Режим (Mode)
Эта опция позволяет фильтровать слои на основе их режима наложения.
Выберите ее, а затем - режим наложения из всплывающего меню справа.
Атрибуты (Attribute)
После выбора этой опции, всплывающее меню даст возможность
выбрать слои в зависимости от того, скрыты они или видны, пустые или
заблокированные, с обтравочными и пиксельными масками или с эффектами, а
также позволяет использовать дополнительные параметры наложения.
Цвет (Color)
Эта опция помогает найти слои, помеченные одинаковым цветом.
Например, если Вы применили красную метку на все слои, которые
использовали для устранения недостатков кожи на портрете, то выберите эту
опцию, а затем выберите красный (Red) цвет из всплывающего меню, которое
появится справой стороны палитры - Вы увидите все слои, помеченные этим
цветом.
После того, как Вы при помощи фильтрации оставили видимыми только
нужные на данный момент слои, можно быстро сделать их активными через
меню Выделение > Все слои (Select >All Layers) (это не относится к
заблокированному фоновому слою). Вы можете работать с отфильтрованными
слоями также как и с обычными слоями: удалят их, менять их порядок
расположения и т.д. Ваш фильтр остается в силе, пока Вы его не отключите или
не закроете документ (Photoshop не сохраняет настройки фильтра для слоев при
сохранении документа).
Когда Вам нужно будет вернуть видимость слоям, зажмите клавишу Alt
и кликните по маленькому красному переключателю в верхней правой части
палитры Слои. Переключатель станет серым, что означает, что он выключен.
Photoshop сделает видимыми все скрытые ранее слои и установит параметры
фильтрации по умолчанию. После этого, Вы можете снова использовать
фильтрацию.
Задание 1. Выбор активного слоя и просмотр слоев.
1. Открыть документ слои.psd из папки Рисунки.
2. Откройте палитру слоев.
0019-4206-3080-5597-9947
Палитра слоев. Если ее нет на экране, выполните команду Окно
Слои.
Внимательно изучите на каких слоях какая расположена информация.
Справа от имени могут появляться замочки, означающие, что слой
заблокирован и над ним нельзя выполнять операции.
При создании нового документа в нем только один слой –
фоновый. Этот слой называется Background (Фон) и обладает
особыми свойствами. Он находится в самом низу стопки слоев и его
нельзя переместить. В отличие от прочих слоев он не может иметь
прозрачных пикселов. Обратите внимание, что все объекты на
верхних слоях находятся на клетчатом фоне. Клеточным фоном
отмечаются прозрачные участки слоя. И этот слой заблокирован.
Сколько текстовых слоев в этом документе?
Поменяйте места разные слои. Что меняется?
Задание 2 . Создание и удаление слоев. Замена фонового слоя.
1.
Откройте файлы fruits.psd и back.jpg из папки Рисунки. Это
изображения в разных форматах, но одного размера. С
помощью Лупы уменьшите масштаб их просмотра и
разместите рядом.
2.
Удалите фоновый слой из рисунка fruits.psd. Теперь у
изображения нет фонового слоя.
3.
Шелкните на заголовке второго документа back.jpg, чтобы
сделать его активным.
4.
Выберите документ Move (перемещение), щелкните внутри
изображения и перетащите его внутрь первого документа.
Пододвиньте изображение так, чтобы оно встало по центру.
5.
Новое изображение находится на слое Layer1, который
разместился над тем слоем, который был активным при
перетаскивании (верхний слой по умолчанию). Сделаем из него
фоновый слой. Щелкните на имени слоя Layer1 в палитре и
выполните команду Layer – New- Background from Layer (Слой
– Новый - Фоновый из слоя). Слой переименовался в
Background и переместился в самый низ стопки, так что новый
фон перестал заслонять фрукты. Переместите фрукты так,
чтобы они выглядели естественно в новом окружении.
Задание 3.
Создайте поздравительную открытку с видом Томска
ЛАБОРАТОРНАЯ РАБОТА 4
«РЕДАКТИРОВАНИЕ ИЗОБРАЖЕНИЙ»
Целью работы является подготовка фотографии со СВОИМ ЛИЦОМ для
последующего использования на Web-странице. Загрузите Photoshop и откройте
в нем файл со своей фотографией, сразу сохраните этот файл как документ
Photoshop (с расширением .psd) в вашей личной папке. Затем приведите размер
фотографии к подходящему для показа в интернете.
1. Изменение масштаба изображения
Численное значение масштаба изображения выводится на палитре
Навигатор. Изменение масштаба можно выполнять по-разному:
а) изменить численные значения масштаба простым редактированием;
б) использовать
кнопки
дискретного
уменьшения
(маленькие
треугольники) или увеличения (большие треугольники) на палитре Навигатор;
в) использовать ползунок на палитре Навигатор;
г) использовать инструмент Лупа. В контекстном меню выбирается
режим работы инструмента.
Более тонкую и четкую работу удобнее выполнять над изображением в
увеличенном масштабе. Однако при этом в окне документа выводится только
часть изображения, а остальное остается «за кадром». Ориентироваться в
полном изображении помогает палитра Навигатор. В поле просмотра
Навигатора всегда показан весь документ, а видимая в окне документа часть
изображения обведена красной рамкой.
Перемещать документ в окне можно обычным образом с помощью
линеек прокрутки или используя инструмент Рука. Прижатая левой кнопкой
мыши к документу рука перемещает его вслед за мышью.
ЗАДАНИЕ. Просматривая с помощью инструмента Лупа
свою фотографию, определить, какие части изображения
нуждаются в доводке.
1. Подбор фона
Фон, на котором вас фотографировали, может оказаться унылым и
неинтересным. Попробуем подобрать что-нибудь, соответствующее показу в
интернете.
Выделите единым фрагментом ту часть фотографии, которая будет
исполнять роль фона. Желательно до конца работы с фоном не стирать это
выделение (не удалять соответствующее событие), т.к., в противном случае,
новые границы могут не совпасть со старыми.
Подберите цвет для заливки выделенного фрагмента и выполните
заливку. Если фон слишком контрастирует с изображением, то, возможно,
следует подумать о другом цвете. Не волнуйтесь по поводу некрасивой
слишком жесткой границы, это мы исправим позже.
Подберите фильтр для фона, желательно, чтобы он отличался от фильтра
для обоев Web-страницы, но в то же время сочетался с ним.
Возможно, вам захочется нанести несколько мазков кистью другого
цвета для снятия монотонности фона.
Когда фон будет готов, снимите выделение фрагмента и сохраните файл.
В качестве фона можете подобрать интересную фотографию и совместиь со
своим изображением.
3. Ретушь изображения
Для ретуширования можно использовать фильтры осветления и
затемнения, контрастности и размытия. Для устранения дефектов фотографии,
смягчения линии фон-рисунок или придания изображению желаемой
художественности применяются специальные фильтры (осветление-затемнение,
контрастность-размытие) и инструменты.
Работа с фильтрами требует длительных тренировок, поэтому
рекомендуется в данной работе воспользоваться инструментами Осветлить,
Затемнить, Палец и Размытие. Осветлить уже применялся при создании фона
для Web-страницы, другие инструменты действуют по тем же правилам.
Восстановление утраченных или выправление неудачных элементов
изображения можно выполнить с помощью, так называемого клонирования –
заполнения одних частей рисунка элементами, взятыми из других частей. Для
этого имеется инструмент Клон Штампа. Принцип работы Клон Штампа
следующий. На изображении отмечается точка ПРИКРЕПЛЕНИЯ штампа:
курсор в форме штампа подводится к нужному месту и делается щелчок левой
кнопкой мыши при нажатой клавише Alt. Точка прикрепления отмечается
крестиком. Теперь щелкая левой кнопкой мыши в любых местах изображения,
можно “штамповать” изображение окрестности прикрепленной точки. Более
того, если перемещать мышь, не отпуская левой кнопки, то точка прикрепления
штампа тоже будет перемещаться, т.е. можно клонировать целую область около
первоначальной точки. (Попробуйте продублировать свою голову, потом
удалите лишние события). На сильно увеличенном изображении штампом
можно заполнять отдельные пиксели.
3.1.Инструменты ретуширования более детально:
Точечная лечащая кисть (Spot Healing Brush Tool), Лечащая кисть
(Healing Brush Tool), Инструмент Заплатка (Patch Tool), Инструмент Красный
Глаз (Red Eye Tool)
Точечная лечащая кисть. Можно просто щелкнуть по точкам с
дефектами кожи инструментом Точечная Лечащая кисть и Фотошоп создаст
хорошую кожу на этих точка, основываясь на близлежащей области.
Восстанавливающая кисть.
Восстанавливающая кисть - позволяет восстанавливать участки
фотографий с помощью взятых за образец сохранившихся фрагментов. Она
использует пикселы по образцу изображения или узора и сопоставляет их
текстуру, освещение, прозрачность и затенение с соответствующими
параметрами исправляемых пикселов.
Алгоритм использования кисти для устранения дефектов кожи на
фотографии:
1. Взять инструмент "Восстанавливающая кисть"
2. Подобрать на палитре параметров подходящий размер кисти (например,
10 пикселов)
3. Подвести курсор мыши к участку кожи, где нет дефектов
4. Нажать клавишу "Alt" (курсор станет походить на мишень) и щелкнуть,
чтобы определить область-источник.
5. Отпустить клавишу "Alt" и начать рисовать по участкам с дефектами.
Пикселы с "источника" будут передаваться и подгоняться по цвету там
где вы рисуете кистью.
Режимы кисти
Если вы используете Точечную кисть для удаления дефектов, то для
получения
лучших
результатов
используйте
режимы
смешивания (Mode) в верхнем меню настроек инструмента. Начиная от
«Нормального» (Normal), установленного по умолчанию и до режима
«Замена светлым» (Lighten) пробуйте различные варианты смешивания.
С режимом «Замена светлым» (Lighten) Фотошоп заменит только те
пиксели, которые темнее текстуры образца. Например, прыщики обычно
темнее, чем основной оттенок кожи и такой режим подходит для их
коррекции. Но если дефекты светлее, чем основной тон кожи, то лучше
использовать режим смешивания «Темнее»(Darken).
Заплатка. Он отличается от двух предыдущих инструментов, но очень
полезен для бесшовного наложения кожи или других поверхностей. На
изображении выделите зону инструментом Заплатка. Теперь просто
перетащите ее в области, которые хотим подретушировать. Этим мы
создадим кожу на выделенной области, основываясь на той области, на
которую перетащили выделенную.
Красный глаз. Требует выделить радужную оболочку глаза с
проблемой красного глаза, и он попытается удалить красный цвет со
зрачка. Есть другие возможности сделать это (Кривые или Каналы), но
этот инструмент делает довольно хорошую работу.
3.2. Инструмент Штамп, Фигурный штамп
Инструмент Штамп очень полезный инструмент и он имеет множество
вариантов использования, и если вы работаете над фото манипуляцией, то
данный инструмент это хорошее решение для использования. Что начать его
использовать нажмите Alt и где-нибудь щелкните, чтобы взять образец. Затем
начинайте красить. Вы заметите, что делает этот инструмент. От клонирует
участки с одной части изображения на другие. Это очень эффективно для
создания новой контента на существующем участке и для удаления изъянов
кожи или нежелательных объектов. Инструмент Узорный штамп позволит вам
закрасить изображение желаемым узором.
4. Обрезка краев изображения
Готовое изображение обычно содержит по краям ненужный мусор, в
виде остатков от перемещаемых деталей. Для придания документу
законченного вида рекомендуется выполнить кадрирование, т.е. выделение
самой важной части. Для этого используется инструмент Обрезка. Остающаяся
часть документа обводится прямоугольной рамкой и по контекстному меню
стирается все то, что осталось вне рамки.
ЗАДАНИЕ. Обрезать лишнее по краям своей фотографии. Сохранить
файл как документ Photoshop, а затем как .jpg-файл.
5. Создание панорамного изображения
Скопируйте в свою папку jpg-файлы Нева1, Нева2, Нева3. В них
находятся части панорамы набережной Невы. Имея такие снимки, интересно
смонтировать единое панорамное изображение. Для точной стыковки кадров
может понадобиться перемещение фрагмента мелкими шагами, оно
выполняется при помощи клавиш с курсорными стрелками при нажатой Ctrl.
Для тонового сопряжения кадров удобно использовать настройки отдельных
цветовых составляющих по меню Изображение – Коррекция – Цветовой
баланс или – Яркость/Контраст.
ЗАДАНИЕ. Создать единое изображение с панорамой набережной Невы
в psd-файле. Внимательно проверить и отредактировать места стыковки кадров
в увеличенном масштабе. Сохранить готовое изображение в jpg-файле.
Сравнить размеры файлов.
КОНТРОЛЬНЫЕ ВОПРОСЫ И ЗАДАНИЯ
1.
2.
3.
4.
5.
Объясните необходимость наличия палитры Навигатор.
Покажите, какими способами можно изменять масштаб изображения.
Покажите, как работает Клон Штампа.
Какую помощь при ретушировании может оказать Пипетка?
Когда удобно использовать Клон Штампа?
ЛАБОРАТОРНАЯ РАБОТА 5
ПОИСК В ИНТЕРНЕТ.
При поиске нужной информации желательно пользоваться сразу
несколькими поисковыми системами, так как каждая имеет свой
собственный алгоритм поиска и использует собственную базу данных. Так,
используя одни и те же ключевые слова, можно получить совершенно
разные результаты в поисковых системах.
Поисковые системы (и русскоязычные и англоязычные):
Самая используемая в мире поисковая система Google. Ниже приведены
некоторые правила, которые вам могут быть полезны при использовании этой
системы.
1. Исключение из запроса.
При поиске в Google выдается много лишней информации.
Бороться с этим можно при помощи знака минус -.
Внимание! После минуса пробел не ставим!
2. Точный запрос.
Фразу, которую вы ищете необходимо заключить в скобки "".
После этого поисковик будет искать только точные совпадения.
3. Один из нескольких (логическое ИЛИ).
По-умолчанию, Google ищет страницы, которые содержат все слова из
поискового запроса, но если требуется выдать и те, которые содержат хотя бы
одно слово из заданного множества, можно воспользоваться логическим
оператором ИЛИ. Ему соответствует символ "|" (по-английски он именуется
pipe symbol).
Пример: журналистика|информационные технологии|поиск.
4. Похожие слова.
Для того, чтобы Google искал слова, похожие на заданное, используйте
символ "~" (тильда). Будут найдены синонимы и слова с альтернативными
окончаниями. Пример: ~hippo (по запросу будет так же найдено, например,
слово hyppopotamus).
5. Маски.
Символ "*" можно использовать как маску - условное обозначение
произвольного количества любых символов. Это может быть полезно,
например, если вы пытаетесь найти текст песни, но не можете при этом точно
вспомнить слова. Или отыскать сайт, домен которого запомнился только
отчасти. Пример: welcome to the hotel * such a lovely place; *pedia.org.
6. Поиск по определенному сайту.
Это одна из самых популярных функций. Довольно часто бывает так что
на сайте не работает поиск или его там вообще нет, а нам нужно найти
информацию на этом сайте. На помощь к нам приходит команда site:.
Внимание: После двоеточия пробелов быть не должно!
7. Значение слова.
Если вы хотите найти значение какого-либо слова, необходимо ввести в
строку поиска define:(слово значение которого надо узнать)
8. Поиск в адресной строке.
Функция inurl: поможет вам найти слова или словосочетания
непосредственно в строке адреса. Эта функция по своему полезна Например
вот такой запрос: inurl:robots.txt, позволит найти какие страницы сайта
закрыты от индексации.
Внимание: После двоеточия пробелов
быть
не
должно!
9. Поиск в заголовках.
Команда intitle: позволяет искать ключевые слова только в заголовках.
Внимание: После двоеточия пробелов
10. Поиск в тексте.
Команда intext: позволяет искать
не учитываются.
Внимание: После двоеточия пробелов
быть
только
быть
в
не
должно!
тексте,
заголовки
не
должно!
11. Поиск файлов.
Команда filetype:. позволяет искать файлы определенного типа .txt, mp3
и т. д. Например запрос такого типа: filetype:pdf Энциклопедия выдаст нам
сразу сайты с разными Энциклопедиями в PDF формате.
12. Вертикальный поиск.
Вместо того, чтобы искать заданные слова во всем вебе, можно ограничить
поиск какой-либо одной определенной сферой. В Google входит множество
поисковых сервисов, позволяющих находить интересующую информацию в
блогах, новостях, книгах, и многих других категориях:
*
*
*
*
*
*
*
*
*
*
*
*
*
*
Blog Search
Book Search
Scholar
Catalogs
Code Search
Directory
Finance
Images
Local/Maps
News
Patent Search
Product Search
Video
Linux resouces search and BSD resouces search
13. Кино.
Для поиска названий фильмов удобно использовать команду movie:.
Пример: movie:One Flew Over the Cuckoo's Nest.
14. Музыка.
Оператор music: ограничит результаты поиска контентом, который тем или
иным образом связан с музыкой. Пример: music:Depeche Mode 101.
15. Объединение запроса.
Надо знать как объединять запросы. На примере разберем такой
запрос: site:tsu.ru intitle:"топ 100"
Мы ищем на сайте университета в заголовках точное совпадение
словосочетания "топ 100".
Расширенный поиск.
Если вы забыли какой-либо из перечисленных операторов, всегда можно
воспользоваться формой расширенного поиска.
Как вы видите для увеличения эффективности (полноты и точности)
поиска в Google необходимо использовать сложный поиск с применением
логических операторов языка запросов или расширенный поиск. При сложном
поиске кроме ключевых слов в запрос включаются логические операторы
данной поисковой системы. К сожалению общепринятого стандарта логических
операторов пока не существует. Ниже приводятся примеры использования
основных логических операторов для некоторых поисковых систем.
Для упрощения задачи формирования сложных запросов используют
специальные формы, с помощью которой выполняется расширенный поиск.
Синтаксис
Что
оператор
означает
Пример запроса
пробел, &
|
Логическое И
пределах
предложения)
(в автомобили
легковые поиск
документов , содержащих оба слова
запроса в одном предложении
Логическое ИЛИ
фото | фотография | снимок |
фотоизображение поиск
документов, содержащих хотя бы
одно из слов запроса
+
Обязательное
наличие
слова
в
легковые автомибили +ГАЗ - поиск
найденном документе
документов
с
обязательным
(работает также в
присутствием слова 'ГАЗ'
применении к стопсловам)
~
легковые автомибили ~импортные Бинарный оператор
поиск
информации
по
И НЕ (в пределах
отечественным
легковым
предложения)
автомобилям
()
(технология | изготовление) (сыра |
творога) - поиск информации по
Группирование слов
технологии изготовления сыра и
творога
"..."
Поиск фразы
"война и мир" - поиск документов,
содержащих данную фразу
Подробнее
» Полный
перечень
операторов
Все
разделы
помощи Детальное
описание
Расширенный поиск
языка
языка
запросов
запросов
Синтаксис Что означает оператор
Пример запроса
автомобили легковые - поиск
Логическое
И
(в
документов, содержащих оба слова
пробел, &, пределах
фрагмента
запроса в пределах фрагмента
AND
текста по умолчанию
текста, состоящего не более чем из 40
состоящего из 40 слов)
слов
| , OR
NOT
()
"..."
Логическое ИЛИ
фото | фотография | снимок |
фотоизображение поиск
документов, содержащих хотя бы
одно из слов запроса
легковые автомибили NOT
Бинарный оператор И импортные - поиск информации по
НЕ
отечественным
легковым
автомобилям
Группирование слов
(технология | изготовление)
(сыра | творога) - поиск информации
по технологии изготовления сыра и
творога
Поиск фразы
"война
и
мир" поиск
документов, содержащих данную
фразу
Подробнее » Помощь в поиске, Расширенный поиск
Синтаксис Что означает оператор
Пример запроса
Логическое
И
автомобили
и
легковые И, AND, (подразумевается
по
поиск документов, содержащих оба
&, +
умолчанию т. е. можно
слова запроса
опускать)
ИЛИ,
OR
|,
Логическое ИЛИ
Ограничивает
документами,
НЕ, NOT,
содержащими
указанное
оператора.
()
фото ИЛИ фотография - поиск
документов, содержащих хотя бы
одно из слов запроса
поиск
легковые автомибили НЕ
не
импортные - поиск информации по
слово,
отечественным
легковым
после
автомобилям
(технология | изготовление)
Круглые скобки задают
(сыра | творога) - поиск информации
порядок
действия
по технологии изготовления сыра и
логических операторов
творога
Задание 1. Используя несколько поисковых систем подобрать
информацию для сайта. При поиске использовать расширенные возможности
поисковых систем. В
отчете к этому заданию описать используемые
инструменты поиска и найденные ресурсы. Напомню, что вам надо подобрать
материалы для 2-3 страничек HTML, на которых вы расскажите о каком-нибудь
городе мира.
ЛАБОРАТОРНАЯ РАБОТА 6.
Создание сайта.
Веб-дизайн (от англ. Web design) — отрасль веб-разработки и
разновидность дизайна, в задачи которой входит проектирование
пользовательских веб-интерфейсов для сайтов или веб-приложений, то есть
проектирование практичной, удобной, визуально привлекательной системы.
Существует термин "usability" - целая наука, которая рассказывает, как
разрабатывается дизайн, ориентированный на пользователя - понятный и
удобный. В русском языке однозначно сложно подобрать аналог этому термину,
поэтому часто используется слово "эргономика" - наиболее соответствующий
английскому "юзабилити".
Существую несколько основных типов сайтов по функциональному
назначению:
Сайт-презентация (визитка) Такие проекты имеют обычно яркий,
уникальный дизайн, графическое оформление преобладает перед текстовой
информацией
Корпоративный сайт – представительство организации (фирмы,
корпорации, спортивной команды, и т.п.) в сети Интернет.
Интернет-магазин - электронная площадка для купли-продажи товаров
и услуг
Информационные ресурсы - это электронные библиотеки, газеты,
порталы общения, новостные ленты, различные форумы.
Блог - особенный тип сайта, рассчитанный на то, что некую
информацию будут не только читать, но и комментировать.
Портал.
Уникальный сайт - ресурс, полностью адаптированный под
потребности и задачи конкретной компании или индивидуального лица.
Для нашей задачи подходит тип сайт-визитка – немного страниц,
хороший графический дизайн.
Вершиной любого сайта (назовем ее нулевым уровнем) является его
стартовая страница. На первом уровне размещены ссылки на основные разделы
сайта. Эти ссылки являются основным навигационным элементом сайта, и
обычно присутствует на каждой странице сайта. Эти два уровня присутствуют
на любом сайте, который состоит более чем из одной страницы. Все
последующие уровни являются не обязательными, и их количество зависит от
того, как информация будет объединена в разделы. Рекомендуется на одной
странице сайта размещать не более 1-2 обычных страниц информации.
Структура сайтов
Можно выделить три основных типа структуры сайтов:
1.Линейная структура:
2.Древовидная структура — это наиболее популярный вид структуры в
современном сайтостроении.
3. Решетчатая структура — наиболее сложная из представленных
структур.
Далее необходимо детально проработать структуру каждой страницы.
Это важная часть в построении сайта, так как от этого зависит удобство
пользования Вашим ресурсом. Насколько понятнее для пользователей у Вас
получиться структура каждой страницы, настолько выше шансы, что
посетителем сайта будет найдена нужная информация.
Пример структуры главной страницы:
1. Сверху находится Шапка сайта или Header. Обычно там
располагается картинка, название сайта и какие либо элементы
навигации. Например, ссылка «Главная» – на главную страницу
или – ссылка на страницу с важной информацией. Как правило,
шапка одинаковая для всех страниц.
2. Боковые колонки сайта обычно служат для размещения в них
меню, элементов навигации, поиска по сайту, опросов, рекламы и
т.д. Такие колонки могут располагаться как слева или справа, так
и с обеих сторон сразу. Отсюда различают верстку в две или три
колонки. Оба варианта весьма распространены в интернете и
какой из них выбрать дело вашего вкуса.
3. Под основное содержимое сайта отводится центральная колонка.
Занимает она 2/3 экрана для удобства посетителей при просмотре
и изучении информации.
Процесс расположения элементов - текста и картинок на странице
называется вёрсткой. Вёрстка бывает двух видов - табличная и блочная. Блочная
вёрстка (или, как её ещё называют, вёрстка на "дивах" – тэги div) считается
более продвинутым способом, однако она более сложна в освоении.
ЭЛЕМЕНТЫ WEB-СТРАНИЦ
Оформление
Текст
Заголовок
фона
Изображение
Горизонтальная линия
Таблица
Ссылка
документа
внутри
Список
Ссылка на другую
страницу
Для визуального построения гипертекстового документа будем
использовать приложение Adobe Dreamweaver CS6. Создание новой страницы
начинается с выбора опции Создать -> HTML.
В процессе создания страницы рекомендуется периодически ее
просматривать, желательно в разных обозревателях (браузерах). Страница
открывается в окне обозревателя по меню Файл - Открыть. Повторные
просмотры лучше выполнять по кнопке Обновить. Разные элементы на
страницу можно добавлять, выбирая их при помощи пункта меню "Вставка".
Более удобным вариантом может быть использование панели
инструментов для вставки элементов на страницу. Если этой панели вы не
видите, включить её можно, поставив галочку, как показано на рисунке.
1.Оформление фона.
Прежде всего задайте свойства страницы. Для этого перейдите в
окне, используя кнопку Свойства страницы.
Сохранить файл со страницей в отдельной папке, он получит
расширение .htm.
2. Заголовок
Для оформления заголовков используются специальные стили,
можно воспользоваться меню Type - Paragraph Format.
Назначение применяется к абзацу текста.
3. Текст. Все настройки текста делаются так же, как в Word.
4. Изображение.
По кнопке Image, находящейся на палитре инструментов, в
палитре Inspector появляются инструменты для выбора и
настройки изображения.
5. Горизонтальная линия. Горизонтальный разделитель бывает
полезен для придания большей выразительности странице. Для
него
используется
кнопка Line.
Cвойства
разделителя
настраиваются в окне Inspector .
6. Список.
Последовательность абзацев можно представить в виде
маркированного списка со специальными отметками в начале
каждого абзаца:
 это
 элементы
 списка
Для этого абзацы нужно выделить фрагментом и из контекстного
меню выбрать List. Свойства списка и отдельных элементов
можно изменять из контекстного меню.
7. Таблица.
При вставке таблицы вы указываете ее основные параметры,
например такие:
Формат
таблицы
настраивается в окне свойств. В клетки таблицы можно заносить
любую информацию, включая другую таблицу.
8. Ссылка внутри документа.
Для оформления ссылки на другую часть той же страницы нужно:
 поставить метку (кнопка Anchor) в том месте страницы,
куда
будет
осуществляться
переход.
В
палитре Inspector следует выбрать атрибут Name. Каждая
метка имеет свое уникальное имя, желательно писать его
латинскими буквами;
 задать ссылку. Текст ссылки помещается в нужное место
страницы, выделяется фрагментом и форматируется как
ссылка (кнопка Create link) в строке настроек текста. На
палитре Inspector в поле Link набирается символ # и за
ним без пробела имя метки.
При выборе этой ссылки в программе просмотра страницы
документ переместится в окне так, чтобы место ссылки оказалось
вверху окна (если место ссылки - в конце документа, то он
разместится так, чтобы это место было видно в окне).
9. Ссылка на другую страницу.
Текст ссылки помещается в нужное место страницы, выделяется
фрагментом и форматируется как ссылка (кнопка Create link) в
строке настроек текста. Другая страница находится в другом
файле, поэтому на палитре Inspector в поле Link выбирается
нужный htm-файл.
ЗАДАНИЕ. Создать 2 Web-страницы, на которых содержатся
ВСЕ описанные выше элементы. Объединить страницы ссылками
так, чтобы по ним можно было переходить с одной страницы на
другую и назад.
ЛАБОРАТОРНАЯ РАБОТА 7
«ТЭГИ HTML»
Web-страница, созданная в, обычно требует доводки вручную, т.е.
непосредственной работы с тэгами. Эти действия можно выполнить
непосредственно в DreamWeaver, изменяя исходный текст в окне
представления кода страницы, или в любом текстовом редакторе, например, в
Блокноте.
1. Название страницы
Название вашего документа, которое будет появляться в заголовке окна
обозревателя, задается тэгом <TITLE>.
ЗАДАНИЕ. Дайте своему документу название ТЭГИ HTML.
2. Выравнивание заголовка
Расположение заголовка на странице (выравнивание) регулируется
атрибутом Align.
ЗАДАНИЕ. Установить для заголовка выравнивание по правому краю
(right).
3. Изображение с сопроводительным текстом
Пересылка изображений по сети обычно требует довольно много
времени. Для экономии можно настроить обозреватель так, чтобы рисунки не
пересылались. Те места страницы, где они должны были бы выводиться,
останутся пустыми, и появится специальный стандартный ярлык. С помощью
атрибута Alt можно задать текст, который будет выведен на месте
отсутствующего рисунка.
ЗАДАНИЕ. Добавить к изображению сопроводительный текст.
4. Символьные примитивы
При выводе страницы на экран в программе-обозревателе производится
удаление лишних пробелов из текста. В тех случаях, когда дополнительные
пробелы действительно нужны, они оформляются в виде так называемых
символьных примитивов –   .
ЗАДАНИЕ. Удалить из текста ненужные символьные примитивы для
пробелов.
5. Цветной текст
Цвет буквы задается в тэге <FONT> с помощью атрибута Color.
Значение этого атрибута указывается либо названием цвета по-английски, либо
набором базовых цветов из модели RGB. RGB-код можно узнать в среде
PhotoShop в окне выбора цветов (поле с обозначением #).
ЗАДАНИЕ. «Раскрасить» какое-нибудь слово из 5-6 букв на вашей
странице в разные оттенки одного тона, от более темных к светлым.
6. Маркировка списка
Каждый элемент списка можно отметить цветным маркером – кругом,
диском или квадратом. В тэге <LI> для этих целей применяются атрибуты Type
(значения circle, disk, square) и Color.
ЗАДАНИЕ. Изменить маркировку списка на своей странице так, чтобы
каждый элемент был отмечен по-разному.
7. Редактирование ссылки
При переименовании файла, на который есть ссылка на странице, нужно
менять значение атрибута Href.
ЗАДАНИЕ. Скопировать файл со второй Web-страницей в другой файл и
отредактировать ссылку на него.
8. Разнообразие в оформлении таблицы
Для настройки толщины границы таблицы используется атрибут Border.
Цвет границы задается значением атрибута Bordercolor. В каждой клетке
таблицы можно указать свой цвет фона с помощью атрибута Bgcolor.
ЗАДАНИЕ.
Применить перечисленные атрибуты для оформления
таблицы.