19 нояб. 2011 г.

Как в Фотошопе нарисовать, сделать форму поиска для сайта.

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


Далее в левой палитре программы в области Рисование и Текст  выбираю инструмент «Прямоугольник» в нём соответственно инструмент «Прямоугольник со скруглёнными углами»


Следует обратить внимание на появившееся сверху меню свойств данной группы инструментов.


Определитесь что и чего вы намерены сделать. Фигуру, контур или просто залить выделенную область каким либо цветом.  Радиус округления подбирайте в процессе изготовления.  В моём случае я выбираю «Заливка цветом»  и радиус например 25.  Зажав левую кнопку мыши просто протяну курсор-крестик по полю документа.


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


Размер вновь сделанного (белого) слоя изменю при помощи инструмента «Свободное трансформирование». Он стал меньше основного (чёрного) и я напишу "Поиск" обозначая активную часть картинки или кнопку.


Можно сделать чуть иначе. Инструментом «Прямоугольная область» выделю и обрежу не нужное мне поле. (хотя  эта заготовка формы поиска  довольно таки  симпатичная  )


 На оставшееся белое поле помещу фигуру «Лупа». Эта фигура традиционна для форм поиска по сайту. О работе с фигурами написано буквально в прошлой статье.


Теперь для «красивости» добавлю эффект «ТЕНЬ» для слоя «Лупа»  и основного чёрного слоя.  В итоге получился вот такой прямоугольник  с закруглёнными углами и он же строка  поиска для сайта.


Проведя сведение слоёв и обязательно выполнив обрезку и масштабирование документа сохраняю рисунок в формате PNG или GIF в соответствии c требованиями файла стилей CSS вашего шаблона.  Готово! Теперь вы можете использовать  свежеиспечённую  строку поиска сделанную в Фотошоп  на страницах  вашего сайта. И пусть у вас будет нескончаемый поток посетителей. 


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

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

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

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