сайт на джумла урок

Обратите внимание на расстояние между символами.

Выбираем в панели инструментов «Horisontal Type Tool» (Горизонтальный текст), пишем в шапке название компании и устанавливаем следующие параметры текста:

Фон для шапки готов, теперь займемся содержимым шапки сайта. В проекте используется стандартный шрифт Arial и не стандартный BankGothic RUSS. Если у вас этого шрифта нет, то кликните , сохраните и установите его.

Теперь сотрем лишнее слева и справа и установим прозрачность слоя «Карта» в 10% (см. свойство Opacity сверху панели слоев). В результате у нас должно получиться следующее:

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

Теперь загружаем в проект файл karta.jpg из архива с исходными изображениями, которые вы скачали в начале урока. Для этого откроем этот файл с помощью Photoshop, выделяем всё содержимое командой Select > All (Ctrl+A), Копируем Edit > Copy (Ctrl+C) и вставляем в наш проект (Ctrl+V). В проекте появится новый слой с картой (Layer 1), переименуем его в «Карта» и подтянем к верхней границе документа, чтобы он перекрывал слой с серым прямоугольником.

Далее применяем фильтр Filter > Noise > Add Noise (Добавить шум) и устанавливаем параметры фильтра: Amount = 1, Distribution = Gaussian, чекбокс Monochromatic должен быть установлен как отмеченный:

Получившийся бэкграунд для шапки переименуем в «основа для шапки» и растрируем слой:

Это будет основа для нашей шапки. Теперь окрасим прямоугольник в светло-серый цвет:

Для того, чтобы создать направляющую в Adobe Photoshop, достаточно просто поместить курсор мыши над линейкой, щелкнуть левой кнопкой и потянуть. Далее создадим прямоугольник (Rectangle Tool) на всю ширину документа, прижмем его к верхней границе и зададим его высоту (Ctrl+T) 380 пикселей:

Сохраняем psd-документ в папку проекта (или куда вам будет удобно). Теперь необходимо создать первые границы модульной сетки, ограничивающие шаблон по ширине. Так как ширина будущего сайта будет фиксированной и равна 1000 пикселей, а наш документ имеет ширину 1400 пикселей, то вытянем две направляющие линии из линейки слева и разместим первую линию на отметке 200, аP вторую на отметке1200 на горизонтальной линейке (единица измерения линейки – Pixels):

Открываем Photoshop и создаем новый документ (Ctrl+N), устанавливаем параметры формы создания нового документа и жмем ОК:

Для начала и распаковываем в папку проекта.

В результате изучения этого урока мы научимся рисовать такой вот несложный макет сайта в программе Adobe Photoshop:

Этим уроком мы открываем серию пошаговых уроков по созданию простого бизнес-сайта на основе CMS Joomla. В качестве примера мы будем рассматривать создание сайта транспортной компании. Это будет несложная визитка, стоимостью 10-15 тыс. руб. в средней студии по разработке сайтов, состоящая из 4-х информационных страниц (услуги, прайс, контакты и филиалы), панели видов услуг с иллюстрациями и разделом новостей (см. второе изображение). В качестве системы управления сайтом мы будем использовать CMS Joomla 1.7.

Всем доброго времени суток!

Внимание! Статья находится в процессе написания ;)

Опубликовано 9 сентября, 2011 года

Создание сайта на Joomla. Урок 1: Рисуем дизайн.

Создание сайта на Joomla | Уроки по созданию сайтов