14 февр. 2012 г.

Быстрое создание простейших кнопок для горизонтального меню сайта.

Горизонтальное меню сайта состоит из простого списка горизонтальных ссылок. Для придания этому списку эстетически приличного вида, можно использовать как стили CSS так и картинки в форматах JPEG,GIF и PNG. Естественно, использование сделанной в Фотошоп картинки даёт большие возможности для разнообразия и полёта дизайнерской мысли, которую нужно использовать в меру. Иначе можно "наворотить" такого дизайна, что я порой закрываю, тот или иной сайт даже не дождавшись полной загрузки.
 Итак: как в Фотошопе нарисовать кнопку для горизонтального меню сайта. Создам новый прозрачный документ.



Инструментом "прямоугольник со скруглёнными углами" нарисую форму изготавливаемой кнопки.



Это форма простой стандартной кнопочки с четырьмя округлыми уголками. Можно сделать просто прямоугольную кнопку  или с округлыми верхними углами или со всевозможными фигурными срезами сторон.  В общем сделаем вот такую заготовку для кнопки. 
Теперь мне нужно сделать новый пустой верхний слой. 



На этом слое будем рисовать обводку  кнопки. Стану на первый слой и зажав клавишу Ctrl левой кнопкой мыши кликну по пиктограмме первого слоя. Получится вот такое выделение. 



Теперь став на верхний пустой слой проведу обводку по границе выделенной области. 



На данном этапе имеем два слоя. Первый с фоном кнопки, второй с обводкой этого самого фона. 
Далее сделаю ещё один новый пустой слой.  И овальным выделением  образую новую область.



Теперь залью эту область градиентом. Чёрным, с переходом на прозрачный.  


Сниму выделение и удалю излишки верхнего слоя. Немного изменю непрозрачность. Получится вот так. 


Кнопочка будет у меня в формате PNG, а это значит что она будет прозрачной и сможет ложиться на любой фон. Поэтому белый  фон можно удалить или пока просто сделать его по размеру документа. Залить белым прозрачный фон.  
Инструментом ластик немного обработаю нижние углы кнопки для придания её некоторой стекляности.


 Пишем необходимый текст. Можно добавить эффектов слоя. Например чуть тени.


Отключив белый слой сохраню кнопку в формате PNG


Теперь эту кнопку можно вставить на любой фон в блоке горизонтального меню сайта. 




Само собой разумеется что данная статья не отражает в полной мере весь спектр способов создания веб-кнопок. Для изготовления можно употреблять и стили слоя и всевозможные эффекты слоя.   
Как обычно статья не является прямым указанием к беспрекословному исполнению, а написана в целях ознакомления с возможностями тех или иных инструментов графического редактора Фотошоп. Удачи!  :) 

Комментариев нет:

Отправить комментарий

Внимание: Во избежание публикации нецензурных выражений, спама и лишённых всякого смысла высказываний, все комментарии проходят предмодерацию. Спасибо за понимание.