Создаем шаблон сайта в Adobe Photoshop

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

Мы приступим непосредственно к делу и начнем создавать шаблон вашего сайта в такой замечательной программе, как Adobe Photoshop. Потому что это очень мощный графический редактор, а только в таком получится что-то стоящее. Он не единственный в своем роде, но мы поговорим именно о нем.

Итак, приступим. Для начала конечно откройте программу на компьютере. Если у вас ее нет, не поленитесь и скачайте. Лучше всего купить photoshop у официальных дилеров Adobe.

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

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

Дальше вы должны выбрать еще одно разрешение — 72 пикселя на один дюйм. Затем выбрать цвет. Желательно RGB. Если вы не гениальный программист, то эти установки нужно сделать обязательно. Потому что если вы были гениальным программистом, вы бы не читали эту статью. А сейчас даже толком не понимаете, как это будет выглядеть с такими установками. Поэтому рекомендуется сразу делать.

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

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

А теперь приступим к самому главному. На верхней панели инструментов выбираете пункт «Просмотр». В этом пункте выбираете подпункт «Направляющие». В этом подпункте вы должны активировать отображение линеек и направляющих. Для чего это нужно, вы узнаете чуть позже.

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

Когда вы справились с небольшой релаксацией, снова откройте пункт «Просмотр», подпункт «Привязка». Здесь вам ничего не нужно устанавливать или нажимать, просто убедитесь, что привязка ко всем направляющим, а также к границам документа включена. Это очень важно.

Приступаем к самому волнительному. Графический редактор Adobe Photoshop оснащен таким инструментом, как «Текст». Вот с помощью этого чудо-инструмента введите название, например «Агентство праздников «Одуванчик», под этим названием введите главный слоган вашей фирмы. Придумайте сами. Напротив этой надписи, в правом верхнем углу, а надпись соответственно находится в левом, оставьте контактный номер телефона. Пользователи больше доверяют тем сайтам, которые позволяют мигом найти контактную информацию.

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

А теперь в левой боковой панели выберите пункт «Формы». Вы наверное уже догадались, что мы будем делать. По условиям нашего примера, ведь это только пример, выберите прямоугольник. Края у него должны быть закруглены (радиус закругления — 8 точек). Это будет как дополнительный фон для изображения в шапке сайта. Он должен контрастировать с основным фоном. Лучше всего контрастирует с желтым синий. Ну, само изображение зависит только от вас.

Дальше мы снова обращаемся к замечательной функции «Текст». Выбираем шрифт Georgia и делаем такую важную и нужную вещь, как панель навигации по сайту. Не оставляя этот замечательный инструмент, с помощью шрифта Arial вставляем основной текст. Кстати, панель навигации делаем над изображением, основной текст под ним. Желательно сделать его блоком.

Снова возвращаемся в «Формы», выбираем функцию «Прямая». Кстати, справа от текста можно тоже вставить изображение, просто переместив сам текст. С помощью функции, которую мы открыли, мы должны поставить большую точку в разработке первой страницы в виде линии под текстом.

Как заключительный штрих вы должны с помощью функции «Текст» под заключительной линией предыдущим шрифтом сделать копирайт в подвале страницы.

А теперь нужно подготовить вашу страницу к верстке. В этом вам поможет инструмент «Раскройка». Лучше выделить изображения.

Ура, ваш эскиз готов.


Комментировать