Отправляет email-рассылки с помощью сервиса Sendsay

Photoshop и Dreamweaver интеграция

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
victor

Статистика

8 подписчиков
0 за неделю
←   Все выпуски   →

Photoshop и Dreamweaver интеграция Разметка макета


«Photoshop и Dreamweaver интеграция»

Здравствуйте уважаемый подписчик.

Предлагаю вашему вниманию четвертый выпуск рассылки «Photoshop и Dreamweaver интеграция»

Сегодня приступим к созданию макета будущего сайта. Создадим файл нашего макета, сделаем разметку основных элементов страницы.


Запустим фотошоп, и для начала нам нужно создать новый файл. Для этого можно пойти двумя путями: нажать комбинацию клавиш (Ctrl+N), или через главное меню программы (Файл >> Cоздать).


В обоих случаях откроется диалог создания файла, который вы видите на картинке.



Где можно задать имя вновь создаваемого файла. Выбрать параметры нового файла из списка «Набор». На данном этапе воспользуемся ручным вводом значений Ширины и Высоты файла.

Причем значение Ширины установим 950 пикс. Именно по этой ширине и будет размещаться все содержимое наших веб-страниц. Значение «Высоты» можно выбрать любым я установил 1000 пикс. В процессе работы над макетом без проблем можно увеличить или уменьшить это значение.


Установим разрешение: 72пикс/дюйм. Эта величина говорит нам о том, сколько цветовых точек приходится на единицу длинны. Это стандартное разрешение изображений для вывода на монитор. Откроем вкладку дополнительно и установим значение «Цветового профиля» sRGB IE61966-2,1. Этот цветовой профиль отображает характеристики среднего монитора. То есть наш сайт, с точки зрения передачи цветов, будет отображаться примерно одинаково на любых мониторах.


Нажимаем кнопку ОК, и перед нами новый пустой документ, наше поле для деятельности. Теперь нам надо его разметить, что бы ориентироваться в границах нашей страницы. Для начала отобразим линейки , ведь нам нужно чем то измерять рассеяния на наших страницах, для этого также можно воспользоваться несколькими способами:



Воспользоваться кнопкой «Показать вспомогательные элементы» и из списка выбрать пункт «Показать линейки». Через главное меню (Просмотр >> Линейки) или комбинацией клавиш (Ctrl +R)

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


Познакомится с ними через (Редактирование >> Клавиатурные сокращения…) или (Alt+Shift+Ctrl+K).



Теперь нам требуется задать единицы измерения линеек. Поведем курсор к любой из линеек, щелкнем по ней правой кнопкой мыши и выберем из открывшегося списка пункт пикселы. Стандартные единицы измерения для веб-дизайна.


Задать единицы измерения для всех  создаваемых файлов можно использую команду установки (Редактирование >> Установки >> Единицы измерения и линейки…).



Продолжим работу. Мы создали наш документ шириной 950 пикс.  То есть по ширине основного содержимого, что не очень удобно в процессе работы так как постоянно  будем натыкаться на края в выходить за них. Нам нужно несколько увеличить ширину документа, но при этом не потерять наш заданный размер.

Воспользуемся для этого направляющими (Просмотр >> Новая направляющая) Установим  Ориентацию «Вертикальная», Положение  «0пикс». Нажмем ОК и получим первую направляющую.



Теперь ограничим правый край, (Просмотр >> Новая направляющая) Ориентация «Вертикальная», Положение  «950пикс» ОК. Мы имеем  уже две направляющие с заданным расстоянием 950пикс.

Увеличим наш документ в ширину (Изображение >> Размер холста…) или (Alt+Ctrl+C) и в диалоге команды установим значение «Ширина»  600пикс.  Значение высоты не изменяем и при этом установим флажок «Относительная»,  для увеличения размеров от существующего края ОК.

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



Сделаем горизонтальную разметку для блока формы подписки на рассылку, блока логотипа, меню и блока слайдера. Так же используем направляющие.

Для блока подписки (Просмотр >> Новая направляющая) Ориентация «Горизонтальная», Положение «48пикс».



Для блока логотипа: Ориентация «Горизонтальная», Положение «148пикс». Блок меню: Ориентация «Горизонтальная», Положение «195пикс». Слайдер: Ориентация «Горизонтальная», Положение «535пикс». Такие значения получаются потому что фотошоп ведет отсчет от нулевой точки а именно от верхнего левого углабокимента. По окончании манипуляций у вас должен получится документ такого вида.


Сохраним документ (Ctrl+S). И продолжим работу в следующем выпуске рассылки.


Хотите ускорить работу?  Обратите внимание на видеокурс «Photoshop и Dreamweaver интеграция». Подробнее о видеокурсе здесь…

Хотите научится самостоятельно создавать профессиональные веб-сайты?
От разработки концепции до размещения готового интерактивного сайта в сети интернет?

Тогда видеокурс «Photoshop и Dreamweaver интеграция»- для Вас! Подробно о видеокурсе узнать Здесь…

 

С уважением автор рассылки Виктор Докучаев
В избранное