Главная » Статьи » Уроки Фотошоп » Работа с фото |
переводим сайт из Фотошопа
Привет, сегодня научимся "переводить" сайт из Фотошопа в формат понятный интернет эксплореру. Вот возьмем к примеру этот шаблон здесь Скопируем файл.. и откроем в фотошопе... склеиваем все слои. Выбираем 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 формат и нарезана. Спасибо ! Источник: http://artjunkies.net/tutorials/1435-narezaem-shablon.html | |
Просмотров: 731
| Теги: |
Всего комментариев: 0 | |