Форум твоего направления

Форум твоего направления (http://pcvector.ru/forum.php)
-   Web-мастеринг (http://pcvector.ru/f32)
-   -   FAQ Как нарезать шаблон сайта в HTML в Adobe Photoshop (http://pcvector.ru/t1740)

Vector 25.11.2010 19:40

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

http://artjunkies.net/uploads/posts/..._image_one.jpg

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

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

Выбираем Single Column Marque Tool (в группе Marque)
http://artjunkies.net/uploads/posts/...40508003_1.jpg


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

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

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

http://artjunkies.net/uploads/posts/...40508395_2.jpg


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

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

http://artjunkies.net/uploads/posts/...40508659_3.jpg


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

http://artjunkies.net/uploads/posts/...40508793_4.jpg


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

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

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

http://artjunkies.net/uploads/posts/...40509113_5.jpg

Сохраняем.

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

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

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

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

Источник


Часовой пояс GMT +3, время: 18:23.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd. Перевод:
zCarot
Copyright © 2009 - 2014, pcvector.ru

.