РАБОТАЮ ВО ВСЕХ ГОРОДАХ РОССИИ

ВРЕМЯ РАБОТЫ С 9:00 ДО 20:00

Макет бизнес сайта с чистым дизайном

Обновлено vebmaster от 15.08.2012 22:03

Как создать макет сайта psd

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

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

Веб-дизайнер, когда выполняет ваш заказ на изготовление логотипа или другой графики в векторе, по вашему желанию присылает исходинк в формате, совместимом с фотошопом. Не каждый будет ставить тяжелую программу иллюстратор на свой комп или другой векторный редактор. А фотошоп очень распространенная программа для вебмастеров.

Вот что мы будем создавать:

]]>]]>

Ресурсы, использованные в этом уроке:

Создание Фона

Создайте новый (Ctrl + N) документ 1200 х 1140 px с белым фоном. Выберите Rectangular Marquee Tool (Прямоугольная область), (M) и, выделив верхнюю часть холста, залейте (G) ее черным цветом # 000000.

Добавьте эффект Gradient Overlay (Наложение градиента) с настройками, указанными ниже.

Далее снова возьмите Rectangular Marquee Tool (Прямоугольная область), (M) и выделите верхнюю половину предыдущей формы, залив ее черным # 000000. Затем перейдите в Filter > Render > Lens Flare (Фильтр > Рендеринг > Блик) и установите блик ближе к левому, верхнему углу нового прямоугольника.

Теперь измените blend mode (режим смешивания) на Screen (Экран) и у вас получится что-то вроде этого:

Скачав ]]>здесь]]> приглядевшиеся вам "небесные" кисти, укройте облаками нижнюю, голубую часть рисунка и контрастную границу с верхней, синей областью в основном на флангах холста, а в середине она закроется другими элементами шапки сайта.
Если не удается спрятать границу за облаками, можно воспользоваться маской слоя (layer mask).

Создание области репрезентации в шапке сайта

Выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом около 20 рх.

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

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

Теперь нам нужно срезать по одному углу на новых прямоугольниках. Включите Pen Tool (Перо) и на панели настроек сверху выберите функцию Subtract From Shape Area (Вычесть из области фигуры).

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

А сейчас скачайте и откройте в Photoshop ]]>голубые абстрактные обои]]>. Разблокируйте фоновый слой, дважды кликнув по нему, и, выделив (Ctrl+A), скопируйте (Ctrl+C) изображение в буфер обмена. Затем перейдите в основной документ и создайте выделение вокруг фигурного прямоугольника, кликнув по его миниатюре в палитре слоев с нажатой клавишей Ctrl. Теперь следуйте в Edit > Paste Special > Paste Into в (Редактирование > Спец. вставка > Вставить в).

Картинка обоев должна появиться в контуре комбинированной фигуры, а также поддаваться перемещению (V) и трансформации (Ctrl+T) внутри. Если команда специальной вставки сработала, старый прямоугольник можете спрятать. Расположите обои таким образом, чтобы похожий на цветок рисунок оказался в левом верхнем углу прямоугольника, а затем добавьте следующие стили слоя:

Ваш результат должен быть таким.

Добавляем в шапку текст

Верхняя часть макета с бликом более всего подходит для размещения здесь названия сайта и какого-нибудь слогана. Я использовал шрифт verdana, а цвета подобрал на рисунке обоев среди оттенков синего с помощью пипетки (Eye Dropper Tool), (I).

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

Создание навигации

Выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами), (U) с радиусом закругления 20 рх, и позади комбинированной фигуры (ниже этого слоя в палитре слоев) растяните прямоугольник, выступающий в виде панели справа сверху, аккуратно выровняв его правую сторону с передней фигурой.

Приладив новый прямоугольник, добавьте ему следующие стили:

Внутри созданной панели добавьте текст навигации.

Завершение оформления шапки

Ниже фигурного блока добавьте, немного отступив, простую форму контактной информации. Начните со ссылки "СВЯЖИТЕСЬ С НАМИ", заключив ее в маленький, скругленный прямоугольник, и добавьте рядом предложение обращаться в вашу компанию.

Добавьте прямоугольнику следующие стили слоя:

Примерно так у вас должно получиться:

Наконец, в нижнем правом углу фигурного прямоугольника добавьте четыре маленьких кружочка, применив инструмент Ellipse Tool (Эллипс), (U).

Эти кружочки-кнопки намекают на то, что область репрезентации в шапке сайта может быть функционально реализована, как слайдер контента jquery.

Создание области главного контента

Данная область представлена тремя блоками контента и маленькой галереей. Начните с трех квадратных блоков, выбрав Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом 20 рх.

Каждому блоку добавьте следующие стили:

Ваш результат должен быть примерно таким:

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

Создание галереи

Выбрав Rectangle Tool (Прямоугольник), создайте четыре фигуры и залейте каждую серым цветом #f1f1f1.

Скопируйте в буфер обмена (Ctrl+C) одну из картинок для вашей галереи. Затем создайте выделение вокруг первого прямоугольника, кликнув на миниатюре фигуры в палитре слоев с нажатой клавишей Ctrl, и, перейдя в Select > Modify > Contract (Выделение > Модификация > Сжать), сократите выделение на 5-10 рх. Теперь вставьте в прямоугольник сохраненную картинку, перейдя в Edit > Paste Special > Paste Into (Редактирование > Спец. вставка -> Вставить в).

Повторив предыдущие действия для трех остальных фигур, вы получите примерно такую картину:

Создание подвала

Скопируйте фигурный прямоугольник в области шапки и перетащите дубликат в самый низ холста. Затем перейдите в Edit > Transform > Flip Horizontal > Flip Vertical (Редактирование >Трансформирование > Отразить по горизонтали > Отразить по вертикали).

Внутри выступа сверху слева вставьте какие-нибудь иконки социальных сетей, скачав их из набора ]]>Elegant Social Icons.]]>
Затем добавьте в подвал свою информацию об авторских правах (copyright).