Надеюсь, вы уже определили структуру вашего будущего ресурса. Если нет, то советую сделать это сейчас на странице Структура сайта. Если да, то вы уже представляете в общих чертах, как будет выглядеть ваш сайт. Теперь самое время поговорить об отдельной его странице, ведь именно она будет являться шаблоном для всех остальных.
Любая web-страница состоит из разных объектов: текста, картинок, системы навигации и т.д. И все эти объекты надо расположить на странице так, чтобы ими было удобно пользоваться посетителям. Именно поэтому первым делом надо определить структуру макета, т.е. разбить его на структурные части.
На самом деле, вы сами можете придумать эту структуру, но есть основные виды:
Опираясь на них, продумайте свою структуру. Теперь откройте программу photoshop и создайте новый файл размером 800 Х 600 пикселов. Теперь опустим направляющие, деля ими макет на структурные элементы по выбранной выше схеме.
Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.
У меня получилось вот так:
Направляющие опущены условно, лишь для ориентира. Когда макет будет готов, мы их подвинем, а может и добавим новые.
Теперь стоит задуматься о цветовой схеме макета. Все знают, что цвет в нашей жизни играет большое значение, он способен влиять на наши эмоции и наше восприятие: возбуждающий оранжевый, агрессивный красный или умиротворяющий голубой. Именно цветовая гамма создает настроение вашего сайта.
Используемые на вашем сайте цвета должны быть приятны глазу, подходить друг другу, а также соответствовать тематике сайта. Согласитесь, оформить детский сайт в серых тонах, также неуместно, как сделать серьезный ресурс в розовых тонах. Вообще, старайтесь избегать ярких красок: салатовых, бирюзовых, рыжих и тому подобных (кроме тех редких случаев, когда это действительно оправдано).
Также важно помнить и об удобстве пользователя. Если вы хотите, чтобы ваши посетители оставались на сайте как можно дольше, то не стоит увлекаться отходом от традиционного черного текста на светлом фоне (причем под светлым подразумевается белый с небольшим оттенком, а не желтый или розовый). Возможно, вам покажется оригинальной идея желтых букв на зеленом фоне, но читать такой текст практически невозможно. Помните об этом.
Таким образом, старайтесь использовать спокойные тона, не раздражающие глаз для оформления и контрастные темные для шрифтов.
Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:
Название компании и логотип, если это сайт фирмы
Слоган
Система навигации
Учитывая все вышеизложенное, приступайте к работе.
У меня, например, получилось так:
Теперь подкорректируйте расположение направляющих и собственно макет готов, осталось только его разрезать. Сделать это можно либо в этой же программе (как читайте на странице как разрезать макет сайта), либо в ImageReady.
При нарезке следует помнить, что однотипные элементы следует сохранять в виде маленьких кусочков и использовать их при верстке, как фон. Так например в моем примере, можно выделить следующие части и сохранить их отдельно для последующего использования (помечены красным):
Насчет фрагмента 2. Как известно, существует два вида дизайна сайтов: фиксированный и резиновый. Фиксированный дизайн страницы остается неизменным независимо от монитора пользователя. При резиновом дизайне страница растягивается и занимает все свободное место окна браузера.
Так вот, при резиновом дизайне вам надо продумать, чем вы будете заполнять растягивающиеся области. Например, в моем примере я бы растягивала сайт вправо, причем сверху вниз фоном будут сначала элемент 1, затем элемент 2, затем фоновый серый цвет, а затем элемент 3.
Вообще-то это уже больше касается темы оптимизации графики, чем подготовки макета. Поэтому на этом и закончим.
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Графика для Web → Подготовка макета сайта
Подготовка макета сайта
Вообще-то у каждого дизайнера свое видение этого процесса. Здесь же будет разобран один из вариантов, и использовать мы будем программу photoshop.Надеюсь, вы уже определили структуру вашего будущего ресурса. Если нет, то советую сделать это сейчас на странице Структура сайта. Если да, то вы уже представляете в общих чертах, как будет выглядеть ваш сайт. Теперь самое время поговорить об отдельной его странице, ведь именно она будет являться шаблоном для всех остальных.
Любая web-страница состоит из разных объектов: текста, картинок, системы навигации и т.д. И все эти объекты надо расположить на странице так, чтобы ими было удобно пользоваться посетителям. Именно поэтому первым делом надо определить структуру макета, т.е. разбить его на структурные части.
На самом деле, вы сами можете придумать эту структуру, но есть основные виды:
Опираясь на них, продумайте свою структуру. Теперь откройте программу photoshop и создайте новый файл размером 800 Х 600 пикселов. Теперь опустим направляющие, деля ими макет на структурные элементы по выбранной выше схеме.
Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.
У меня получилось вот так:
Направляющие опущены условно, лишь для ориентира. Когда макет будет готов, мы их подвинем, а может и добавим новые.
Теперь стоит задуматься о цветовой схеме макета. Все знают, что цвет в нашей жизни играет большое значение, он способен влиять на наши эмоции и наше восприятие: возбуждающий оранжевый, агрессивный красный или умиротворяющий голубой. Именно цветовая гамма создает настроение вашего сайта.
Используемые на вашем сайте цвета должны быть приятны глазу, подходить друг другу, а также соответствовать тематике сайта. Согласитесь, оформить детский сайт в серых тонах, также неуместно, как сделать серьезный ресурс в розовых тонах. Вообще, старайтесь избегать ярких красок: салатовых, бирюзовых, рыжих и тому подобных (кроме тех редких случаев, когда это действительно оправдано).
Также важно помнить и об удобстве пользователя. Если вы хотите, чтобы ваши посетители оставались на сайте как можно дольше, то не стоит увлекаться отходом от традиционного черного текста на светлом фоне (причем под светлым подразумевается белый с небольшим оттенком, а не желтый или розовый). Возможно, вам покажется оригинальной идея желтых букв на зеленом фоне, но читать такой текст практически невозможно. Помните об этом.
Таким образом, старайтесь использовать спокойные тона, не раздражающие глаз для оформления и контрастные темные для шрифтов.
Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:
Учитывая все вышеизложенное, приступайте к работе.
У меня, например, получилось так:
Теперь подкорректируйте расположение направляющих и собственно макет готов, осталось только его разрезать. Сделать это можно либо в этой же программе (как читайте на странице как разрезать макет сайта), либо в ImageReady.
При нарезке следует помнить, что однотипные элементы следует сохранять в виде маленьких кусочков и использовать их при верстке, как фон. Так например в моем примере, можно выделить следующие части и сохранить их отдельно для последующего использования (помечены красным):
Насчет фрагмента 2. Как известно, существует два вида дизайна сайтов: фиксированный и резиновый. Фиксированный дизайн страницы остается неизменным независимо от монитора пользователя. При резиновом дизайне страница растягивается и занимает все свободное место окна браузера.
Так вот, при резиновом дизайне вам надо продумать, чем вы будете заполнять растягивающиеся области. Например, в моем примере я бы растягивала сайт вправо, причем сверху вниз фоном будут сначала элемент 1, затем элемент 2, затем фоновый серый цвет, а затем элемент 3.
Вообще-то это уже больше касается темы оптимизации графики, чем подготовки макета. Поэтому на этом и закончим.
30.06.2009
www.site-do.ru
www.site-do.ru
Главная → Графика для Web → Подготовка макета сайта
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|