FAQ Как нарезать шаблон сайта в HTML в Adobe Photoshop

Как же перевести созданный шаблон сайта из Adobe Photoshop в формат понятный интернет браузеру ?


Вот возьмем к примеру этот шаблон здесь

Скопируем файл и откроем в photoshop ... склеиваем все слои.

Выбираем Single Column Marque Tool (в группе Marque)

Выбираем самый левый край нашего шаблона, потом Ctrl+C, Ctrl+N, Ctrl+V (Скопировать, Создать, Вставить). Cохраняем полученное в папку images, это будет фон нашего сайта.

Далее, направляющими, отделяем сайт там, где нам надо его разрезать.
(меню, тексты, заголовки, иконки и т.д.)

Если сразу не получиться т.е., Вы выделите направляющими текстовое поле, но при этом разрежете меню не так как надо, то это не проблема. Cначала закончите с большими объектами, потом поработаем над мелкими.



Посмотрите, на рисунке мы не разделили основной раздел сайта от добавочного справа, т.к это разрежет меню, которое на верху.

Далее берем инструмент Slice Tool (K) и выделяем квадратик за квадратиком разделенные направляющими.



После того как Вы заполнили все, нажимаем Alt+Ctrl+Shift+S (или Save for Web),
окошко откроется, но изображение будет покрыто чем то белым.



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

Когда все сделали нажмем Save .

В окошке введем имя файла (например main_design) и выберим Save as type (HTML and Images)


Сохраняем.

Откроем папку, увидим там один HTML файл и папку images. Откроем файл в браузере. Это уже нарезанный файл в таблицах (открываем его в Adobe Dreamweaver и начинаем уже корректировать в зависимости от своих потребностей)

Теперь откроем папку images и выберем файл который мы недорезали, помните, из-за меню наверху.

Открываем его в фотошоп и точно также режем инструментом Slice Tool. После сохранения получаем второй файл с таблицей. Заменяем Фото (которое только что меняли) из первого файла, на таблицу (с нарезанными фото) из второго файла. (теперь второй файл можно удалить).

Вот и все... Фотка переведена в HTML формат и нарезана.

по ходу всё это хозяйство можно ещё перегнать в ImageReady а там ещё куча полезных инструментов. Типа ролловиров и т.д как бы подготовить уже норм. такой каркас для доработки в дриме

Друг, лови (+)

А кто пользовался Adobe Muse там можно создавать сайты целиком или еще что-то нужно?