Форум
У каждого вебмастера или блогера рано или поздно появляется идея:
«Я хочу создать для своего сайта дизайн!»
«Именно создать, а не использовать готовый и бесплатный шаблон!»
И это довольно таки правильная мысль.
Согласитесь: иметь уникальный дизайн, который стоит только на вашем сайте намного лучше, чем использовать бесплатный шаблон с ужасным дизайном.
Ведь найти бесплатный шаблон, который при этом был бы красивый и нравился бы вам очень сложно.
Приходиться рыться в куче мусора и бреда.
Многие люди, которые создают бесплатные шаблоны для сайтов, и выкладывают эти шаблоны в открытый доступ, просто хотят нарастить себе ссылочную массу.
Ведь согласитесь, многие могут насоздавать тупых шаблонов для сайта при этом используя страшный дизайн.
Зачем им это?
Они просто хотят поставить в эти шаблоны ссылки на свои проекты.
Многие из вебмастеров при использовании бесплатного шаблона взятого со стороннего сайта не убирают из него ссылки — а зря.
Ведь иногда этот шаблон, просто не заслуживает ни то, что установки, но и просто взгляда на него!
Именно поэтому мы будем учиться создавать свой, уникальный шаблон для сайта. А так же создавать для него свой уникальный дизайн!
Ах, да вернёмся к теме рытья в куче мусора и бреда.
После нескольких часов этого «рытья», вы находите нечто похожее на то, что искали.
И видите, что этот шаблон уже скачали 100 тысяч раз.
Обидно неправда ли?
Поэтому сегодня мы с вами будем создавать для себя свой собственный дизайн!
И когда мы его создадим, мы будем уверены, что такого дизайна нет больше ни у кого!
Итак, я начинаю курс под названием:
«Создаём шаблон и дизайн для сайта».
Он будет состоять из трёх частей:
- Создание дизайна;
- Подготовка к вёрстке;
- Вёрстка;
Изучив этот курс вы с лёгкостью сможете создать для своего сайта тот дизайн, который нравиться именно вам!
Ну, хватит слов, давайте уже начнём действовать!
Первым делом узнаем то, что нам понадобиться для создания дизайна:
Photoshop.
Для того, чтобы создать свой дизайн вам нужен только Photoshop, ну или любой другой графический редактор, например Gimp.
После того как эта программка появилась у вас на компьютере, мы запускаем её и начинаем создавать наше детище.
Перед тем как начать хочу сказать следующее:
Я покажу вам, как создать дизайн для вашего сайта, но я буду создавать простенький дизайн, а не супер крутую штуку.
Поэтому старайтесь не копировать изображения у меня, а ищите то, что подойдёт вашему сайту.
Итак, приступим.
1)
Создаём новый файл размером 1200х1600, фон ставим прозрачный.
2)
Для удобства мы задействуем инструмент «Линейки», вызвать его можно двумя способами:
Нажатием Ctrl + R или «Просмотр» — «Линейки».
Так же задействуем «привязку», её можно активировать двумя способами:
Shift + Ctrl + ; или «Просмотр» — «Привязка».
3)
Теперь нажмём «V» и установим наши линейки в нужных нам местах:
По горизонтали:
325 px; — левая граница шаблона.
970 px; — граница боковой колонки.
1270 px; — правая граница шаблона.
Таким образом, ширина у нашего шаблона будет равно 920 пикселям.
И этого более чем достаточно.
По вертикали:
170 px; — граница шапки.
Напоминаю вам, что вы можете проставить свои размеры.
Теперь посмотрим, что у нас получилось.
Я залил фон белым цветом, чтобы вам было лучше видно:
4)
Теперь будем делать фон нашего шаблона, для этого желательно найти картинку, которая бы имела следующие характеристики:
- Небольшая
- Мало весит
- Может повторяться.
Например, я нашёл вот такую вот картинку:
Подобные картинки вы можете найти на этом сайте:
Сайт с шаблонами.
Теперь вставляем эту картинку в наш шаблон, причём вставляем много раз, чтобы полностью заполнить фон.
И смотрим на то, что у нас получилось:
Как видите фон готов!
5)
Теперь добавим фон для шапки сайта, это нужно сделать заранее, чтобы сразу знать, как обрамлять наш шаблон.
Ищем в Интернете подходящее изображение для шапки и вставляем его в наш шаблон.
Помним, что оно должно быть не выше той границы, которую вы указали.
Тоесть не выше 170 px; и не шире 920 px (для моего шаблона).
Итак, вставляем нашу шапку, подгоняем её по размеру и смотрим, что у нас получилось:
6)
Проводим границы.
При помощи «карандаша» проводим границы нашего шаблона.
Ориентируясь при этом на наши вспомогательные линии.
После того как вы провели границы, мы можем отключить наши линейки.
И посмотреть на то, что у нас получилось:
7)
Внутренний фон.
Подбираем нужный нам фон и вставляем его в шаблон:
Готово!
Итак, теперь внимательно читайте:
Из меня дизайнер никакой, поэтому разработку дизайна я на этом заканчиваю, тоесть я показал вам, как правильно создавать дизайн в Фотошопе и какие размеры для этого выбрать.
Вот пример дизайна который можно создать, этакий мастер-класс:
