Как сделать дизайн сайта в фотошопе
Прежде чем верстать шаблон сайта в 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 шаблон, или как сделать сайт без больших затрат
20 августа 2012 2068 58Здравствуйте, уважаемые читатели моего блога!
В данной статье речь пойдет о html шаблонах для сайтов.
Этот пост писал не я, статья была предоставлена мне компанией link-broker.
Напомню, что я уже публиковал один обучающий пост про фильтры Google на своем блоге, сегодня публикую вторую статью.
Создание сайтов у многих ассоциируется с необходимостью осуществления целого комплекса технически сложных и трудоёмких процедур, однако на самом деле вовсе не обязательно прикладывать много усилий к работе с движками и административными панелями. Достаточно просто использовать шаблон сайта, который позволяет решать несложные задачи.
Что такое html шаблон?
По своей сути, html шаблон представляет собой готовое решение для создания сайтов с несложной структурой. Использование шаблона позволяет существенно сократить затраты сил, времени и прочих ресурсов на разработку веб-ресурса. Он не требует осуществления трудоёмких и сложных процедур, с которыми обычно сопряжено создание сайтов.
Благодаря этому достигается главное условие эффективной разработки сайтов – это предельная сжатость сроков изготовления. Сайт с одной или парой страничек можно создать за считанные часы. Это позволяет приступать к работе в тот же день, когда был размещён заказ на изготовление сайта. Впрочем, обладая хотя бы базовыми навыками в области программирования, любой человек может создать несложный сайт, используя html шаблон, самостоятельно, без привлечения специалистов.
Конечно, профессионал справится с этой задачей лучше и быстрее, но в целях экономии можно обойтись и своими силами. Срочность изготовления сайтов с использованием шаблонов позволяет приступить к эксплуатации площадки как можно раньше, а это, в свою очередь, даёт возможность приблизить во времени стартовый момент получения отдачи. По умолчанию, чем раньше будет готов сайт, тем лучше, поскольку для его полноценного эффективного функционирования нужно ещё осуществить раскрутку, на что тоже нужно время. Соответственно, приближая начало раскрутки, владелец площадки может рассчитывать на получение реального дохода от своего сайта уже в обозримом будущем.
В каких случаях нужен html шаблон?
Как правило, html шаблон используют тогда, когда необходимо в срочном порядке создать ресурс с несложной структурой и небогатым функционалом. Например, это может быть одно- или двухстраничный информационный ресурс, сайт-визитка и т.д. Для создания сайтов с более сложной организацией одного использования шаблона недостаточно – нужно работать с веб-документами, прописывая сложные коды и формируя нужную структуру.
К счастью, с появлением пятого стандарта языка программирования это перестало быть проблемой, поскольку структура и код веб-документов в HTML 5 существенно упрощены по сравнению с предыдущей версией веб-языка. Использование html шаблона незаменимо тогда, когда нужно создать ресурс за рекордно короткие сроки. Если на разработку сложного сайта требуется от нескольких дней до нескольких недель, то создать незамысловатую площадку с использованием готового шаблона занимает всего пару часов, а при высоком мастерстве программиста – и того меньше.
Срочность при изготовлении сайта может быть продиктована необходимостью проинформировать пользователей о приближающемся событии, которое должно произойти уже со дня на день. Заказывать разработку сложного сайта долго и дорого – намного разумнее использовать в данном случае html шаблон, который позволит свести время изготовления ресурса к минимуму. Соответственно, можно не только уложиться в срок перед приближающейся датой, о которой нужно проинформировать аудиторию, но и сэкономить средства.
Каковы преимущества использования html шаблона?
Популярность html шаблонов стремительно растёт – с каждым днём армия поклонников таких инструментов программирования возрастает, так же как и количество самих шаблонов. Главное преимущество html шаблона состоит в простоте работы с ним. Те, кто хотя бы единожды сталкивались с необходимостью разработки сайта, знают, сколько сил и времени нужно потратить на то, чтобы создать качественную площадку. Даже если обращаться к высококлассным мастерам, всё равно на разработку хорошего сайта уходит достаточное количество времени, которое могло бы пригодиться на решение других не менее важных задач, таких как наполнение контентом, продвижение и т.д. Порой на создание полноценной площадки уходит несколько недель, которые тратятся на создание множества сложных структурированных веб-документов.
Всё это занимает много времени, которое, как известно, сегодня на вес золота. В этом контексте html шаблон позволяет сэкономить массу драгоценного времени, поскольку полный цикл создания сайта с его использованием занимает всего несколько часов. Такие скромные затраты времени на изготовление площадки позволяют, во-первых, удешевить процесс, во-вторых, приступить к раскрутке площадки раньше, чтобы приблизить его монетизацию. Сайты, созданные на основе шаблонов, стоят гораздо дешевле обычных, поскольку на их разработку тратится гораздо меньше ресурсов всех видов.
Шаблоны html 5 имеют простую структуру, которая позволяет без корректировок получать готовые ресурсы с несложной структурой, способные выполнять базовые задачи. Если этого достаточно, а бюджет создания сайта ограничен, то шаблон – это именно то, что нужно.
Следующее видео расскажет Вам об html 5:
Смотрите полный видеокурс на iTunes
Как создать сайт с помощью html шаблона?
Существует два основных способа создания сайтов с помощью html шаблона. Первый, и самый распространённый – это обратиться к специалисту, предлагающему услуги экспресс-разработки сайтов. Быстрота таких работ достигается именно благодаря тому, что веб-мастер не прописывает веб-документы с нуля, а использует уже готовый шаблон. При необходимости можно вносить некоторые изменения в содержание веб-документа, меняя внешний вид, структуру или наполнение площадки. Такие метаморфозы занимают немного времени, поскольку основная часть документа остаётся неизменной.
Если же изменения не нужны вообще, то с созданием такой площадки можно легко справиться и без привлечения специалиста. Для этого достаточно обладать начальными знаниями о программировании и базовыми навыками работы в html. Однако при таком подходе не следует ожидать эксклюзивности от созданной площадки. Если нужно разработать сайт, действительно не похожий на другие, то лучше доверить эту работу профессионалам, которые с максимально сжатые сроки внесут все изменения в структуру веб-документов, подогнав шаблон к потребностям конкретного заказчика.
При квалифицированном подходе из обычного шаблона можно быстро сделать полноценный и качественный сайт со сравнительно несложной структурой, которой будет вполне достаточно для того, чтобы решать простые задачи.
Где скачать html шаблоны?
Сейчас существует множество сайтов, где можно скачать готовые html шаблоны и потом их переделать под свои нужды. Вот некоторые из таких ресурсов: http://www.ajaxs.ru; http://htmlweb.ru; http://www.internet-technologies.ru.
На этом все. Как Вам статья?
С уважением, Александр Бобрин
Поделись с друзьями:
Обратите внимание:
Похожие статьи
asbseo.ru
Создание шаблона сайта | Создание сайта
Урок-1.
Создание структуры сайта
Рано или поздно, но многим приходит в голову мысль сконструировать свой шаблон сайта. Вполне нормальная мысль. И чем раньше этим заняться, тем толку будет больше. Давайте разберём по шагам создание не сложного шаблона, но довольно приличного, который в некоторых случаях еще и пригодится. Освоив эти уроки, Вы сможете делать вполне приличные шаблоны. Главное понять основы работы над созданием шаблона.
Что нужно для создания шаблона? Понадобятся две программы — фотошоп и редактор Adobe Dreamweaver. Я пользуюсь Fhotoshop CS5 и Adobe Dreamweaver 8. На примере этих программ я и буду всё объяснять. Dreamweaver удобен тем, что там сразу можно работать с двумя окнами. Редактируя код html можно сразу визуально наблюдать как меняется шаблон сайт.
В первом уроке мы сделаем структуру сайта, т. е. Сделаем разметку шаблона сайта, определимся с размерами шапки сайта, меню и тела для контента. Создадим сайт на тему о способах заработка в интернете. Начинаем с запуска программы Фотошоп. Заходим в меню файл →создать создаём новый документ и выставляем размеры будущего шаблона сайт.
Ширину сайта задаём в зависимости от Ваших потребностей. Для примера я установил ширину в 1000пикселей, высоту тоже 1000 пикселей. Высота никакой роли не играет. Если контент превысит эти 1000 пикселей, то страница будет автоматически удлиняться. Нажав ОК, появится рабочая область, в которой необходимо включить ЛИНЕЙКИ (CTRL+R). Сверху и слева должны появиться линейки. С верхней линейки тянем направляющую на рабочую область, чтобы образовалась шапка сайта. Потом вторую направляющую, чтобы образовался футер (подвал). Теперь с левой линейки тянем направляющую, чтобы получить область меню. Меню можно делать как справа, так и слева. В моём примере будет слева. После всех манипуляций рабочая область будет выглядеть так:
Я для примера задал высоту шапки — 250 пикселей, ширину области для меню сайта — тоже 250 пикселей и высота подвала — 50 пикселей. Вы по своим желаниям или требованиям можете все размеры устанавливать по своему усмотрению.
Это был первый урок. В следующем уроке мы рассмотрим выбор цвета для шаблона и воплотим это в реальность.
Читайте в следующих уроках
mehelps.ru
Как создать шаблон для сайта 🚩 Интернет 🚩 Другое
Любой сайт состоит из множества страниц, на каждой из которых присутствуют одинаковые элементы: служебная информация, меню, идентичное дизайнерское оформление и так далее. Если задаться целью поменять подобный элемент на всем сайте — скажем, добавить новый пункт в меню, — то придется это действие выполнять на каждой страничке. Если на сайте их 10, то задача не слишком сложная. А если 100 или больше?
Шаблон — это некий макет, реализующий логику отображения материала. В нем можно задать место отображения меню, шапки сайта, основного контента и так далее. Само содержимое элементов, прописанных в шаблоне, задается в скрипте или посредством функционала, предоставляемого системой управления сайтом.
В качестве шаблона можно представить пару документов. В одном файле имеется разметка. Это сам макет, где указано конкретное место размещения того или иного контента. Второй файл отвечает за то, что именно будет отображено. Задача второго документа — проанализировать файл макета и подставить реальные значения переменных.
Эти два документа неотделимы друг от друга, поскольку в противном случае они не так интересны: если запустить файл шаблона, он не выведет никакой полезной информации. То же самое произойдет, если запустить скрипт-обработчик без самого макета.
Создание макета страницы сайта сводится к созданию простого html-документа, в котором прописана логика отображения элементов страницы. Одновременно с этим необходимо создать файл, управляющий отображением шаблона. В этом файле будут прописаны реальные значения переменных.
Такая работа достаточно трудоемка, поэтому можно воспользоваться готовым шаблонизатором. В качестве примера можно привести Smarty и Twig. В этом случае достаточно скачать дистрибутив шаблонизатора, и по инструкции установить его на сервер. В этом случае не требуется создавать файл, отвечающий за отображение реальных переменных, так как он уже создан — это сам дистрибутив, то есть набор файлов. Необходимо создавать только макеты страниц.
Следует иметь в виду, что современные шаблонизаторы достаточно многофункциональны. Можно говорить об отдельном языке программирования шаблонов, поскольку в макетах можно вводить отображение по условию, в цикле и т.д.
Создание шаблона — очень хороший способ разделить логику отображения и логику приложения. Это облегчает работу верстальщику и упрощает работу программиста.
www.kakprosto.ru