Подготавливаем векторное изображение для вебсайта.



Итак, для примера у нас красивая картинка, взятая с shutterstock.com в векторном формате, это значит, что мы может изменять её масштаб без потери качества. На изображении городской пейзаж, в современных цветовых гаммах. Использовать эту «живопись» в таком виде в создании или редизайне своего сайта, проблематично, поэтому берём в руки наш любимый Photoshop.


Нашу картинку мы будем использовать в «шапке». Создаём новый документ шириной 950 px и высотой 1500px.



Открываем нашу картинку в Adobe Illustrator, нажимаем Select All, копируем и вставляем в наш photoshop документ, убедитесь, что картинка скопируется как «Vector smart Object», это позволит сохранить векторный формат.




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



Выделяем блок пикселей с правой стороны изображения, на базе которого будет сделана горизонтальная текстура, копируем его в новый слой с помощью Ctrl+J (Command-J для владельцев маков).





Затем Free transform (Ctrl-T/Cmd-T), удлиняем полученный фрагмент в ширину, заполняя им всю рабочую область по горизонтали. Смотрим что у нас получилось, с левой стороны за холмом слишком резкий переход, попробуем это исправить.



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



Удаляем с него, всё не нужное, оставляя только непосредственно сам почтовый ящик и сохраняем его как «Vector smart Object» в нашу заготовку, получился идеальный элемент для маскировки «резкого перехода».



Создаём белый прямоугольник по центру, с закруглёнными краями, здесь будет размещена информация о сайте.



Теперь, с помощью пипетки (Eyedropper) определяем нужный нам цвет, который мы зальём по бокам.

Вуаля.



Последний штрих.

Подберём шрифт, который идеально впишется в наш дизайн и немного распишем нашу шапку, думаю, что получилось красиво. Образец, сможете найти в psd файле. Всё. Теперь наш шаблон готов, для перевода его в веб формат.



P.S.: Этот урок был переведён с иностранного блога, поэтому просьба ко всем посетителям, дополнения к вышесказанному, исправления публикуйте в комментариях.

Скачать PSD исходник.