Бублик Елена Николаевна, учитель информатики гбоу гимназия №343 2016 adobe photoshop эта программа
жүктеу/скачать 1,33 Mb.
|
- Бұл бет үшін навигация:
- Edit►Fill(Редактирование ► Выполнить заливку).
- Createanewlayer (Создает новый слой)
- Gradient (Градиент)
- Select ► Modify ► Contract (Выделение ► Модификация ► Сжать).
- Edit ► Fill (Редактирование ► Выполнить заливку)
- Use (Использовать)
- RectangularMarquee (Прямоугольная область)
- Shift+Ctrl+Alt
- Select ► Deselect (Выделение ► Отменить выделение).
- Edit ► Сору (Редактирование ► Скопировать)
- RectangularMarquee(Прямоугольная область).
- Select►Inverse (Выделение ► Инверсия).
- Layer►LayerStyle (Слой ►Стиль слоя)
| Лабораторная работа №21
Навигационное меню Ранее мы рассмотрели примеры создания типичных навигационных кнопок. Они представляют собойодин из наиболее распространенныхвариантов навигации на веб-страницах, причем встречаются значительно чаще остальных. Но если вы создаете действительно большой веб-проект, содержащий много различных веб-страниц, между которыми вы хотите организовать оптимальную и аффективную систему навигации, то одними кнопками вы не обойдетесь. В этом случае вам придется использовать так называемое навигационное меню. По существу, навигационное меню представляет собой организованный наборнавигационных кнопок, выполненный в едином стилистическом оформлении. Рассмотрим варианттрадиционного вертикального навигационного меню. Оно, как правило, располагаются у левой границы веб-страницы. Создаем новый документ, причем его вертикальные размеры должныбыть немного больше горизонтальных, если вы собираетесь создавать традиционное вертикальное меню. Для заливки фона этого документа лучшевсего использовать заранее подготовленную текстуру (или фоновое изображение), которая используется на всем пространстве веб-страницы. Поэтому сразу после создания нового документа для меню заливаем его фон подготовленной текстурой, используя команду меню Edit►Fill(Редактирование ► Выполнить заливку). В диалоговом окне Fill(Заливка) в раскрывающемся списке Use (Использовать) выбираем вариант. Как только вы нажмете кнопку ОК вдиалоговом окне Fill (Заливка), фон нового документа будет заполненсоответствующим образцом, что нам и требовалось. Затем создаем новый слой, щелкнув па значке Createanewlayer (Создает новый слой) в нижней строке палитры Layers (Слои). На инструментальной панели выбираем инструмент RectangularMarquee (Прямоугольная область). С его помощью создаем выделение, имеющее форму квадрата. Для этого перед выделением нажмем и будем удерживать нажатойклавишуShift.Далее растяжениемпо диагонали нарисуем квадратное выделение, соответствующее по высоте размерам будущей кнопки меню. Как только маленькое квадратное выделение будет создано, на инструментальной панели выбираем инструмент Gradient (Градиент). На панели параметровэтого инструмента выбираем режим заливки AngleGradient(Конусовидный градиент) После настроек параметров инструмента заливаем выделенную область градиентом из левого нижнего в правый верхний угол. В результате нижняя половина квадратного выделения должна окраситься в черный цвет, а верхняя останется белой. Затем выполняем команду менюSelect ► Modify ► Contract (Выделение ► Модификация ► Сжать). В диалоговом окне SelectContract (Сжать область) задаем величину, на которую будем сужать имеющееся выделение,равной 3-4 пикселам. В результате пунктирный прямоугольник станет заметно меньше. Далеевыбираем цвет заливки переднего плана кнопки. Лучше использовать цвета, больше гармонирующие с общим фоном. Выполняем команду меню Edit ► Fill (Редактирование ► Выполнить заливку) и заливаем выбранным цветом выделенную область. Следует заметить, что в диалоговом окне Fill (Запивка) необходимо в раскрывающемся списке Use (Использовать) выбрать вариант Foregroundcolor(Основной цвет). Выполняем заливку.Снимаем выделение командой менюSelect ► Deselect (Выделение ► Отменить выделение). Как видите, мы уже получили некоторое подобие объемной кнопки квадратной формы. Нона такую маленькую кнопочку вы не сможете поместить ни одну надпись. Заготовку необходимо увеличить до соответствующих размеров. Для этого на инструментальной панели вновь выбираем инструмент прямоугольного выделения RectangularMarquee (Прямоугольная область). С его помощью выделяем правую половину изображения. Не страшно, если это выделение по высоте будет немного больше самой заготовки. Затем, удерживая комбинацию клавиш Shift+Ctrl+Alt, нажимаем клавишу -> (стрелка вправо) до тех пор, пока создаваемая кнопка не обретет необходимую длину. После того как заготовка кнопки достигла нужной длины, снимаем выделение командой меню Select ► Deselect (Выделение ► Отменить выделение). Если мы создаем навигационное меню, то одной кнопкой нам никак не обойтись. Поэтому сначала выделяем всеизображение заготовки первой кнопки, используй уже известные нам инструменты. Затем копируем его в буфер обмена командой меню Edit ► Сору (Редактирование ► Скопировать) и создаем несколько копий этого изображения. Количество копий, естественно, должно соответствовать количеству кнопок на панели навигационногоменю. Но особенно много их делать также не следует. Кстати, надо заметить, что между кнопками не должно быть ни малейшего пространства. Но и накладывать друг на друга ихне стоит. Итак, в результате мы получили «обойму» из нескольких одинаковых кнопок (сразу и не поймешь, чту это кнопки меню). Первый шаг к созданию навигационного меню мы уже сделали. Продолжаем. Создаем новый слой (щелчкомна значке CreateaNewLayer (Создает новый слой) и палитре слоев). В нем мы создаем выделение в форме овала у правой границы будущего меню. Для этого используем инструмент EllipticalMarquee(Овальная область). Радиусы эллипса выбирайте, естественно, по своему усмотрению и в зависимости от каждой конкретной ситуации. Но старайтесь, чтобы дуга эллипса не уменьшалась в нижней части навигационного меню. Затем заливаем выделенную область градиентом. Градиент выбираем линейный в оттенках серого или близкого к основным тонам меню. Интереснее сделать, чтобы темная часть градиента была ближе к кнопкам.Возможно, что с первого раза у нас и не получится подобрать ни подходящего радиуса эллипса, ни цвета его заливки. Попробуйте несколько раз повторить описанные действия. Наконец, когда все удалось, выбираем на инструментальной панели инструмент RectangularMarquee(Прямоугольная область). С его помощью выделяем панель с кнопками и часть эллипса так, чтобы от эллипса остался только тот фрагмент, который вписывается и периметр основной части панели меню. Далее инвертируем выделение командой меню Select►Inverse (Выделение ► Инверсия).А затем просто удаляем выделенную область. В результате у нас останется только одна панель навигационного меню и никаких лишних элементов.Естественно, панель навигационного меню мы уже создали. Теперь немного оформим кнопки. Создаем новый слой. На инструментальной панели выбираем все тот же инструмент прямоугольного выделения. Сначала оформим верхнюю кнопку. Точнее, выделяем в ее границах прямоугольник, причем так, чтобы до внешних границ самой кнопки оставалось немного места. Далее заливаем выделенную область линейным градиентом в оттенках серого. Впрочем, окраску градиента можно изменить по обстоятельствам. Дополнительно можно использовать настройки стиля слоя (Layer►LayerStyle (Слой ►Стиль слоя)). Это может сделать кнопки более интересными. Аналогичным образом поступаем и с остальными кнопками навигационной панели.Размеры области внутреннего выделения будут изменяться в зависимости от размеров кнопки. Наконец, мы выходим на финишную прямую. Остается выполнить на кнопках соответствующие ссылкам надписи. Не будем вдаваться в подробности, как вам правильно подобрать стиль шрифта и как написать. Главное, перед тем как наносить текст, сохраните заготовку меню (без текста) в формате PSD. Быть может, со временем выбудете расширять или изменять свое меню. кнопками Останется только добавить к каждой кнопке соответствующие ссылки. жүктеу/скачать 1,33 Mb. Достарыңызбен бөлісу:
|