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

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

Веселушки
Правильно брошенный муж обязательно вернется, как бумеранг.

Популярные новости
Crash and Burn
Crash and Burn

Большой комплексный пак, содержащий 69 в ...
красивые рисованные знаки зодиака в PNG ...
красивые рисованные знаки зодиака в PNG формате

красивые рисованные знаки зодиака в PNG ...
Ornament art brushes for Photoshop
Ornament art brushes for Photoshop

Ornament art brushes for Photoshopскачат ...
Фотоклипарт - toys 8
Фотоклипарт - toys 8

Детские игрушки30 JPG | 1200x1600 ~ 4296 ...
Рамка для фотошоп – Добрый ежик
Рамка для фотошоп – Добрый ежик

Рамка для фотошоп – Добрый ежикPSD ...
Текстовый эффект. Следуем за контуром - ...
Текстовый эффект. Следуем за контуром - уроки фотошоп

Текстовый эффект. Следуем за контуром - ...
Organised chaos
Organised chaos

Organised chaos Архив содержит . EPS и . ...
mds lipgloss by morfinedoll stock - кист ...
mds lipgloss by morfinedoll stock - кисти фотошоп

mds lipgloss by morfinedoll stock - кист ...
.ICO Plugin для Photoshop
.ICO Plugin для Photoshop

.ICO Plugin для Photoshop или как науч ...
brush 065
brush 065

brush 065скачать кисти для Adobe Photosh ...

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)

Информация

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