как создать разлинеенный документ

Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:

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

- включаем шкалу-линейку для документа, идем Views Rules (Вид Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

- отобразим палитру History (История) идем Windows History  - с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.

- поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) данная настройка позволяет выбрать любой слой по клику на нем. 

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

2. Перед началом работы произведем некоторые настройки фотошопа:

Настройка фотошопа1. Открываем фотошоп и создаем новый документ File New (Файл Новый или CTRL+N в скобочках вместе с переводом буду указывать сокращения проще говоря горячие клавиши - если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).В окошке я указал следующие параметры:

Приступим к созданию нашего дизайна в фотошопе.

1. Фон и подложка для сайта;2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)3. Слайдер, в просторечье карусель;4. Поиск по сайту;5. Основной контент (сами новости);6. Сайдбар - боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)7. Пейжер - постраничная навигация по сайту;8. Футер - нижняя часть сайта.

Для работы с дизайном нам понадобятся следующие файлы ( ):- фон с бабочками (для шапки сайта);- шрифты;- картинка c девушками;- картинки для слайдера;- иконки социальных сервисов;- картинки для новостей;- картинка рассылки;- картинка счетчика.Перед началом работы разделим наш дизайн на составляющие:

Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас. 

Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате -

(нажмите на картику для просмотра оригинала)

Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).

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

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

Дорогие друзья, сегодня я хочу показать вам как можно сделать дизайн сайта в фотошопе.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто! | Авторские уроки Adobe Photoshop для начинающих, заработок в интернете, блоггинг, создание сайтов