Дизайн сайта

Общее понятие слова Дизайн известно каждому школьнику,а вот что представляет собой Дизайн сайта,или вернее дизайн web страницы,мы с вами попытаемся выяснить.
На Monymaker.ru сегодня обзорная статья,что собой представляет дизайн сайта.

Приступая к его созданию, с самого начала следует сделать планировку. Планировка будет заключаться в создании шапки и определении количества колонок на сайте. То есть мы создаём визуальный шаблон будущей html страницы. Это очень важный момент если вы задумали сделать сайт который будет всем нравиться. Создавая шапкув программе фотошоп мы получим ещё и готовый html код, к которому мы будем добавлять, меню, навигацию по сайту и всё что нам будет нужно для стильного оформления. Для того чтобы создатьграфическое изображение шапки скачиваем из интернета программу фотошоп, подойдёт CS5 и все его последующие разработки. Ну и запаситесь разными бесплатными картинками, они вам пригодятся для компановки визитки сайта. Картинки сохраните в папке «рабочие файлы». Для тех кто хочет посмотреть создание графического изображения сайта в видео сюжете, можно ПЕРЕЙТИ по ссылке на авторитетное интернет издание. Для тех кто решил остаться с нами начинаем производство графики самостоятельно.

• Открываем программу фотошоп и в левом верхнем углу нажимаем-ОТКРЫТЬ-. Перед вами появляется таблица настроек, вверху записываем название, (допустим logotype 1 ) можно любое, потом подкорректируем при сохранении.Открываем программу фотошоп и устанавливаем параметры изображения
  

  ЗАДАЁМ ФОРМАТ

  Ниже заполняем размеры нашего логотипа. Ширина — 750 пикс -> высота — 120 пикс. Почему в пикселях, потому что так принято в интернет — графике (да и не только ). Ширину тоже можете выбрать допустим 1024 пикс. Но меньше 750 будут искажения при увеличении, можно избежать, но тогда прийдётся производить дополнительные файлы для растяжки картинки.

• Далее цветовой режим RGB — 8 бит ;разрешение оставляем 72 пикс/дюйм ; фоновый режим — белый, -> сохранить. В левом углу показывается белая рамка по размерам нашего будущего графического изображения.
• Для удобства работы направьте курсор на правый боковой край рамки и нажав левую кнопку расстяните её в сторону. Таким образом поступите и нижним краем. Если на краях рамки нет линейки, то в верхней левой части программы есть значок (квадратик с линейками), щёлкните по стрелке рядом и выберите — показать линейки. Теперь у вас сверху и сбоку будет градуировка.
• Следующим шагом в нашей творческой работе будет выбор фона, на котором мы будем производить компановку. В нижнем левом углу таблицы должен быть значок квадрат белого цвета на чорном, если нет, то нажатием в английском меню клавиатуры на «D» а затем «X» приводим в такое положение. Щелчок по белому квадрату и всплывает таблиц цветов. В этой таблице можно опытным путём подбирать различные цвета, и все они записываются при помощи цифр и буквенных изображений. Это можно наблюдать в нижнем прямоугольнике #sde234; ffffff; cccccc; oooooo и .т.д. Подборка производится щелчком левой кнопки по палитре цветов и последующем —ОК—
• Цвет подобран и белый квадрат принимает его колер. Поднимаемся выше и на панели инструментов щёлкаем правой кнопкой по ведёрку, здесь выбираем «инструмент заливка». Щелчок левой кнопки по области выделенной под графику и она окрасится в выбранный цвет. В правой части программы мы увидим таблицу слоёв, на ней появится первый слой с названием ФОН.
• Приступаем к работе с картинками которые вы выбрали в качестве составляющих композиции. Дл этого снова щелчок по —> файл —> открыть и выбираем изображение, оно окажется в рамке в левом верхнем углу.
  

  ВСТАВЛЯЕМ ИЗОБРАЖЕНИЕ

  Выбираем какую часть нужно оставить, а ту что убираем : в верхней части панели инструментов есть квадрат из пунктиров, щелчком правой кнопкой вызываем содержание опции и щелчком левой выбираем «инструмент прямоугольная область». Затем аккуратно устанавливаем курсор на край убираемой части. Двигаем курсор слева на право и пунктиром обрамляем эту область. Нажимаем — DELETE— затем —ОК— и щелчок по пустому телу рамки. Для подтверждения щелчок по чорной стрелке вверху панели инструментов.

• Направляем курсор на оставшуюся часть изображения, нажимаем левую кнопку и удерживая её переносим его на выделенный участок, будущей шапки сайта и отпускаем. В таблице слоёв есть опция закрепить слой, но вы до полного окончания работы ничего не закрепляйте, во избежании лишней траты времени. А просто делайте всё осторожно, чтобы не сдвигать слои.
• После окончания сборки и закрепления слоёв, снова щелчок по — файл— и жмём сохранить для WEB устройства -; Картинка и HTML, сохраняем на диске С . После этого на нём образуется два файла — HTML страница с готовым начальным кодом и image файл с изображением к ней. Оба этих файла должны находиться рядом в одной дирректории, иначе HTML файл не сможет без вашей помощи найти изображение.
• Для наглядности можно посмотреть ещё пару уроков на эту тему это создание графического изображения и ещё один создание графического изображения разрезание на фрагменты. Эти уроки на мой взгляд хороши прямотой показа, то есть без лишних отступлений и уходов в сторону. Когда я их писал, то вспоминал как мне было сложно понять самые простые вещи, если тебе не правильно подают урок. И поэтому вам будет легче так как я с вами!!!!

Для закрепления урока посмотрите как можно сделать дизайн сайта наглядно.