Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

    В данном материале подробно рассказывается как создавать свои информационные продукты для людей и как продавать их через интернет.

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

    Хорошо известно, что для того, чтобы успешно работать в интернете необходим свой интернет-ресурс.

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

    В данном материале на основе своего опыта автор расскажет каким образом следует строить этот бизнес.

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

    В этом видеокурсе в доступной форме даются основы языка HTML, являющегося незаменимым при составлении веб-страниц.

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

    В данном видеокурсе подробно и очень доступно даются основы языка CSS, обеспечивающего управление внешним видом веб-страниц.

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

    В видеокурсе пошагово разъясняется как купить домен, купить хостинг, загрузить сайт на хостинг и выполнить все необходимые настройки для его правильной работы.

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

    В видеокурсе на конкретном примере показывается как создаются изображения и какие при этом используются инструменты.

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

    В нем можно узнать все основные вопросы по работе с редактором, а именно: что такое слои, как с ними работать, как работать с базовыми инструментами и как работать с фильтрами.

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная → Как сделать сайт → Дизайн-макет → Создаем дизайн-макет веб-страницы


Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


Автор: / Дата:

Создаем дизайн-макет веб-страницы

Здравствуйте уважаемый посетитель!

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

При этом, подробно рассматривать создание дизайн-макета будем только в части, касающейся блока "Меню". По остальным блокам, таким как, "Контент", "Сайдбар", "Подвал", здесь будут приведены лишь их скриншоты без показа промежуточных этапов.

Это обусловлено тем, что все операции, которые будут использованы при их создании, довольно подробно рассматриваются в предыдущих примерах, и нет необходимости снова на них подробно останавливаться.

Кроме того, при верстке сайта, для оформления этих блоков, мы воспользуемся очень широкими возможностями современной версии языка стилей CSS3, которая позволяет, без особых сложностей сформировать подобные блоки, не используя при этом какие-либо графические картинки, а только применяя CSS.

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

Содержание


  • Меню
  • Ротатор
  • Основное содержание и сайдбар
  • Подвал
  • Исходные файлы сайта

Меню


Прежде, чем приступить к формированию меню, откроем два ранее созданных файла:

Далее, все слои композиции шапки, которую мы должны перенести, объединим в один слой. Это можно сделать через меню "Слои", выбрав в открывшемся окне опцию "Объединить видимые".

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 1

Рис.1

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

При этом, вновь созданный слой переместим в группу "Композиция" в панели палитр.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 2

Рис.2

После того, как сделаем перенос, придадим нашей композиции некую объемность используя "Тиснение" в окне "Стиль слоя". Как открыть панель "Стиль слоя" можно посмотреть в предыдущей статье Создаем композицию шапки дизайн-макета  сайта.

На рис.3 показан скриншот такой установки параметров.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 3

Рис.3

Следующим шагом изобразим меню шириной на всю страницу (за вычетом полей с каждой стороны по 100px) и состоящее из 5 кнопок. Если рассчитать ширину каждой кнопки, то она будет составлять 200(px) = (1200 - 100 * 2) / 5.

Попробуем сделать кнопки меню в виде подобия клавиш пианино. В качестве таких кнопок используем инструмент "Прямоугольник с округленными углами" со следующими параметрами:

  • цвет - "Нет цвета";
  • ширина бордюра - 2px;
  • ширина прямоугольника - 200px;
  • высота прямоугольника - 50px;
  • радиус округления верхних углов - 6px;
  • радиус округления нижних углов - 0px;
Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 4

Рис.4

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

Таким образом копируем и остальные прямоугольники.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 5

Рис.5

Теперь изобразим одну из кнопок в нажатом состоянии. Для этого, сначала изменим ее цвет и удалим бордюры кнопки через панель "Свойства".

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 6

Рис.6

А, затем через панель "Стиль слоя" создадим внутреннюю тень, установив, параметры как показано ниже.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 7

Рис.7

После этого, сделаем надпись одной из кнопок меню. Для этого, выберем инструмент "Горизонтальный текст", определим свойства шрифта в панели параметров и введем текст. В данном случае, для первой кнопки это будет "Главная".

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 8

Рис.8

Добавив в композицию шапки название сайта и ключевую фразу получим окончательный вариант шапки. При этом, название сайта здесь пока не указано, так как оно должно быть увязано к доменному имени, и мы к этому вернемся позднее, на этапе покупки домена.

Кроме того, здесь добавлен временный значок фавикона в виде небольшого фиолетового кружка, так как у нашего сайта пока нет своей фавиконки. Это сделано для того, чтобы с самого начала обозначить его место в шапке дизайн-макета.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 9

Рис.9

Ротатор


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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 10

Рис.10

Основное содержание и сайдбар


Далее, показан вариант блоков "Основное содержание" и "Сайдбар" с элементами поиска, подписки и баннера. В основном содержании приведен фрагмент текста, который взят для примера из вводной статьи, а ниже размещена область с комментариями.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 11

Рис.11

Подвал


На следующем скриншоте показан дизайн-макет с блоком "Подвал", в котором размещено нижнее меню, виджеты сторонних сервисов и знак копирайт для обозначения своих авторских прав.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 12

Рис.12

Ну, а так примерно будет выглядеть общий вид дизайн-макета нашего будущего сайта без направляющих линий и вспомогательной сетки фотошопа, исходный файл которого можно скачать из архива дополнительных материалов в формате "psd". При этом, картинка шапки из предыдущей статьи включена в дизайн-макет, как ранее отмечалось, в формате "jpg".

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 13

Рис.13

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

Исходные файлы сайта


Знак папкиИсходный файл дизайн-макета, выполненного в графическом редакторе Adobe Photoshop можно скачать бесплатно в дополнительных материалах здесь.

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments

Социальные сети


Если Вам понравилась эта статья и считаете, что она будет полезна и для других, Вы можете поделиться об этом с друзьями в социальных сетях.

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+