IxStep.ru Все о дизайне и его хистростях!

Поиск по сайту
Навигация
Наш опрос
Нужен ли нам форум?
Да, конечно!
Нет. не надо.
Без понятия.
Хм... А что это?

Веселушки
Водка, водка, огуречик. Вот и спился человечек!

Популярные новости
HQ Images - Wood textures 2
HQ Images - Wood textures 2

Коллекция текстур - Дерево32 JPG | 3972X ...
ISO43 Mangiare
ISO43  Mangiare

Растровый клипарт, совместный завтрак, л ...
Фотоклипарт - Objekts 6
Фотоклипарт - Objekts 6

20 JPG | 1400x1400 ~ 3888x2592 | 22.7 Mb
Геометрические узоры 5 \ Geometric patt ...
Геометрические узоры 5 \\ Geometric patterns 5

40 file | tif, pct, pcx | rar 13.7 mb
Dirty Knotty Wood Textures
Dirty Knotty Wood Textures

5 JPG | 2500x2500 | 300 dpi | 8.4 Mb
STOCK TEXTURE glittery glitter
STOCK TEXTURE glittery glitter

STOCK TEXTURE glittery glitter by Mauree ...
Превращение дневного снимка в вечерний
Превращение дневного снимка в вечерний

 Если у вас есть фотография, сделанн ...
Glowing ornaments by shivaness294 - кист ...
Glowing ornaments by shivaness294 - кисти для Adobe Photoshop

Glowing ornaments by shivaness294 - кист ...
Snowboard - HQ Stock Photos
Snowboard - HQ Stock Photos

Snowboard - HQ Stock Photos5 JPEG | A4 t ...
VARIOUS INTERIORS 3
VARIOUS INTERIORS 3

Профессиональный клипарт - РАЗЛИЧНЫЕ ИНТ ...

PhotoshopНарезаем шаблон в HTML - уроки Adobe Photoshop

Привет, сегодня научимся "переводить" сайт из Фотошопа в формат понятный интернет эксплореру.



Вот возьмем к примеру этот шаблон
Внимание! У вас нет прав для просмотра скрытого текста.


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

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


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

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

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



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

Далее берем инструмент 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 формат и нарезана.

Спасибо !

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

От админа: очень полезный урок! (как говорит молодёжь: "Аффтар пиши исчо!!!")



-Сладок сон трудящегося, мало ли, много ли он съест; но пресыщение богатого не дает ему уснуть. (Екклесиаст)

Опубликовал Kotek, 21 июня 2010 | Комментировать (0) | Печать
 (голосов: 0)

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.