Создание шаблона сайта в Photoshop
Чтобы ваш ресурс не прослыл в Интернете чьим-то «клоном» и тем самым не потерял свой имидж, я настоятельно вам рекомендую не использовать при разработке дизайна своего сайта взятый в Интернете шаблон. Гораздо лучшим вариантом будет создание шаблона сайта самостоятельно, например, в Photoshop. Чтобы облегчить ваш труд, позвольте дать вам по этому поводу несколько рекомендаций.
Если вы не можете похвастаться свободными знаниями в Photoshop, то для начала вам следует ознакомиться с основными инструментами и функциями. Поскольку сейчас в Интернете можно найти все, воспользуйтесь этим и найдите хороший самоучитель. Буквально пара уроков поможет вам узнать азы, а дальше будет значительно легче, так как Photoshop при минимальных трудах и знаниях позволит создать первоклассное изображение, будь то логотип, дизайн сайта или анимация.
Итак, теперь приступим к самому созданию шаблона сайта. Я думаю, значительно облегчит поставленную задачу наличие схематического наброска. Имея предварительный эскиз, намного легче осуществить дизайн, соответствующий всем вашим требованиям.
Когда вы будете «укладывать» ваш шаблон на код, намного легче будет применить «резиновые» размеры, а пока нам придется довольствоваться фиксированными, так что, при создании шаблона сайта используйте размер листа в Photoshop, равный примерно 1000х1500 точек.
Придерживайтесь четко указанного плана, начните с «головы», постепенно переходя к полям навигации и основного текста и заканчивая «подвалом». Старайтесь основной фон сделать однотипным, без перегрузки графикой, страница должна быть «легкой на подъем», то есть на скорость загрузки. В противном случае, посетитель не сможет полюбоваться на ваш супер-оригинальный дизайн, не дождавшись его открытия и перейдя на ресурсы-конкуренты.
Итак, когда шаблон графически готов, остается только подвести его к финалу, а именно, подготовить к верстке. Из одной цельной страницы, которая у нас получилась, нам нужно выделить все основные элементы по кусочкам. Для этого применяется инструмент, в народе прозванный «ножик» – Slice Tool. Он позволяет из общей картинки вырезать отдельную ее часть.
Для того, чтобы запчасти нашего сайта сохраняли должную «легкость» и все вместе не стали обузой, при сохранении каждой части рисунка пользуемся функцией Save for Web. Качество не следует делать идеальным, то и переусердствовать тоже не нужно.
И вот, когда создание шаблона сайта в Photoshop подошло к своему логическому завершению, дело осталось за внедрением нашего графического дизайна в дизайн программный, в чем я искренне желаю вам успехов!
Подходящие статьи
2leep.comПонравилась статья? Оставьте комментарий или подпишитесь на RSS рассылку.
Комментарии
С резиновостью нового шаблона постоянно случались проблемы, для меня это самая сложная часть сборки макета.
web прав. Даже те слайсы можно было графически на скрине показать.
От себя скажу, что не всегда за резиновостью нужно гнаться, смотря от типа макета..
а в целом статья получилась хорошая, сами писали?
Для эксклюзивности к работе с шаблоном можно добавить флеш анимацию. Красиво смотрится правда жрет ресурсов на сервере немеренно. Зато все, что в единичном числе то и любят поисковики!
Одно дело накидать макет, а уж совсем другое, сверстать из этого макета готовый шаблон. Для этого вроде как, плагин к фотошопу вышел?!
Я лично как пользователь полностью поддерживаю оригинальность не только в контенте, но и в графике, поскольку приятно видеть не инкубатор, а индивидуальность человека.
Сейчас поисковые системы переобули свои алгоритмы и в связи с жесткой конкурентной борьбе за места в топ решили научить роботов распознавать и графические элементы. Что ж и в этом есть смысл и логика так будет даже справедливей.
Ну а если не владеешь всеми феничками, то на что тогда интернет и мозг? Инет научит всему нужно только иметь желание.
В фотошопе красиво получается, но все равно это муторное дело для тех кто вообще не шарит в фотошопе или хоть маленько шарит. Да, есть прога Artisteer 3 для создания шаблонов, но все равно как то не так. Лучше заказать шаблон(если есть деньги) у профессионалов своего дела. 
Очень познавательно – пишите еще.