Красивое оформление сайта.

Красивое оформление сайта.

Я был просто шокирован когда увидел в liveinternet результат изменения оформления сайта, рейтинг сайта поднялся на 52000, такие скачки у меня были только когда начинал заполнять сайт, так что теперь с уверенностью могу сказать что красивое оформление - это огромный плюс рейтингу вашего сайта. Ну что тогда приступим и создадим красивое оформление для вашего сайта собранного на движке WordPress.

Выбираем шаблон, тему для WordPress.

Данный шаг очень важный, ведь от того на сколько шаблон гибок, насколько грамотно изготовлен и какие инструменты он имеет для настройки, особенно если вы не сильны в html-коде, зависит как сможете его оформление подогнать под тематику сайта. Мой выбор пал на шаблон zeeDisplay который нашел на blogstyle. ru? вот о том как его украшал сейчас и расскажу.

Рисуем header (заглавную картинку).

Скачав шаблон на компьютер, извлек его из архива в папке images нашел картинку шапки default-header и открыл ее в Photoshop, создал новый слой который залил цветом - будущим основным фоновым цветом сайта. Скачал из интернета картинки подходящие к теме сайта поскольку задумано было сделать набор предметов и персонажей на одной площадке. Подбирал картинки таким образом чтобы было легко отделить изображение от фона в основном на белом фоне. Выделяем изображение, копируем на новый слой и переносим на макет шапки, добавляем тень. Если предмет полупрозрачный, как в моем случае кусок кинопленки, то просто переносим, подгоняем по размеру и задаем параметр наложения "умножение".

Выделение объекта, перенос, добавление тени.

Для выделения объекта находящегося на равномерном, например белом фоне удобней использовать волшебную палочку, кликаем ей по фону картинки, смотрим весь ли фон выделился, с помощью волшебной палочки и лассо (у обоих должен быть включен режим добавление к выделенной области) вначале выделяем то что нужно убрать, затем кликнув по выделенной области правой кнопкой мыши в меню выбираем скопировать на новый слой, таким образом мы получили объект на прозрачном фоне который и перетаскиваем (выбрав инструмент перемещение) на наш макет. Подгоняем под нужный нам размер нажав сочетание клавиш (Ctrl+T), чтобы сохранить пропорции удерживаем нажатой клавишу (Shift) и ухватив указателем за угол рамки сжимаем или растягиваем изображение до нужного нам размера, окончание работы (Enter). Подогнав размер и разместив объект в нужном месте делаем ему тень, есть несколько вариантов все зависит от харрактера объекта приведу пару примеров.

Первый способ: Если тень повторяет абрис нижнего края объекта. Копируем слой с объектом удерживая нажатой клавишу (Alt) в окне слои хватаем требуемый слой и смещаем его ниже данного, образуются подчеркнутые границы слоев где отпускаем, образовался дубликат нашего слоя расположенный ниже. Теперь уберем его цветность, для этого вызываем уровни нажав (Ctrl+L) и на нижней шкале "выходные значения" бегунок белого цвета перемещаем до конца влево "ОК", активируем инструмент перемещение (клавиша "V") и стрелкой на клавиатуре выдвигаем наш теневой слой вниз. С помощью инструментов перспектива и деформация (которые находятся в главном меню: редактирование: трансформация) изменяем направление тени. Далее уменьшаем непрозрачность тени и чтоб она выглядела реальней проходим по ней инструментом размытие и обрабатываем края мягким ластиком, лишние участки тени стираем. Чтобы прикрепить тень к объекту, на случай если вы будете менять расположение его на макете соединяем слои тени и объекта для этого выделив один слой нажимаем клавишу Shift и кликаем по второму, затем комбинация клавиш (Ctrl+E).

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

Устанавливаем и настраиваем тему на WordPress.

Закончив картинку шапки сайта сохраняем ее выбрав вид сохранения (сохранить для Web и устройств...) в формате jpg, я сохранил с заменой в папке images распакованного шаблона, папку которого обратно сжал в WinZip (Win7 и WinRAR не подходят) этот архив и установил как тему для WordPress, впрочем если для вас такой вариант затруднителен можете сохранить картинку в удобном вам месте, установить тему в WordPress используя скачанный архив, а картинку загрузить используя инструменты WordPress в админ панели - дизайн - заголовок, выбираем картинку на компьютере, загружаем. Далее определяем и устанавливаем цвет фона, для этого в Photoshop кликаем по выбору цвета, наведя курсор на картинку он выглядит в виде пипетки, кликаем по фону картинки. В окне палитры цветов, в нижней части после знака решетки копируем код цвета и вставляем его дизайн - фон - цвет в специальное поле после решетки.

Создаем логотип сайта.

Замеряем и определяем размер логотипа экранной линейкой которая есть в утилите FastStone Capture, ознакомиться и скачать которую можно здесь.

Я сделал логотип размером ширина - 300px высота - 80px, создаем новый файл с необходимыми размерами, сразу добавляем новый слой, выбираем ввод текста, подбираем шрифт, стиль, цвет пишем название сайта, можно добавить изображение, впрочем работа с текстами в фотошопе это следующая тема, а сейчас как сохранить и установить изготовленный логотип на сайт. Сохраняем все так же для Web и устройств только в формате PNG-8, да перед сохранением не забудьте выключить нижний фоновый слой - чтобы логотип получился на прозрачном слое. Устанавливается логотип по крайней мере в моем шаблоне следующим образом: в админ панели идем - медиафайлы - добавить файл - выбираем наш логотип на компьютере, загружаем, после загрузки кликаем по нему, в раскрывшемся окне редактирования копируем адрес файла который вставляем в настройках темы в поле для ввода адреса логотипа.


Карта сайта


Информационный сайт Webavtocat.ru