Итак, вы умеете рисовать в программе Adobe Photoshop и нарисовали себе шаблон сайта, но не знаете, что же делать дальше, как сделать сайт из шаблона ?
Современные технологии создания сайта требуют минимального веса страницы и поэтому часть изображений вставляется в шаблон сайта отдельно, часть рисунка вырезается и вставляется как элемент фона.
Данная статья посвящена тому, как вырезать части изображения инструментом Slice Tool (K).
Попытка не пытка?
Сохраняем копию вашего файла с шаблоном и начинаем его разрезать.
Последовательность действий
1. Открыв рисунок в программе Adobe Photoshop, выбираем инструмент Slice Tool (K) или просто нажимаем на английскую букву K.
Обратите внимание, что вы должны представить свой рисунок в виде таблицы, с вставленными в ее ячейки рисунками.
Разрезаем фрагмент шаблона в Photoshop
2. Выделяем инструментом Slice Tool (K) части рисунка.
Обратите внимание, что первый фрагмент у меня выделен одним блоком – это логотип (1), я еще не сохраняю страничку, а буду выделять и дальше.
Там где будет заливка выделяйте кусочек рисунка шириной 1 пиксель (2) и он став фоном ячейки таблицы или блока div даст нам тот же вид, что и большой фрагмент.
Обратите внимание на пункт (3) – это уголок горизонтального меню, его мы разрежем отдельно, остальные пункты меню (4) мы можем сделать рисунками, а можем сделать текстовыми, а рисунок шириной 1 пиксель, будет фоном.
Так же наши ячейки должны быть на одном уровне, чтобы потом было легче все редактировать самим.
Обращаю так же внимание на пункт (5) – это ваша будущая ячейка которая будет растягиваться, ведь фрагмент где находится баннер (баннер) будет иметь постоянную ширину и высоту, а фрагмент текст может из-за большого количества текста растягивать ячейку вниз, значит будут тянуться и другие ячейки и будут образовываться белые полоски. Чтобы этого не было сразу предусматривайте ячейки по горизонтали высота которых будет определяться содержимым ячейки с текстом.
Новичкам лучше разрезать большими блоками
3. Когда вы разрежете весь свой шаблон, то можно приступить к сохранению.
Переходим «File» — «Save for Web & Devices» или нажимаем Alt+Sift+Ctrl+S
Переходим «File» - «Save for Web & Devices»
4. Проверяем настройки, смотрим, чтобы качество было 100% и сохраняем,
5. Теперь проверяем, что у нас в папке сохраненным шаблоном.
В папке с вашим будущим сайтом будет папка images – в которой находятся те самые кусочки рисунков.
В папке с вашим будущим сайтом будет папка images
Вот вы и получили свою веб страничку из рисунка. Теперь необходимо редактировать.
Например, если вы сразу начнете добавлять текст, то ваш рисунок, находящийся в этой ячейке будет двигаться, а вместе с ним будут появляться пробелы, былые полосы – придется делать рисунок фоном ячейки (прочтите тему о таблицах и о вставке рисунков в ячейку и фоном ячейки). Так же возможны проблемы из-за объединения вами нескольких ячеек – придется все менять в строках, то есть указывать, на сколько должна растягиваться ячейка, если две нижние объединились в одну – поэтому лучше сразу рисовать шаблон попроще, разрезать на меньшее количество блоков, а текст добавлять такими порциями, чтобы ничего не тянулось.
Решать вам, однако легко сделать не получится, раз уж взялись за это дело разбирайтесь и тогда вы действительно станете понимать и делать нормальные сайты.
Остальным прямая дорога к использованию готовых шаблонов.
Спасибо за внимание.
Автор: Титов Сергей.
Закажи бесплатную подписку!
Как правильно рисовать дизайн сайта?
Как создать сайт самому Рисуем шаблон в Photoshop 01 720p
