Бублик Елена Николаевна, учитель информатики гбоу гимназия №343 2016 adobe photoshop эта программа

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

1. 
   Создаем новый документ с белым фоном и размерами (300 х 600 пикселов) немного большими, чем может нанять будущее меню. При этом сразу учтите, сколько у вас будет основных пунктов меню и сколько из них будут иметь так называемые подменю, или вложенные меню. В зависимости от их количества и планируйте размеры документа. Если вы все же немного ошиблись, не беда — в любой момент вы без особого труда можете изменить (как увеличить, так и уменьшить) исходные размеры документа.
   
2. 
   Затем на инструментальной панели выбираем инструмент RectangularMarquee(Прямоугольная область). Выделяем в созданном документе прямоугольную область. Ее размеры должны соответствовать размерам будущего навигационного меню. Обратите внимание, что в этих размерах не учтены подпункты меню. Далее начинается игра фантазии и чувства стиля. Можно оставить область выделения прямоугольной, а можно немного закруглить углы. Последнее предложение представляется более заманчивым. Выполняем команду меню Select ► Modify ► Smooth (Выделение ► Модификация ► Оптимизировать). В диалоговом окне SmoothSelection (Оптимизировать область)указываем Радиус скругления (SampleRadius). Однако не выбирайте этот радиус слишком большим. Помните, что задается радиус, а видна будет только дуга. Поэтому, чем больше радиус, тем больше будет спрямление этой дуги.
   
3. 
   На палитре Channel (Каналы) создаем новый канал Alpha 1 (Альфа 1). Быстрее всего это сделать щелчком на значке CreatenewChannel (Создает новый канал). Заливка нового канала будет иметь черный цвет. На инструментальной панели в качестве цвета переднего плана (ForegroundColor) выбираем белый. Выполняем команду меню Edit► Fill (Редактирование ► Выполнить заливку). В результате получаем белый прямоугольник со скругленными углами на черном фоне. Снимаем выделение командой меню Select ►Deselect (Выделение ► Отменить выделение). Пунктирная окантовка должна исчезнуть.
   
4. 
   Затем немного размоем все изображение командой менюFilter ► Blur ► GaussianBlur (Фильтр ► Размытие ► Размытие по Гауссу). В диалоговом окне GaussianBlur (Размытие по Гауссу) радиус размытия (Radius) устанавливаем порядка 8-11 пикселов.Теперь границу белого прямоугольника сделаем немного резче. Для этого будем использовать настройки уровней. Выполняем команду меню Image ► Adjustments ► Levels (Изображение ► Коррекция ► Уровни). В диалоговом окне Levels(Уровни)устанавливаем входные значения уровней примерно так же, как и на рис.
   
   
5. 
   Возвращаемся на палитру слоевLayers (Слои) и создаем новый слой. Выполняем команду меню Select► LoadSelection(Выделение ► Загрузить выделенную область), чтобы загрузить область выделения в этот слой. В диалоговом окне LoadSelection (Загрузить выделенную область) в раскрывающемся списке Channel (Канал)выбираем канал Alpha 1 (Альфа 1), который мы модифицировали до этого.
   
6. 
   Теперь зальем прямоугольник цветом, выбранным для окраски навигационнойпанели меню. Чаше всего в этом случае используются цвета в градациях серого или синего. Выбранный цвет указываем и качестве цвета переднего плана (Foreground) на инструментальной панели.
   
   
7. 
   Далее будем создавать эффект объемности, точнее, выпуклости панели навигационного меню. Сначала размоем края с помощью фильтра. Но перед этим перейдем на палитру каналов Channels (Каналы). Выполним команду меню Filter ► Blur ► GaussianBlur(Фильтр ► Размытие ►Размытие по Гауссу). Обратите внимание, его мы будем применять несколько раз, и. каждый раз будем уменьшать радиус размытия (Radius). Так, сначала зададим радиус размытия 16 пикселов. Затем, соответственно, 8, 4, 2 и 1 пиксел. Результатов действия фильтра с последними двумя значениями радиуса размытия вы можете и не заметить визуально. Но они есть! Дальнейшую работу можно нести разными способами, которые принципиальноотличаются друг от друга.
   
8. 
   Во-первых, эффект объемности для панели можно создать посредством воздействия все тех же фильтров. В этом случае выполняем команду меню Filter ► Render ► LightingEffects (Фильтр ► Рендеринг ► Эффекты освещения). Но первоначально вернитесь на палитру слоев Layers (Слои). В диалоговом окне LightingEffects (Эффекты освещения)выполните настройки, аналогичные тем, что показаны на рис.
   
   
9. 
   После этого размойте изображение с помощью фильтра — команда меню Filter ► Blur ► GaussianBlur (Фильтр ► Размытие ►Размытие по Гауссу). Во-вторых, можно сразу ныполнить команду меню Layer ► LayerStyle ► DropShadow (Слой ► Стиль слоя ►Тень). А затем выполнить настройки в диалоговом окне LayerStyle (Стиль слоя).
   
10. 
    У левой границы этого диалогового окна расположен список настраиваемых стилей Styles (Стили). Выбирайте нужный стиль, а затем в центральной части диалогового окна настраивайте свойства этого стиля. Можно определить для слоя сразу несколько стилей. Какие стили стоит выбрать и как их настроить для данного примера, вы решите сами, тем более что результат можно сразу наблюдать на документе.
    
    
11. 
    В результате должен получиться вытянутый выпуклый прямоугольник. Возможно, у вас получится намного интереснее. Выпуклая заготовка для панели меню у нас готова. Можно приступать к разметке кнопок на этой панели. Не будем мудрствовать лукаво, а на панели белыми линиями просто разметим узенькие полоски — это и будут кнопки. Для рисования линий будем использовать инструмент Line (Линия). Он расположен в группе инструментов для рисования различных геометрических фигур. Обязательно проследите, чтобы слои с линиями на палитре Layers (Слои) располагались выше слоя с самой панелью меню. В противном случае их не будет видно.
    
12. 
    После того как кнопки размечены, размещаем на них необходимый текст. Для этого применяем инструмент HorizontalType (Горизонтальный текст).
    
13. 
    Заготовка панели навигационного меню сделана. Остается только сохранить результаты в отдельном графическом файле. На завершающем этапе останется привязать к кнопкам необходимые ссылки.
    
14. 
    Теперь перейдем к созданию подменю. Выбираем на уже имеющейся заготовке навигационного меню кнопку, которая предполагает наличие подменю. В нашем примере это кнопка «Страница2» (третья сверху). Для подменю мы будем немного раздвигать основную панель. Поэтому проследите, чтобы в нижней частидокумента под панелью оставалось свободное место. Если его нет (или недостаточно), то увеличьте размеры документа по высоте. Заполняем команду меню Image ► CanvasSize (Изображение ► Размер холста).Вдиалоговом окне CanvasSize (Размер холста) в поле Height (Высота)из группы параметров NewSize(Новый размер)вводим новое значение высоты холста (документа). Остальные параметры этого диалогового окна можно оставить без изменения. Вы можете повторно изменить размеры холста на любом этапе дальнейшей работы. Только помните, что в поле Height (Высота), равно как и поле Width (Ширина), вы вводите новый размер документа, а не величину, на которуюследовало бы его увеличить.
    
15. 
    :Перед тем как продолжить, сведем все слои. Выполняем команду меню Layer ► MargeVisible (Слой ► Объединить видимые). Витоге у нас останется только один слой - Background (Задний план).
    
16. 
    Выбираем инструмент RectangularMarquee(Прямоугольная область). Затем выберем область основной панели навигационного меню, начиная с нижней линии той кнопки, которая должна содержать подменю. Область выделения должна включать нижнюю, а также боковые границы основной панели. Не страшно, если будет захвачено немного лишнего пространства. Верхняя граница области выделения должна проходить по нижней границе кнопки.
    
17. 
    Нa инструментальной панели выбираем инструмент Move (Перемещение). Приэтом сразу изменится и граница выделения. Она немного сузится и появятся регулировочные узлы, с помощью которых можно изменять размеры и положениевыделенной области.Клавишами перемещения курсора перемещаем выделенную область немного вниз. Конечно, это можно было сделать и с помощью мыши, по этот способ позволяет гарантировать четкое смещение только вниз.
    
    

18. 
    В промежутке между частями основной панели образуется серый прямоугольник, который нас совершенно не устраивает. Это остатки слоя, содержащего линии границ кнопок основной панели навигационного меню. Создаем новый слой (CreateanewLayer(Создаст новый слой)). Инструментом RectangularMarquee (Прямоугольная область) в новом слое выделяем область, включающую в себя ненужный серый прямоугольник. Затем инструментом PaintBucket(Заливка) заливаем выделение белым цветом (Снимаем выделение командой меню Select ► Deselect (Выделение ► Отменить выделение). Таким образом, у нас остались две совершенно отдельные части основной панели навигационного меню.
    
19. 
    Далеe будем создавать панель для подменю. Переходим на слой Background (Задний план). На инструментальной панели выбираем уже хорошо нам знакомый инструмент RectangularMarquee (Прямоугольное выделение). С его помощью выделяем центральную часть основной панели навигационного меню, не имеющую точной разметки. Причем выделить надо так, чтобы до краев панели имелось немного места. А по высоте выделенная область должнабыть на 2-3 пиксела меньше пространства между частями основной панели навигационного меню. Копируем выделенную область командой менюEdit ►Copy (Редактирование ► Скопировать). Если это выделение выполнено удачно, а на панели навигационного меню предполагается использовать несколько подменю, советую сохранить его в отдельном документе.
    
20. 
    Создаем еще один новый слой. На палитре Layers (Слои) перетаскиваем его миниатюру выше всех остальных. Вставляем из буфера обмена фрагмент панели в новый канал командой меню Edit ► Paste (Редактирование ► Вклеить). Инструментом Move(Перемещение)перетаскиваем вставленный фрагмент на свободный участок между частями основной панели навигационного меню. Центрируем его относительно боковых сторон основной панели. Допускается небольшой зазор между вставкой и нижней частью основной панели навигационного меню.
    
21. 
    Пока не снято выделение вставленного фрагмента, его можно немного отредактировать, например придать ему некоторый объем, выпуклость или свечение. (вдиалоговом окне LayerStyle (Стиль слоя), которое вызывается командой меню Layer ► LayerStyle ► DropShadow (Слой ► Стиль слоя ► Тень.
    
    
22. 
    После этого, советую немного высветлить вставленный фрагмент — ведь он должен немного отличаться от основной панели навигационного меню, настройки меню Image►Adjustments ► Brightness/Contrast(Изображение ► Коррекция ► Яркость/Контрастность.
    
23. 
    После того как вы настроили вид панели подменю, приступаем к разметке кнопок для нее. Эта операция полностью повторяет разметку кнопок для основной панели навигационного меню. Мы также используем инструмент Line (Линия) для рисования границ кнопок. Затем с помощью инструмента HorizontalType(Горизонтальный текст) пишем на кнопках необходимый текст. Его размер и яркость могут немного отличаться от текста на кнопках основной панели навигационного меню. Кроме того, яркость текста па кнопке, подменю которой вы смотрите, также лучше увеличить.
    
24. 
    Цель можно считать достигнутой. Мы создали полноценную заготовку для развернутой панели навигационного меню. Для использования такого меню на веб-страницах вам остается только добавить нужные ссылки для каждой кнопки панели. Кроме того, придется создать и скрипт, который будет раскрывать подменю. Поэтому необходимо для каждого подменю сохранять заготовку и свернутой панели, и развернутой.