×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

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

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

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



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

Создаем композицию шапки дизайн-макета сайта

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

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

Содержание


  • Создаем основной фон шапки
  • Создаем подобие защитной 'ауры' автомобиля
  • Создаем луч прожектора, направленного на вора
  • Объединяем композицию шапки дизайн-макета с областью меню
  • Исходные файлы сайта

Создаем основной фон шапки


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

В первую очередь нам нужно разблокировать слой "Фон", так как без этого мы не сможем вносить в него какие-либо изменения. Это можно сделать разными способами, но мы воспользуемся очень простым - для этого лишь только кликнем левой кнопкой мышки по значку замка, находящегося в этом слое (слои находятся в правой части, называемой областью палитр фотошопа).

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

Рис.1

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

В начале, изменим цвет фона. Для этого:

  • выделим в окне "Стиль слоя" поле "Наложение цвета";
  • левой кнопкой мышки кликнем по иконке справа от поля "Режим наложения";
  • в появившемся окне "Палитра цветов" выберем подходящий цвет. Это можно сделать, либо через окно палитры цвета, либо с помощью установки значения цвета в шестнадцатеричном коде.

Ниже, наглядно показано, как можно выбрать цвет, а также, где расположена иконка для открытия окна "Стиль слоя".

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

Рис.2

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

  • откроем окно "Стиль слоя", аналогично предыдущему пункту;
  • выделим поле "Наложение градиента";
  • значение "Непрозрачность" установим примерно на середину шкалы, или около 50%, значение угла - 180 градусов, стиль градиента выберем "Линейная";
  • левой кнопкой мышки кликнем в поле "Градиент", в появившемся окне "Редактор градиентов" в поле градиента выставим с помощью имеющихся маркеров нужную нам область затемнения;
  • кликнув левой кнопкой мыши в окне "Редактор градиентов" на маркер цвета градиента, а затем на поле "Цвет", откроем новое окно "Палитра цветов" и подберем подходящий цвет для затемненной области.

Следует сказать, что данный инструмент позволяет создавать самые разнообразные варианты цветовых эффектов. Здесь же показана простейшая операция для конкретной задачи, а именно: получение затемненной области. На рис.3 визуально показаны места, на которые имеются ссылки в приведенном выше описании порядка действий.

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

Рис.3

Создаем подобие защитной "ауры" автомобиля


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

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

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

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

Рис.4

Перед тем, как разместить многоугольник на холст шапки, сделаем некоторые предварительные установки на панели параметров, а именно:

  • выберем тип инструмента "Фигура";
  • выберем белый цвет заливки многогранника;
  • установим ширину бордюра 0 px;
  • установим количество сторон - 25;
  • при нажатом значке шестеренки выберем опцию "Звезда" и установим значение глубины лучей в 15%.
Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 3), картинка 5

Рис.5

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

Нажатие кнопки "ОК" приведет к созданию нового слоя с фигурой многоугольника с заданными параметрами.

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

Рис.6

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

Далее, воспользовавшись режимом "Свободное трансформирование" (о том, как выбрать данный режим было показано в предыдущей статье) сделаем необходимые изменения размеров и повернем многоугольник на нужный угол, чтобы автомобиль оказался внутри многоугольника.

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

Рис.7

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

Скриншот установки параметров "Наложение цвета".

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

Рис.8

Скриншот установки параметров "Тень".

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

Рис.9

Скриншот установки параметров "Выполнить обводку".

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

Рис.10

Создаем луч прожектора, направленного на вора


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

Эллипс создадим аналогично тому, как это делали для многоугольника. Данный инструмент расположен в том же месте, что и многоугольник.

Для создания эллипса, нужно, при выделенном инструменте, навести курсор на холст шапки и кликнуть левой кнопкой мышки. В появившемся окне "Создать эллипс" укажем его размеры, порядка 130 на 100 пикселей.

После нажатия кнопки "ОК" появится эллипс вместе с новым слоем, а также откроется панель "Свойства", с помощью которой установим белый цвет.

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

Рис.11

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

Скриншот установки параметров "Наложение цвета".

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

Рис.12

Скриншот установки параметров "Внутренняя тень".

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

Рис.13

Скриншот установки параметров "Выполнить обводку".

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

Рис.14

Ну, и в заключении, построим сам луч. Для этого используем фигуру прямоугольника, которую создадим, аналогично эллипсу.

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

Скриншот установки параметров "Наложение цвета".

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

Рис.15

Скриншот установки параметров "Тень".

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

Рис.16

Скриншот установки параметров "Внутренняя тень".

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

Рис.17

Объединяем композицию шапки дизайн-макета с областью меню


Как ранее отмечалось, высота шапки была определена в 210px, из которых 50px приходится на меню. Сделаем так, чтобы фон композиции шапки охватывал и меню, такое решение, наверное, имеет право на существование.

С начала увеличим размер холста до 210px, для чего во всплывающем меню "Изображение" выберем "Размер холста" и в открывшемся окне установим высоту 210px.

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

Рис.18

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

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

Рис.19

И после этого, используя режим "Свободное трансформирование", сдвинем все элементы немного наверх.

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

Рис.20

И в завершении, используя режим "Свободное трансформирование", увеличим высоту слоя "фон".

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

Рис.21

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

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

Картинка этого варианта шапки сайта показана ниже, которую можно скачать из архива дополнительных материалов в файле под именем "header.jpg".

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

Рис.22

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

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


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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

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


Комментарии


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

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

comments powered by HyperComments