Как из макета сделать шаблон? задал вопрос пользователь и приложил
скриншот макета который на самом деле уже готовый и используется как на ucoz так и на DLE
Вопрос задается часто, но прежде всего могу сказать сразу что новичок не сможет создать сам шаблон сайта, так как тут нужны знания фотошопа, иметь опыт в нарезание деталей графики, и умение так же распределить что останется графикой а что буде сплошным цветом, так же нужно знать что чем меньше весит сайта графика тем он быстрее загружается в браузере у пользователя, ну а после разрезания нужны знания HTML для грамотной верстки.
Конечно же не кто не начинал сразу создавать интересные и правильные шаблоны, все начинали с уродливых проектов и после поднятия своего опыта становятся истинными мастерами своего творчества.
Для первых шагов в познание и понимание этого процесса я предлагаю научится делать детали дизайна, после усвоение тонкостей не проблема будет создать и большой проект к которому вы стремитесь.
Я хочу вам переложить свои
Видео урок верстки рамки баннера и создание таблицы для графики и еще один урок не мало важен
Видео урок создание шапки резиновой и верстка ее для сайтов ucozНазвания уроков говорят сами за себя.В 1 уроке Пример на баннере размером 468х60
размер рамки составляет 488х80 что значит +10px на каждую сторону, во втором уроке наглядно показано как создать в фотошопе шапку, разрезать ее и произвести миниатюрную верстку.
Как сделать графику это дела каждого и разное по своей уникальности, верстка и разрез так же уникален но по одному принципу.
Существует два типа натягивания графики на проект
1 это табличный (
<table><tr><td></td></tr></table>) что показан в уроке, для меня он самый простои и удобный, для многих этот тип сложен
2 это дивный (
<div> </div>), помогает использовать удобно стили и занимает мало места и является в загрузке наиболее быстрым чем табличный
Для верстки очень эффективно используют программы что улучшает качество создания, одна из этих лучших программ
Dreamweaver но что бы ей уметь пользоваться необходимо опять же знать язык HTML. Dreamweaver хорошо используется в совмещение с Photoshop то есть с его исходниками вашего проекта в формате PSD.
В фотошопе вам необходимо удобно разложить все элементы графические по папкам подписав их для вашего же удобства как показано на скрине
Если создавать разрезание и сохранение то всем известно что для этого используется инструмент перо, которым вы можете с точностью до пикселя устанавливать размеры деталей вашего проекта, после расчерчивания или разрезания ваш макет выглядит таким образом
далее остается только сохранить но не картинкой а картинкой вместе с HTML кодом.
После сохранения ваше творение раскладывается по папкам отдельно графика и и отдельно страница , если кликнуть по файлу страницы то вам выдаст в сборке вашу работу, если выделить все то будет видно как по деталькам разрезан сам рисунок или макет, дальше нужно знания языка ХТМЛ что бы подредактировать и залить веб графику на сайт предварительно заменив ссылки на сами элементы проекта.
Лично я исходя из своих знаний стиля CSS и языка ХТМЛ делаю это все сам используя только блокнот.. вам кажется это сложным, но уверяю вас спустя пол года активного изучения и самостоятельного составления дизайнов и их верстки вы будите так же писать код всей страницы используя только программу Фотошоп и Блокнот. Достаточных знание и совета можно получить на нашем форуме
Фотошоперу / Уроки по фотошопу где все знатоки поделятся всем тем чему сами научились и считают полезным для знания о том как создавать свое и неповторимое.
Вот в принципе мой ответ на вопрос пользователя нашего сайта. Удачи вам начинание создания красивого дизайна.
