Создать шаблон сайта – Шаблоны сайта | Бесплатные шаблоны сайтов HTML5

Как сделать дизайн сайта в фотошопе

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

3. Включаем линейки. Во время работы они понадобятся, ведь линейки позволяют очень точно отмерять расстояния. Проверьте, включены ли линейки у вас. Если да, то вы увидите шкалы рядом с левой и под верхней панелью инструментов.

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

Линейки должны показывать величину в пикселях. Чтобы переключиться на них с другой меры длины, щёлкните на линейке правой кнопкой мыши и в открывшемся меню установите соответствующий флажок.

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

На появившейся вверху панели жмём кнопку Зеркальный градиент, выбираем цвет на палитре левее.

Используя инструменты открывшегося окна Редактор градиентов, выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

Так как разрешение экрана нельзя предугадать, из созданного фона можно вырезать полоску толщиной в один пиксель и сохранить как картинку. Браузер будет заполнять задний фон ею по всей ширине.

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.

9. Создаём верхнее меню. С помощью инструмента Горизонтальный текст добавляем на макет первый пункт меню — Главная. Слой создастся и даже переименуется автоматически, так что с ним можно ничего не делать.

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

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

13. Переходим к боковой панели. Для начала создадим и сохраним отдельным файлом градиентную заливку для её заголовков. С инструментами знакомы, пояснения не требуются.

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется — Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

www.seostop.ru

Как создать шаблон сайта?

Каждому начинающему веб-разработчику для создания сайта, прежде всего, нужно изучить основы языка разметки HTML и таблицу стилей CSS. Именно с помощью этих двух языков разметки, вы сможете успешно «построить» шаблон сайта.

Общие понятия о веб-дизайне

Перед тем, как создать шаблон сайта, мы рекомендуем для начала вкратце изучить, что же все-таки подразумевается под понятием «шаблон сайта». Это совокупность сверстанных и оформленных в HTML и PHP страниц с использованием графических и служебных файлов. Все они могут использоваться для построения типового сайта любой направленности. Все шаблоны сайтов, как правило, должны состоять из графических файлов, при этом наиболее распространенные форматы — это PNG, JPEG, GIF, они должны помещаться в отдельную папку.

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

Качественные шаблоны сайтов, как правило, должны разрабатываться профессиональными дизайнерами, html и php-верстальщиками. Данные шаблоны сначала подготавливаются для использования в html-редакторах. Рассчитаны они на начинающих веб-мастеров, поэтому они могут послужить основными образцами для создания сайтов. Найти сами шаблоны для веб-сайтов в Интернете не сложно. Количество ресурсов, предлагающие бесплатные или платные шаблоны сайтов сегодня непрерывно растет, при этом дизайн этих шаблонов является  разнообразным и может удовлетворить многих веб-мастеров.

Использование шаблонов

Веб-шаблоны могут использоваться любым лицом или организацией, цель

elhow.ru

Как создать шаблон для сайта

В наше время для достижения успеха коммерческим компаниям нужно уделять внимание многим мелочам. Важным фактором эффективности бизнеса является представление информации о компании на просторах Интернета. Чтобы создавать качественные сайты, необходимо обращаться к настоящим профессионалам, таким как http://web-gate.org. В случае если вы планируете создавать большую площадку, на которой будет много страниц, то нужно представлять себе, каким образом выполняется шаблон.

Зачем он нужен

Шаблон выглядит как макет, демонстрирующий, каким образом на сайте будет выглядеть материал. Здесь могут задаваться требования по отображению таких элементов, как:

  • «шапка»;
  • меню сайта;
  • основной контент.

Содержимое элементов при этом задаётся внутри шаблонов. Кроме того, можно использовать систему управления.

Создание шаблона

Прежде всего, следует понимать, что такой элемент чрезвычайно полезен верстальщикам и программистам. Он упрощает их работу. Чтобы получить макет, вы можете сделать обычный документ в формате html. Здесь должна быть логика представления составляющих на страницах. Параллельно с этим создаётся файл для управления отображением. Тут самым подробным образом прописываются настоящие параметры.

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

design-mania.ru

Особенности создания сайтов на основе шаблона

Существуют формы веб-страниц, которые в процессе работы необходимо наполнять графической, текстовой и другой информацией. Сегодня, используя шаблоны сайтов, создать Интернет-ресурс может абсолютной каждый: и домохозяйка, и пенсионер, и олигарх, и даже школьник. Необходимые шаблоны сайтов можно скачать бесплатно или приобрести за деньги. Все зависит от функций, которые будут применяться в дальнейшем. Средняя цена на профессиональные шаблоны сайтов колеблется от 20 до 70 долларов, а самые простые и необъемные шаблоны сайтов можно купить за 1 – 3 доллара. Такие цифры существенно отличаются от цен, предлагаемых студией веб-дизайна.

Стоимость шаблонов сайтов обусловлена разными факторами. Например, подобранный трафарет может в себе содержать готовую графику, логотипы, флеш-анимацию. Обычно, просматривая наполненные шаблоны сайтов, легко можно редактировать и менять их содержимое. Есть возможность вставлять картинки, менять цветовую гамму и шрифт. Шаблоны сайтов позволяют за короткий отрезок времени запустить самый сложный Интернет-проект. Например, Интернет-магазин, сайт консалтинговых услуг или созданный проект для общения в сети.

Продажа шаблонов сайта предоставляется информационным агентствам, фармацевтическим компаниям, автосервисам, туристическим агентствам, службам проката и доставки. Разрабатывая сайты, веб-дизайнеры используют всю свою фантазию, поэтому всегда можно подобрать готовую форму для заказчика, независимо от его рода деятельности. Компании, занимающееся продажей шаблонов, нередко предлагают дополнительные услуги по оптимизации сайта в поисковых системах, наполнение его контентом, продвижение проекта в Интернете, последующие сопровождение сайта. Это значит, что если вы купили шаблон сайта, а свободное время и для его заполнения нет, то специалисты обязательно это сделают вместо вас.

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

freehtmlthemes.ru

html шаблон, или как сделать сайт без больших затрат