Редактируем шаблон Joomla 3 - оформляем шапку сайта. Создать шапку


Делаем шапку | Создание сайта

Создание шапки для сайта.

 Для создания шапки для сайта воспользуемся программой Фотошоп. Больших сложностей при создании шапки не возникнет. Постараюсь всё объяснить по порядку и как можно подробнее.

Чтобы поменять шапку своего сайта, Вам необходимо знать её размер и, исходя из размера Вашей шапки, будем создавать новую с помощью программы Фотошоп. Для начала запускаем программу. В строке меню выбираем: файл => создать. Откроется такое окно:

ScreenShot

В этом окне надо выставить размеры шапки. Я привожу пример для создания шапки размером 900х200 пикс. Прописав размеры, нажмите ОК. Появится вот такое рабочее окно:

ScreenShot1

В этом окне и будем создавать шапку. Можно пойти несколькими путями, это будет зависеть от Вашего желания. Самый простой путь — это найти картинку, которая будет соответствовать дизайну и тематики сайта. Картинка должна быть обязательно приблизительно такой же ширины, как и шапка. Если будет больше — не страшно. Картинку меньшего размера придётся растягивать, при этом изображение немного исказится.

Для примера я возьму какую-нибудь картинку для рабочего стола, они имеют большой размер:

1

Эта картинка имеет размер 1920х1200 пикс. Теперь надо эту картинку переместить в Фотошоп. Для этого в меню выбираем — файл ==> открыть. В открывшемся окошке выбираете на компьютере файл с нужной картинкой и нажимаете «открыть». Теперь окно Фотошопа будет выглядеть так:

ScreenShot2

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

Если с фрагментом определились, то можно инструментом «раскройка» раскроить рисунок. С размерами ориентируйтесь по шкале слева и вверху. После работы инструмента картинка будет выглядеть так:

ScreenShot4

Нас интересует выделенный объект. Надо подкорректировать его размеры. Для этого на нужном фрагменте сделайте клик правой кнопкой мышки и в открывшемся меню выберите - «Редактировать параметры фрагмента». В открывшемся окошке выставляете размеры шапки и нажимаете ОК.

ScreenShot5

Все размеры отредактированы, теперь остаётся перенести этот фрагмент на шапку. Для этого заходим в меню и выбираем — Редактирование ==> Скопировать

ScreenShot6

Следующий шаг — надо выставить в Фотошопе на передний план окно с будущей шапкой. Далее опять заходим в меню «Редактирование» и выбираем функцию «Вставить»

ScreenShot7

Вот и всё, шапка в принципе готова. Смотрим, что у нас получилось. Это и будет шапка сайта, вернее её основа.

ScreenShot8

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

Вот и всё, это был самый простой способ. Освоив возможности Фотошопа, можно делать более оригинальные виды шапок. Всё в Ваших руках.

mehelps.ru

Создаем шапку для сайта

В предыдущем уроке мы начали разбор относительно сложной и в то же время достаточно интересной темы – редактирование стандартного шаблона Joomla. Научились работать с кодом страницы, файлами стилей и т.д.

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

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

Для начала давайте посмотрим на стандартный вид шапки в шаблоне Protostar:

Стандартное оформление шапки сайта в шаблоне Protostar которое мы будем изменять

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

Меняем логотип сайта

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

В панели управления переходим на страницу «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и открываем шаблон Protostar для изменения. На вкладке «Дополнительные параметры» ищем пункт «Логотип» и выбираем то изображение, которое Вы хотите видеть в качестве логотипа на своем сайте.

Я набросал некое подобие логотипа в фотошопе и вот что у меня получилось:

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

Создаем форму для поиска в шапке сайта

С логотипом разобрались, теперь нам надо разместить в шапке форму для поиска по сайту. Тут так же ничего сложного, создаем модуль с типом «Поиск», если кто не помнит, как создать модуль то читайте эту статью.

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

Осталось определиться с позицией, в которой будет выведен наш модуль поиска. Как посмотреть доступные позиции модулей в шаблоне Joomla был посвящен отдельный урок, поэтому повторяться не буду. Я выбрал позицию с именем «position-0», после чего сохранил изменения.

Теперь шапка нашего сайта выглядит вот так:

Шапка сайта с логотипом и строкой поиска

Теперь осталось изменить позицию и оформление главного меню.

Оформление главного меню на сайте Joomla

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

Я поменял позицию вывода модуля с позиции «position-7» на «position-1». Теперь модуль главного меню располагается под шапкой, но не в ней! Для того чтобы переместить данную позицию именно в шапку придется несколько подкорректировать код индексного файла шаблона.

Открываем файл index.php нашего шаблона и пролистываем его до строки 146, там мы видим код, который отвечает за вывод шапки и он заканчивается на строке 158:

<header role="banner"> … </header>

Сразу за ним строки 159 – 173 отвечают за вывод позиции «position-1»:

<?php if ($this->countModules('position-1')) : ?> … <?php endif; ?>

Код файла index.php - позиция Position-1 находится под шапкой

Для того чтобы переместить нужную нам позицию в шапку просто вырезаем весь код со строк 159-173 и вставляем его перед закрывающимся тегом </header> строка 158. Получится примерно следующее:

Мы изменили код индексного файла теперь позиция модуля position-1 находится внутри шапки сайта

Теперь посмотрим, что у нас получилось:

Шапка сайта с логотипом, строкой поиска и вертикальным меню

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

Несколько способов как сделать горизонтальное меню в Joomla

Существует несколько вариантов, как можно сделать главное меню сайта на Joomla горизонтальным. Можно дописать суффикс класса меню в настройках модуля, либо оформить меню по своему усмотрению при помощи CSS. Рассмотрим оба варианта подробнее

Горизонтальное меню при помощи суффикса класса

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

Все что потребуется сделать это перейти в настройки модуля меню и на вкладке «Дополнительные параметры» в текстовое поле «Суффикс класса меню» написать «nav-pills» либо «nav-tabs». Обратите внимание, что перед суффиксом класса обязательно должен стоять пробел, иначе работать ничего не будет. Поставив пробел, мы добавляем к меню уже не суффикс класса, а сам класс, к которому в Bootstrap уже применены определенные стили.

Чтобы стало понятнее, смотрите на скриншот ниже:

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

Повторюсь еще раз, чтобы все работало, в строке суффикс класса ОБЯЗАТЕЛЬНО в самом начале ставим пробел, а следом пишем класс «nav-pills» либо «nav-tabs».

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

Варианты оформления горизонтального меню при помощи суффиксов класса

Горизонтальное меню при помощи CSS

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

Для начала давайте удалим ранее написанные суффиксы класса (если были добавлены). Теперь откроем код страницы и посмотрим, как у нас оформлено главное меню (как работать с кодом страницы мы рассматривали в данном уроке).

Как видим, меню у нас состоит из обычного ненумерованного списка ul => li. К тегу <ul> применены два класса – «nav» и «menu». С ними и будем работать для того чтобы сделать наше меню горизонтальным.

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

Я в качестве примера решил добавить суффикс «_horizontal», обратите внимание пробелы ставить уже не нужно, в итоге у нас для меню будет применены следующие два класса «nav» и «menu_horizontal».

Далее я создал новый файл стилей, для того чтобы при обновлении Joomla не потерять все изменения внесенные в стандартный шаблон и подключил его к нашему шаблону Protostar (как это сделать мы говорили в данном уроке)

 Теперь можно начинать писать стили для нашего меню, для того чтобы средствами CSS сделать наше меню горизонтальным надо добавить всего одно свойство к пунктам меню заключенным в теге <li> на выбор. Это может быть либо свойство «float: left» либо «display: inline-block». Как только данное свойство будет добавлено, то меню сразу же станет горизонтальным. Но выглядеть оно будет не самым привлекательным образом.

Чтобы меню стало более привлекательным, придется дописать еще несколько свойств. Чтобы не вдаваться в подробности CSS ниже я приведу готовый пример с комментариями:

/*Главное меню*/ ul.nav.menu_horizontal li {display: inline-block;} /*Делаем меню горизонтальным*/ ul.nav.menu_horizontal {margin: 0; background: #005e8d;}/*Убираем отступы у всего меню и добавляем заливку*/ ul.nav.menu_horizontal li:hover {background: #4CAF50;transition: all 0.2s;} /*Заливка пункта меню при наведение*/ ul.nav.menu_horizontal li.active {background: #4CAF50;} /*Заливка активного пункта меню*/ ul.nav.menu_horizontal li a {color: #fff;padding: 10px;} /*Цвет пункта меню и отступы*/ ul.nav.menu_horizontal li a:hover {background: none;} /*Убираем заливку текста при наведение*/ ul.nav.menu_horizontal li ul {background: #005e8d;}/*Вложенное меню (вставить при необходимости)*/ ul.nav.menu_horizontal li ul li {width: 100%;} /*Ширина вложенных пунктов меню 100%*/

Данный код вставляем в наш файл стилей (или в самый конец стандартного файла стилей) и сохраняем его. Осталось только проверить полученный результат, для этого обновляем страницу, возможно, потребуется обновлять с очисткой кэша (сочетание клавиш Ctrl+F5) и смотрим, что у нас получилось. У меня вышло примерно так:

Горизонтальное главное меню с выпадающим списком при помощи CSS

Для удобства я решил выложить уже готовые файлы index.php и mycss.css, которые Вы можете скачать и в готовом виде в заключительном уроке.

Как видим, ничего сложного нет, затратив немного времени, мы оформили шапку для сайта, создали логотип, форму поиска и горизонтальное меню. Кстати если переместить модуль хлебные крошки, он же навигатор сайта (Breadcrumbs) в позицию «position-3» мы переместим его с нижней в верхнюю часть страницы.

joom4all.ru

Урок фотошоп - Как сделать шапку для сайта или блога

Дорогие друзья сегодня мы с вами рассмотрим такой актуальный вопрос – как сделать шапку для сайта или блога? После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе. Делать мы будем вот такую шапку:

шапка для сайта

(нажмите на картику для просмотра оригинала)

 

У меня стоит Photoshop CS4 (английская версия). Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил:

Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мульфильмом и фильмов. Снизу на шапке будет горизонтальное меню (по центру).

шапка для сайта

(нажмите на картику для просмотра оригинала)

И так, садитесь по удобнее, я начинаю свой рассказ 🙂 1. Создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп). В окошке я указал следующие параметры:

автоматически выбрать слойВ итоге получился новый документ: новый документ фотошоп

(нажмите на картику для просмотра оригинала)

После этого сделаем небольшую настройку фотошопа: Ставлю галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

автоматически выбрать слойВключаем шкалу-линейку для документа: Идем Views→Rules (Вид→Линейки или просто жмем CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка. направляющие фотошопСразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие данные: отображение в пикселях фотошопПосле этого я с помощью направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаю места под основные элементы шапки: направляющие фотошоп

(нажмите на картику для просмотра оригинала)

Направляющие можно Показывать/Прятать с помощью View→Show→Guides (Вид→Показывать→Направляющие) или CTRL+; 2. Приступим к созданию основных элементов шапки. Создадим фон для шапки. Идем Windows→Layers (Окно→Слои или F7). Дважды щелкаем по слою Background, тем самым преобразуем его в простой слой (название слоя я указал – fon-shapki)

фон в слой фотошопДалее еще раз дважды щелкаем по слою fon-shapki и открывается окошко со стилями слоя, там выбираем нужный стиль для слоя, я выбрал градиентную заливку — Gradient Overlay (Заливка градиентом) и поставил следующие настройки. Щелкаем два раза по полоске с градентом: стили слоя фотошопВ следующем окошке щелкаем мышкой по левому маркеру: цвет фотошопВ открывшемся окошке, внизу указываем цвет 196ca6 и жмем OK. стили слоя фотошопДалее щелкаем по правому маркеру и в открывшемся окошке указываем цвет 0048a0 и жмем OK. Далее копируем наш слой с фоном. В палитре Layers (Слои, F7) выбираем наш слой мышкой, далее кликаем мышкой на слои и не отпуская кнопки мыши переносим слой на следующую иконку стили слоя фотошоп и отпускаем мышку. Создастся новый слой – копия предыдущего (можно просто нажать CRTL+J). Не снимая выделение со нового слоя, установим ему Opacity (Непрозрачность) в 18%. копировать слой фотошопДалее щелкаем два раза новому слою, снимаем галочку с Gradient Overlay (Заливка градиентом) и ставим галочку Pattern Overlay (Заливка текстурой), ставим следующие настройки: копировать слой фотошопВсе фон для шапки у нас готов. 3. Далее сделаем фон для горизонтального меню снизу. Делаем новый слой – нажимаем по пиктограмме новый слой фотошоп или просто жмем Shift+Ctrl+N (у нас получился новый прозрачный слой). После этого выбираем инструмент новый слой фотошопRectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение. фон меню фотошоп

(нажмите на картику для просмотра оригинала)

После этого заливаем наше выделение произвольным цветом. Берем инструмент заливка фотошопPaint Bucket Tool (Ведро, G) и кликаем по выделению (я выбрал цвет 165394).

цвет заливки фотошопПереходим в стили нового слоя и ставим галочки напротив следующих пунктов: Drop Shadow (Отбрасывать тень), Gradient Overlay (Градиентная заливка), Stroke (Обводка), со следующими настройками: тень фотошопградиент фотошопградиент фотошопобводка фотошопПосле этого укажем Opacity (Непрозрачность) слою в 80%. фон меню фотошоп

(нажмите на картику для просмотра оригинала)

После того как у нас готов фон, можно приступать к созданию других элементов шапки. 4. Напишем название сайта, слоган и текст для горизонтального меню. Для этого выбираем инструмент текст фотошопHorizontal Type Tool (Горизонтальный текст) и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее. Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструмента двигать объекты фотошопMove Tool. Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:

работа с текстом фотошопДля слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста: работа с текстом фотошопДля пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста: работа с текстом фотошопИ вот что у меня получилось. текст в фотошоп

(нажмите на картику для просмотра оригинала)

Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop Shadow и Bevel and Emboss).

работа с тенью фотошопвыдавливание фотошопЧто бы изменить цвет текста, выбираем инструмент текст фотошоп, щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить цвет (я выбрал цвет — add7fe). цвет текста фотошоп5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайте Iconfinder.com, просто заходим на сайт, вводим слово характеризующее нужную нам тематику (я ввел слово — Video) и нажимаем Search (Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем правой кнопкой мыши по картинке и выбираем пункт Сохранить изображение…) ее на компьютер. Я выбрал такую картинку: иконка для сайта или блогаДалее открываем картинку в фотошопе File→Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструмент двигать объекты фотошопMove Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя). копия слоя фотошопВ появившемся окошке указываем, какой слой, в какой документ копировать: дубликат слоя фотошопПосле проделанных манипуляций иконка должна добавиться в документ с шапкой. Как видим, она имеет гораздо больший размер, чем нам нужен, будем ее уменьшать. трансформация слоя фотошопДля этого идем Edit→Free Transform (Правка→Свободная Трансформация, Ctrl+T). Вокруг картинки образовалась рамочка с маркерами. Далее для равномерного уменьшения картинки, нажмем Shift и не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем картинку как нам нужно. трансформация слоя фотошопУ меня получилось вот так: текст в фотошоп

(нажмите на картику для просмотра оригинала)

Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта или блога. 6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слой Shift+Ctrl+N. Выбираем инструмент инструмент новый слой фотошопRectangular Marque Tool (Прямоугольное выделение) и рисуем прямоугольное выделение. Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).

направляющие фотошопЗаливаем наше выделение любым цветом берем инструмент заливка фотошопPaint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow, Color Overlay: тень фотошопзаливка цветом фотошопТематические картинки мультфильмов и фильмов я взял с сайта Kinomania.ru. После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой.

([color=#ce2c2c]Внимание![/color] Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в документе можно изменять мышью. Для этого в палитре Layer (Слои, F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь перетащите слой выше или ниже других слоев в документе.) Если вы хотите что бы слой оказался выше всех слоев – выделите слой и нажмите Shift+Ctrl+].)

маски в фотошоп

(нажмите на картику для просмотра оригинала)

Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе. Выбираем слой с нашей картинкой, после этого выбираем инструмент инструмент Прямоугольное выделение фотошопRectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.

маски фотошопПосле этого в палитре Layers (Слой, F7), нажимаем на кнопочку маски фотошоп. маски фотошопДалее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской. После этого выбираем саму картинку. маски фотошопПроделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно клавишами — Вправо, Влево, Вверх и Вниз на клавиатуре или с помощью инструмента двигать объекты фотошопMove Tool. маски фотошопДвигая и трансформируя картинку добьемся нужного нам результата: маски в фотошоп

(нажмите на картику для просмотра оригинала)

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

маски фотошопДалее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами). изменить цвет фотошопПосле этого выбираем инструмент кисть фотошоп Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет — как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться. маски фотошопПроще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто). Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки). маски фотошопДобавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow (Внутренняя Тень). маски фотошопвот что получилось: Inner Shadow фотошопОсталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога. шапка для сайта (нажмите на картику для просмотра оригинала) Шапка получилась простенькая, но со вкусом.

blogohelp.ru

Как создать шапку для сайта в программе XHeader

Приветствую, друзья! Если вам нужно создать шапку сайта, то моя находка – программа для создания шапок для сайта HXEADER — поможет в этом. Программа XHEADER будет интересна тем, у кого нет фотошопа, и очень даже пригодится тем, у кого нет никаких навыков работы в онлайн графических редакторах.

Бесплатную англоязычную версию я скачала на сайте разработчика XHEADER.COM – это правило без исключений. Весит она около 50 мегабайт. При запуске программы XHeader и при сохранении готовой шапки появляется окошко с предложением приобрести полноценную ее версию, но я жала «No thanks», поскольку не собираюсь открывать скорняжное производство. 🙂 Нужда была разовая, хотя мне очень понравилось работать в программе, которая не требует вообще никаких мозгов. А если они есть и применить их, то результата можно добиться отличного. Вообще думаю сделать новые шапки для страниц в социальных сетях, правда, там требуемые размеры очень сильно отличаются от заложенного в программу стандарта. И блог этот давно плачет.

Что мы имеем, установив программу XHeader? Во-первых, порядка 500 готовых дизайнов шапок для сайтов и блогов различных тематик, которые можно использовать как базу. Размеры шапки 950 на 175 пикселей. Вполне нормальные размеры, в соответствии с современными требованиями, но если ширина сайта чуть больше или меньше, как изменить размер, в программе я не нашла, потому увеличивала готовый хедер на недостающие 10 px по ширине в другом редакторе.

В шаблон шапки можно вставлять изображения, писать текст с эффектами или без них. Тексты вставляются и скопированные, с помощью клавиш ctrl+v. Есть достаточно большой выбор шрифтов. А вот палитра слабовата. И пипетки нет, как в фотошопе. Этот момент нужно предусмотреть заранее, если требуется сохранить гармонию в цвете.

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

создание шапки сайта в программе XHeaderКак вы видите, я выбрала создание новой шапки.

Выбор шаблона для шапкиИ тут же открылся выбор шаблона.

Меню программы для создания хедеровУдобный интерфейс программы. Меню доступно для каждого шаблона, с которым мы «колдуем».

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

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

Как вам программа? Да!!! Совсем забыла! Не забудьте сжать картинку перед загрузкой на сайт. Моя шапка с сосисками в полном размере в формате PNG весила 171 kb, после сжатия стала весить 31,9 kb. Это очень важно — не нагружать сайт тяжелыми изображениями.

nadezhdakhachaturova.ru

Делаем шапку для сайта в Фотошоп

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

Лично я вижу тенденцию к увеличению внимания к заголовкам для сайта/блога.

Во время урока мы будем практиковать использование Инструмента Перо (Pen Tool), различных вариантов регулирования изображения (adjustment), инструмента свободного трансформирования (free transformation), стилей наложения слоя (blending styles) и фильтры  (filter). Надеюсь, вы будете наслаждаться уроком!

Вот предварительный просмотр моих окончательных результатов:

Итак, начнем!

Шаг 1. Создайте документ размером 1200 x 600 пикселов (Обратите внимание, что вы можете задать любой размер, который вы считаете подходящим для дизайна вашего сайта, этот размер может быть использован только для практической цели). Заполните фоновым цветом с черным.

Создайте новый слой  Заливка Радиальным Градиентом  и используйте Градиент (Gradient Tool) (G), выберите опцию Радиальная заливка (Radial Fill), и заполните вновь созданный слой, как показано ниже: (Вы можете использовать любой цвет, который хотите).

Затем создайте новый слой и назовите  Заливка Угловым градиентом выше слоя  Заливка Радиальным Градиентом, установите режим наложения перекрытие (overlay)

Используйте инструмент Прямоугольная область (M) (Rectangular Marquee Tool), чтобы выбрать центральную часть слоя, снова использовать Градиент ( Gradient Tool) (Установить цвет переднего плана  белый, с прозрачным фоном), на этот раз мы выбираем опцию Угловой градиент (Angle Gradient), заполните выделение как показано ниже:

Шаг 2. Копируйте слой Заливка Радиальным Градиентом один раз и выберите режим наложения (blending option) дублированного слоя Перекрытие (Overlay), перейдите к Правка> Трансформация> Повернуть (Edit > Transform > Flip Horizontal) по горизонтали и поверните слой горизонтально. Слейте два слоя вместе. Установите режим наложения (blending option) Перекрытие (overlay) после слияния.

Примените Стиль слоя - Тень (Drop Shadow) к слою слияния, как показано ниже:

Затем уменьшите непрозрачность для слоя Заливка Радиальным Градиентом до 60% и у вас будет следующий эффект:

Затем создайте новый слой между предыдущими двумя слоями, назовите его Освещение центра. Выберите большую мягкую круглую кисть (600px в моем случае), выберите цвет переднего плана белый, и нарисуйте одну точку в центре слоя:

Установите режим наложения  Перекрытие (Overlay) и вы получите следующий эффект:

Шаг 3. Я решил добавить  этому изображению немного глубины и немного трехмерности. Итак, выберите слой Заливка угловымградиентом, нажмите Ctrl + T и используйте Свободную трансформацию (free transformation), выберите Перспективу (perspective) и преобразуйте слой, как показано ниже: (уменьшите ширину для верхней границы рамки)

Вот результат после перспективе слоя:

Шаг 4. Создайте новый слой Сверкающая линия, используйте инструмент Перо (Pen Tool), чтобы создать работу, как показано ниже:

Затем щелкните правой кнопкой мыши и выберите Обводка контура (Stroke Path) и выберите Кисть (brush) (перед этим выберите мягкую круглую кисть маленького диаметра). Убедитесь, что у вас включена опция Имитировать нажим.

Вот как должно выглядеть сейчас:

Шаг 5. Дублируйте слой Сверкающая линия  несколько раз, используйте функцию Свободная трансформация (Free Transformation), чтобы вращать, искажать, изменять размеры дублированного слоя и смешивать линии вместе:

Слейте эти дублированные слои вместе и дублируйте получившийся слой несколько раз, снова используйте Свободную трансформацию (free transformation), чтобы добавить еще несколько линий на изображении:

Дублируйте слитый слой, примените к нему фильтр Размытие по Гауссу (Gaussian Blur) радиус размытия 4 пикс.

Сейчас ваш рисунок должен выглядеть так:

Шаг 6. Создайте новый слой, назовите Сияющая точка, загрузите выделение для слоя Сверкающая линия, затем нажмите правой кнопкой и выберите пункт Образовать рабочий контур (Make Work Path):

Выберите допуск для рабочего контура (work path)  0.5 пикс. Теперь выберите мягкую круглую кисть радиусом 3 пикселя со следующими динамическими параметрами настройки кисти:

Также убедитесь, что стоит галочка  Сглаживание (Smoothing).На слое Сияющая точка, сделайте обводку контура этой кистью, и вы увидите следующий эффект:

Шаг 7. Теперь мы можем добавить немного облака/дыма у основания этих линий. Чтобы сделать это, мы просто создаем новый слой и используем Инструмент Лассо (Lasso Tool) с растушёвкой 40 пикселей, чтобы выбрать нижнюю часть этих ярких линий, и используйте  Фильтр > Рендеринг > Облака, создайте облако (выберите цвет переднего плана белый, заднего -  черный)

Вы можете заметить, что я также использую фильтр Блик  (Filter > Render > Lens Flare ) со следующими параметрами настройки, чтобы выдвинуть на первый план часть центра облака:

Выберите Режим наложения (blending option) Перекрытие (overlay) и вы получите такой эффект:

Наконец, мы помещаем имя сайта и навигацию на изображении:

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

Вот мое заключительное изображение для этой обучающей программы:

Альтернативные версии:

Надеюсь, что вам понравился урок!

Автор: psdvault

photoshop-master.ru


Смотрите также