Маленький магазинчик фотографий

Roman AKA Docent

Спецвыпуск: Хакер, номер #050, стр. 050-022-5

Дизайнерский подход

И снова о возможностях Photoshop. Посмотрим на некоторые функции, которые могут пригодиться при разработке дизайна, например, интерфейса сайта. Допустим, мы готовим заготовку «шапки» некой страницы, оснащенной кнопочками меню и незамысловатой графикой. Создаем новый документ (File-> New), в Width (ширина) пишем 750, а в height (высота) - 150. Все эти размеры измеряются в пикселях. Создаем новый слой (Layer1) и делаем его активным. Выделяем на всю ширину прямоугольную область снизу с помощью Rectangular Marquee Tool примерно на 1/8 высоты так, чтобы здесь могли поместиться буковки меню в читабельном размере шрифта. Устанавливаем какой-нибудь цвет, щелкнув по “верхнему” квадрату в панели инструментов Set Foreground color (этот квадрат отвечает за цвет используемого нами инструмента). Темно-серый, так как он лучше всего подойдет для реализации нашего творческого замысла. Pain Bucket Tool и щелчок по выделенной области - вот и окраска в нужный цвет. Затем в окне Layers щелкаем правой кнопкой по этому слою и в появившемся меню выбираем Blending Options. Появилось окно Layer Style, в котором имеется множество всяких опций и настроек для придания слою рельефности, тени, для заливки текстурой, освещения и много другого. Пусть будет более выпуклой - поставим галочку Bevel and Emboss. Там же можно задать силу и направление рельефности (выпуклость, впадина), угол падения света, резкость теней, плавность углов. Результат сразу же можно увидеть на картинке. Заодно я добавил оранжевый блик сверху и серое затенение снизу (опции Highlight Mode и Shadow Mode, в которых можно еще выбрать и цвет этого оттенка).

Настоятельно рекомендую самостоятельно поиграть с разными настройками, а то, как это сделали мы – на скриншоте. Зададим еще и текстуру, чтобы менюшка не казалась слишком однородной. Установим флажок Texture, выберем для нее подходящий Pattern (как создавать свои Pattern’ы, читай ниже). Ползунком Scale откорректируем размер заполнения нашего элемента паттерном, а ползунком Depth установим нужную четкость этой текстуры. ОК – и можно нанести на менюшку какие-нибудь «Пункты». Инструмент Horizontal Type Tool (это горизонтальное расположение текста, а если нажать эту кнопку и подержать, любезно предложат свои услуги и другие направления печати), в появившемся верхнем меню нужный размер и тип шрифта (тут все почти как в текстовых редакторах) – уже можно писать на создаваемой панели. Для текста автоматически создастся новый слой, а если будет желание, сможешь поменять и текст, и опции шрифта. Менюшку пока что оставим и перейдем к общему оформлению.

Продолжим постъядерную тематику. Пригодится картинка, сделанная в предыдущем примере. Открываем ее и выделяем с помощью Select-> All, предварительно объединив все слои в Layer-> Flatten Image (но не стоит сохранять ее в таком виде, если считаешь, что тебе еще нужно работать с ее слоями). Вставляем из буфера картинку в новый документ, а затем с помощью Edit-> Transform-> Scale меняем ее размеры до подходящих, как и было в предыдущем примере. Кстати, при использовании инструмента вкупе с различными опциями наверху появляется кнопочка, на которой нарисовано что-то вроде звеньев цепи. Кнопочку нажмешь - пропорции картинки при масштабировании сохранишь. Картинка, разумеется, вставилась новым слоем, но могла закрыть собой слой с менюшкой, он же – планируемый передний план (открывай окно Layers и устанавливай нужный порядок слоев). У меня после перемещения картинки направо образовалась пустое пространство с другой стороны. Расправлюсь с ним изящно, а попутно продемонстрирую кое-какие фильтры. Жмем по слою с картинкой правой кнопкой и в нарисовавшемся меню выбераем Duplicate Layer. А вот и точная копия этого слоя (кстати, к ее названию в окне Layers добавлено слово “Copy”). Заполним этим слоем пустое пространство и немного растянем картинку для прикрытия ее правой части. Выделяем весь этот слой с помощью Rectangular Marquee Tool, заходим в Filter-> Pixelate-> Mosaic. Картинка теперь перевоплотилась в набор квадратных пикселей. В появившемся окне ползунком меняем размер этих квадратиков и - ОК. Ластик, установленный в Opacity примерно на 50% и с таким размером, чтобы диаметр его “круга” был примерно равен высоте всей картинки, слега ликвидировал границу нового слоя и адаптировал новый слой к имевшимся. Фильтры в менюшке Filters - довольно интересная штука, рекомендую. Их можно скачивать в виде дополнений от сторонних разработчиков. Часто попадаются очень полезные примочки, с которыми можно вытворять невероятные вещи и добиваться впечатляющих эффектов.