-Рубрики

 -Цитатник

Кисти "Пузырьки" - (1)

Пузырьки "Пузырьки" Архив объемом 1,07 Мб можно скачать http://www.unibytes.com/OnYyAJt8y...

Клипарт на прозрачном фоне «1 сентября» (школьный) - (2)

http://img-fotki.yandex.ru/get/9474/20573769.5d/0_94d41_d73a12f3_L.png http://img-fotki.yandex....

Кейп - (2)

Кейп Вот еще вещица, которой я очень горда))). жаккардовый кейп Герда)). Э...

Векторные кошки - (1)

Трафареты кошек Как хорошо, что есть на свете кошки, Которые мечтают на окошке. Проснувши...

Как скачать весь альбом из Яндекс.Фото - (2)

Как скачать весь альбом из Яндекс.Фоток     ...

 -Кнопки рейтинга «Яндекс.блоги»

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 25.01.2009
Записей:
Комментариев:
Написано: 66117

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

Воскресенье, 25 Октября 2009 г. 13:46 + в цитатник
Привет, сегодня научимся "переводить" сайт из Фотошопа в формат понятный интернет эксплореру.

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




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

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

Выбираем Single Column Marque Tool (в группе Marque)
Нарезаем шаблон в HTML - уроки Adobe Photoshop


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

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

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

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


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

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

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


После того как Вы заполнили все... нажимаем Alt+Ctrl+Shift+S (или Save for Web)

окошко откроется но изображение будет покрыто чем то белым.

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


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

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

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

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


Сохраняем.

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

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

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

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


http://artjunkies.net/tutorials/1435-narezaem-shablon.html
Рубрики:  Уроки photoshop, corel draw, gimp
Метки:  

Процитировано 11 раз



pappesa   обратиться по имени Воскресенье, 25 Октября 2009 г. 14:11 (ссылка)
Добрый день! Интересно как. Вот думаю получится или нет...
Спасибо за урок...
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 14:20ссылка
pappesa, Добрый день!
Вот сама хочу попробовать сегодня!
Удачи нам в творчестве
muxcc   обратиться по имени Воскресенье, 25 Октября 2009 г. 17:11 (ссылка)
Pechalnaya_ya,

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

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


не понял, та ты он или она???
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:01ссылка
SlvX, ты видишь, на скринах логотип сайта? так вот, урок оттуда и от какого имени он написан, никому не интересно! Главное, это принцип выполнения того или иного действия.
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:29ссылка
главное в копипасте - не плагиат.. указывай автора урока, не приписывай права себе... это очень важно поверь, в отношении к тебе автора.
muxcc   обратиться по имени Воскресенье, 25 Октября 2009 г. 17:14 (ссылка)
вообще, это не фотошоп, не знаю ,вы хоть когда копируете, ходите на сайт автора, посмотрите в какой программе это делается... не путай людей... Это графический редактор в MAC OS..
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 17:59ссылка
SlvX, вообще-то это фотошоп, не пугай людей глупостями
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:03ссылка
SlvX, а ты фотошоп видел когда-нибудь? Вот на втором скрине виден логотип проги PS - вообще-то исторически - это логотип PhotoShop
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:31ссылка
Pechalnaya_ya, по больше тебя видел, уверяю..... покажи мне логотип Photoshopa на рисунке....

Ps - это не логотип... это picture seting абривиатура
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:46ссылка

ссылочка на википедию http://wiki.bks-tv.ru/wiki/Adobe_Photoshop
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:44ссылка
SlvX, пообщайся с авторами на сайте, объясни им, что они все не в курсе того, чем занимаются. Они будут счастливы, что ты их просвятишь. Хех...дурдом помноженный на апломб.
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 18:45ссылка
Pechalnaya_ya, я рада за тебя! Видимо только ты у нас посященный в этих делах. А все остальные так, мимо пробегали.
EgoEl   обратиться по имени Воскресенье, 25 Октября 2009 г. 19:38 (ссылка)
слепой ты однако, ссылка в самом тексте на сайт была, ты же по верхушкам поглазел и ведешь себя как пустышка-зануда. Терпеть не могу глупых и заносчивых людей!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку