Уроки Фотошоп Уроки Фотошоп Скачать для Фотошоп

скачать

Уроки Фотошоп

Уроки Фотошоп

Скачать PhotoShop CS6
главная в избранное карта сайта контакт

Уроки Photoshop

Уроки Фотошоп


Уроки Фотошоп


Фон Web-страницы


Как вы увидите позже, ImageReady позволяет создавать довольно сложные элементы и генерирует для них столь же сложный HTML-код. Часто удобнее всего взять его за основу страницы и добавить в специализированном редакторе остальные элементы. В таком случае удобно задать прямо в ImageReady один из главных атрибутов любой Web-страницы — фоновый цвет или текстуру. Он во многом определяет и то, как будет смотреться на странице изображение, над которым вы работаете. Задав фон в ImageReady вы получаете возможность сразу оценить вид изображения на выбранном фоне, используя команду Previewin.

1. Выберите команду HTML Background из меню File. Она открывает одноименное диалоговое окно.

2. В списке Color выберите любой цвет.

3. Закройте диалоговое окно, нажав кнопку ОК.

4. Выберите установленный на вашем компьютере браузер в списке Previewin, находящемся в меню File. Вы видите редактируемое изображение на фоне выбранного цвета.

5. Перейдите к окну ImageReady и снова выберите команду HTML Background из меню File.

6. В списке Color выберите вариант None.

7. Нажмите кнопку Choose и выберите любую текстуру, например marble.jpg, которую вы редактировали при изучении предыдущей главы. В поле Image появилось имя выбранного файла с полным путем к нему. Вы задали фоновую текстуру для страницы.

8. Выберите установленный на вашем компьютере браузер в списке Preview in, находящемся в меню File. Вы видите редактируемое изображение на фоне выбранной текстуры мрамора.

9. Перейдите к окну ImageReady и откройте текстуру marble.jpg, как документ, командой Open.

10. Еще раз выберите команду HTML Background из меню File.

11. Сотрите содержимое поля Image и установите переключатель в верхней части окна в положение Background. Этим вы сообщили ImageReady, что текущий документ является фоновой текстурой для Web-страницы-

12. Выберите установленный на вашем компьютере браузер в списке Preview in, находящемся в меню File. Вы видите только фоновую текстуру мрамора.

13. Перейдите к окну ImageReady и закройте документ с текстурой marble.jpg

Если вы создаете в ImageReady фоновую текстуру, объявите ее в диалоговом окне HTML Background, как это было сделано выше. Вы получите отличную возможность просмотра результата ее редактирования в браузере с помощью команды Previewin.

Для создания фоновых текстур ImageReady имеет два весьма полезных фильтра, находящихся в разделе Others меню Filters: это DitherBox и Tile Maker. Первый решает проблему получения цветов, не входящих в палитру Web, за счет т. н. гибридных цветов. Гибридные цвета создаются за счет расположенных рядом пикселов других, входящих в палитру Web, цветов. Благодаря тому, что пикселы соседние, глаз воспринимает их как один пиксел "среднего" цвета. Как правило, гибридные цвета создают за счет двух или четырех соседних пикселов. Фильтр DitherBox работает и с гораздо большим количеством соседних пикселов. Это бывает удобно для создания узорных текстур. Главное окно фильтра приведено на рис. 10.26.

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

1. Создайте небольшое новое изображение командой New из меню File. Установите в нем размер, скажем 100х100 пикселов и белый фон.

2. Выберите фильтр DitherBox в разделе Others меню Filters.

3. Щелкните на квадратном образце RGB, и откроется диалоговое окно Color Picker.



Рис. 10.26. Окно фильтра DitherBox

4. В диалоговом окне Color Picker сбросьте флажок OnlyWeb Colors.

5. В полях R, G и В задайте синий цвет (51, 133, 255).

6. Закройте Color Picker нажатием кнопки ОК. Образец в окне DitherBox окрасился в выбранный цвет.

7. Этот цвет не входит в палитру Web, но фильтр DitherBox подберет для него гибридный аналог. Щелкните на оранжевой стрелке слева от образца. Образец Pattern заполнится гибридным цветом, а в области редактирования появится его состав — два цвета из палитры Web. В списке гибридных цветов в левой части окна появится образец Pattern1, содержащий получившийся гибридный цвет.

8. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен гибридным цветом.

Возможно вы не поверите, что заливка в документе действительно гибридная. Цвет выглядит совершенно ровным и сплошным. Просмотрите документ под увеличением 300% или большим — вы увидите составляющие заливку пикселы двух цветов.

Вы можете сами создавать гибридные цвета, используя палитру Web в окне DitherBox.

1. Снова выберите фильтр DitherBox в разделе Others меню Filters.

2. Выберите в маленькой палитре инструментов под областью редактирования инструмент Pencil (карандаш).

3. В палитре цветов щелкните курсором мыши на любом образце. Когда курсор инструмента Pencil попадает в область палитры, он меняет свой вид на Eyedropper (пипетка).

4. В области редактирования по очереди щелкните на двух маленьких квадратиках, расположенных по диагонали. Они приобретут выбранный в палитре цвет.

5. Повторите шаги 3—4, выбрав в палитре другой цвет. Полученный узор представляет собой гибридный цвет.

6. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен гибридным цветом.

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

Допустим, вы решили получить фоновый узор в тонкую диагональную темно-синюю полоску на светло-синем фоне.

1. Выберите фильтр DitherBox в разделе Others меню Filters.

2. Нажмите кнопку New под списком узоров в левой нижней части окна. В списке появится строка нового узора.

3. Переведите переключатель размера узора справа от области редактирования в положение 7х7. В области редактирования появится матрица из 49 клеток.

4. Выберите в палитре цветов светло-синий цвет и заполните им всю матрицу в области редактирования.

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

6. Чтобы полоса смотрелась более "гладкой", обведите ее синим цветом, промежуточной насыщенности. Не забудьте закрасить этим цветом по одному квадрату в правом верхнем и левом нижнем углах (рис. 10.27). В противном случае линия будет иметь разрыв.



Рис. 10.27. Создание узора с помощью DitherBox

7. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен созданным узором. Установив текущий документ в качестве фоновой текстуры в диалоговом окне HTMLBackground, вы можете оценить вид узора в браузере.

Совет

Если вы намерены использовать узор в качестве фона для Web-страницы, то сохраняйте в файле только необходимое количество информации, Создайте документ ImageReady точно размером с узор (например, 7х7 пикселов) и заполните его с помощью DitherBox. Оптимизируйте полученное изображение в индексированной палитре Web и сохраните командой Save Optimized. Размер такой фоновой текстуры будет минимальный, в пределах 70 байт.

Узоры и цвета, относящиеся к одной Web-странице удобно сохранить в виде коллекции. Управление коллекциями цветов и узоров осуществляется с помощью раскрывающегося списка в левой верхней части окна. С помощью коллекций вы сохраняете цветовое решение сайта для повторного использования или развития.

В качестве фоновой текстуры для Web-страниц часто используются фотографические изображения. Для уменьшения размера они преобразуются в мозаичные. Пример создания такой текстуры, текстуры мрамора, был обсужден в предыдущей главе. ImageReady позволяет автоматизировать эту работу с помощью фильтра TileMaker.

1. Откройте исходный файл marble.jpg с прилагаемой дискеты.

2. Выберите команду Tile Maker из раздела Others меню Filters. Откроется диалоговое окно фильтра, изображенное на рис. 10.28.



Рис. 10.28. Окно фильтра Tile Maker

3. Фильтр работает в двух режимах: Blend Edges и KaleidoscopeTile. Установите с помощью переключателя первый режим.

4. В поле Width вводится ширина краев изображения, используемая фильтром для преобразования в мозаичную текстуру. По завершении преобразования эти края будут удалены. Вы можете компенсировать такую обрезку, установив флажок Resize Tile to Fill Image — тогда обрезанное изображение будет отмасштабировано до размеров исходного. Разумеется, качество текстуры от этого не возрастает, поэтому используйте эту возможность только в случае крайней необходимости. Оставьте в поле Width значение 10%, принятое по умолчанию, а флажок Resize Tile to FillImage сбросьте.

5. Нажмите кнопку ОК. Окно фильтра закроется, а текстура в окне документа преобразуется в мозаичную. Она будет на 10% меньше исходной, а освободившаяся площадь окажется прозрачной.

6. Для обрезки прозрачности в документе с текстурой используем особую команду ImageReady Trim. Выберите ее из меню Edit. Команда откроет диалоговое окно, изображенное на рис. 10.29. В области Based On находится переключатель, определяющий, какие области следует обрезать прозрачные (TransparentPixels) или совпадающие по цвету с левым верхним (Top LeftPixel Color) или правым нижним (Bottom RightPixel Color) углом изображения. Установите переключатель в первое положение. В области Trim Away задаются стороны изображения, которые необходимо обрезать. Установите флажки для всех сторон изображения.



Рис. 10.29. Диалоговое окно Trim

7. Нажмите кнопку ОК Изображение обрезано, прозрачные поля удалены.

8. Объявите изображение фоновой текстурой в диалоговом окне HTMLBackground и воспользуйтесь командой Preview in, чтобы оценить результат в окне браузера. Как видите, полученная текстура тоже не обнаруживает своей повторяемости четкими границами между отдельными элементами. Фильтр Tile Maker в большинстве случаев дает превосходный результат.

Уроки Фотошоп

Уроки Фотошоп © 2005-