Прежде всего, воссоздадим будущий фронт работ на бумаге, чтобы мы могли свободно ориентироваться при создании графики. Ведь наверняка у вас есть много планов и пожеланий, так вот «бумажная» версия нужна нам именно для того, что зафиксировать их и не забыть позднее. Выполняйте набросок в схематичном виде, и если нужно, делайте сноски на какие-либо элементы, требующие особого внимания.
После этого можно начинать реализовывать шаблон сайта в Photoshop. Запускаем саму программу и затем открываем в ней новый лист, ориентировочные размеры которого должны составлять 800х100 точек. Мы будем воссоздавать всю страницу полностью, такой, какой она предполагается для отображения в проводнике. После этого планомерно вырисовывайте каждую деталь, начиная с верха, то есть с шапки, и постепенно переходя далее.
Чтобы сделать элементы пропорционально равными, можно использовать функцию разлиновывания. Вы можете применить свою фантазию по максимуму, но не переборщите с графикой, ведь не стоит забывать, что если страницы будут долго грузиться, посетитель может вообще не дождаться открытия, а, следовательно, так и не оценить ваших талантов.
После того, как вы завершили свой шаблон сайта в Photoshop, вам необходимо позаботиться о том, чтобы внедрить его в код. Поскольку в HTML мы будем складывать свой дизайн по кусочкам, вам следует с использованием «Ножика» (Slice Tool) вырезать каждый элемент и сохранить его. Для оптимизации изображений выбирайте функцию «Сохранить как», где вам будет предложено сохранение в различных форматах и со всевозможными размерами. Постарайтесь выбрать оптимальные варианты.
Если какие-то части фона имеют один тон на протяжении больших промежутков, вырежьте только их минимальный кусочек, позднее в HTML вы растянете его до необходимых размеров. Так вам удастся лишний раз сэкономить на размере страницы. Ну и вот, наш шаблон сайта в Photoshop полностью готов, так что можно начинать верстку! Но это уже совсем другая история…
Пост про то, как создать свой сайт своими силами.
Комментариев нет:
Отправить комментарий