Для того, чтобы создать шаблон для нашего будущего сайта на HTML, нам потребуется программа Adobe Photoshop. Для тех у кого нет Photoshop, советую скачать и установить его, в любом случае, он потребуется в дальнейшем при создании сайтов.
Итак, открываем Photoshop и создаем новый документ «Файл» — «Новый». Здесь нам необходимо сразу указать высоту, ширину, разрешение, цветовую гамму и др. Прописываем все как показано на скрине:
Перед нами откроется пустой документ. Теперь нам необходимо точно так же, как и в HTML документе, визуально разбить его на части, аналогичные ячейкам таблицы. Для этого нам понадобятся направляющие.
Если у вас не отображается линейка, включите её «Просмотр» — «Линейки» и простым перетаскиванием мыши прямо с линейки вытаскивайте направляющие и разбивайте ваш шаблон, как показано на рисунке:
Для наглядности сразу выбираем фон нашего сайта и закрасим его, например, зеленоватым цветом #cccc66. Для этого создаем новый слой в Photoshop, кликаем на панели инструментов «Палитра цветов» и прописываем нужный нам цвет. Зажимаем горячие кнопки ALT+Backspace и ваш документ должен закрасится в цвет, который мы указали #cccc66. Вы можете выбрать любой цвет.
ОК, продолжаем создание нашего сайта на HTML. Теперь нам необходимо разметить области нашего сайта, то бишь шапку, меню, кнопочки и др. Для этого создаем еще один слой, выбираем инструмент, который у меня называется «Прямоугольная область», у вас он может называться по другому.
Выделяем шапку нашего сайта, с помощью клавиш ALT+Backspace (точно так же как и фон) закрашиваем нашу шапку, например, белым. Далее нажимаем CTRL+T один раз, зажимаем клавишу ALT и уменьшаем шапку строго по отношению к нашей области. Должно получится нечто подобное:
Точно так же делаем и другие области. Можете сделать рамку у блоков, изменить цвет, наложить градиент, добавить тень. Для этого нужно выделить слой с зажатой клавишей CTRL и воспользоваться функциями Photoshop.
Здесь просто выбираем нужную нам функцию, например обводка, указываем цвет и размер линии обводки в пикселях.
Аналогичным образом создаем другие элементы для всех областей сайта.
Плюс на кнопочках можно прописать названия, сделать это можно и на HTML, но мы сразу сделаем графичные кнопки. Выбираем инструмент «Текст» и на кнопочках прописываем названия, например «Главная», «Об авторе», «Контакты» и «Услуги».
Добавляем картинку в шапку сайта, для этого просто открываем файл с нужным нам изображением и простым перетаскиванием мышки, размещаем картинку в верхнем блоке. Изменить размер картинки вы можете с помощью горячих клавиш CTRL+T.
И в итоге у нас должно получится нечто подобное:
Вот в принципе и все, наш шаблон для сайта готов! Осталось разрезать его на области и сохранить отдельные элементы в нужном нам формате.
Выбираем инструмент «Раскройка» и выделяем им каждую область нашего сайта.
Далее сохраняем все это дело, меню «Файл» — «Сохранить для WEB». Выбираем формат .PNG и сохраняем. В итоге у вас должна появиться папка на Рабочем столе с готовыми блоками нашего сайта. Переносим эти файлы в нашу папку с сайтом.
Комментариев нет:
Отправить комментарий