С чего начать? С конкретики. Макет не рисуется просто так, от фонаря, лишь бы было круто или просто красиво. Всегда есть четкая задача и точка старта. Это может быть, например, имя домена, или уже имеющийся лого компании (если малюете шаблон для какой-нибудь инет-лавки), или общая идея блога. Вот от них и следует отталкиваться.
Для своего примера я придумал не какой-то гипотетический блог, а конкретную тему, а именно: обзор кульных креативных идей, воплощенных в различных предметах. Это могут быть как крутые и стильные девайсы: мебель, техника, изображения, фотографии, так и те же шаблоны Вордпресс. Следом появилось название: ice pepper. В этом, противоречивом на первый взгляд, названии есть что-то цепляющее. Далее я зарегистрировал одноименный домен icepepper.net и уже после этого только появилась образная идея, каким этот шаблон должен быть. Это, конечно же, не догма. Каждый волен творить по собственному сценарию, но все же придерживайтесь конкретики, а не абы как.
Прежде, чем открывать замечательную программу Фотошоп®, я настоятельно рекомендую взять листок бумаги А4 и обычной шариковой ручкой набросать хотя бы примерный план того, что потом превратится в макет. Пусть даже вы не изобразите ничего выдающегося. Суть не в этом. Когда вы сделаете бумажный набросок, то потом вам будет легче начать рисовать в Фотошопе®. Исчезнет так называемая “боязнь белого листа”.
Для своего проекта я сделал вот такой простенький рисунок:
Поясню вкратце, что тут есть.
Во-первых, ширина макета 960 пикселей. Выбрана она неслучайно. Есть уже устоявшиеся пропорции, с которыми я очень рекомендую ознакомиться на сайте 960 Grid System (http://960.gs/) и скачать себе PDF файл с примерами разметок (всего 180 кБ). В двух словах: ширина блога должна выбираться исходя из следующих размеров — 960, 880, 800, 720 пикселей (меньше нет смысла). Первые два подходят для 3-колоночной верстки, вторые два — для 2-колоночной.
Во-вторых, в небольшой по высоте шапке я разместил лого, название блога, ниже описание и справа — список страниц в столбик. Рисуя шапку, как впрочем и все остальное, сразу прикидывайте как вы все это богатство будете верстать. Потому что можно намалевать такое, что потом придется долго ломать голову как все это правильно уложить, да чтобы еще во всех браузерах показывало одинаково, а не задом наперед. К примеру, в нашем рисунке можно в шапке сразу выделить три области: лого, заголовок с описанием, список страниц. То есть уже можно прикинуть, что будет один общий блок с идентификатором #header, в котором будут вложены заголовок первого уровня h1 и три других блока:
.logo
.description
#menu
В-третьих, ширина сайдбаров. Да, именно так! Я рекомендую начать с них, а не с основного содержимого (контента) по той простой причине, что здесь кроме навигации будут всевозможные баннеры, кнопки, окно поиска и пр. Даже если вы не собираетесь сейчас цеплять какие-либо баннеры и вообще не желаете иметь с ними ничего общего, то не факт, что в будущем вам не захочется это сделать. А потому нужно заранее озаботиться местом под них. Существуют стандартные размеры баннеров. В сайдбар обычно помещают небольшие, 125х125 пикселей или 100х100. Я выбрал второй размерчик и задал ширину левого сайдбара в 210 пикселей, чтобы можно было поместить рядом 2 баннера 100х100. Ну и плюс 10 пикселей запас.
Кроме того, размещение блоков в сайдбарах тоже отнюдь не случайно. В левом будут свежие посты, свежие же комментарии и облако тэгов. В правом — окно поиска, рубрики (категории), архив и плюс какие-нибудь пузомерки-счетчики. Почему именно так? Заголовки постов, выдержки из комментов и облако тэгов — сами по себе довольно объемные объекты. А наименования рубрик, года или месяцы из архива и всякие счетчики обычно небольшие по ширине и занимают немного места. Поэтому под правый сайдбар я выделил всего 160 пикселей по ширине. В результате под основное содержимое у нас осталось 590 пикселей — вполне достаточная ширина, чтобы разместить приличного размера фотографии и тексты.
Во-первых, ширина макета 960 пикселей. Выбрана она неслучайно. Есть уже устоявшиеся пропорции, с которыми я очень рекомендую ознакомиться на сайте 960 Grid System (http://960.gs/) и скачать себе PDF файл с примерами разметок (всего 180 кБ). В двух словах: ширина блога должна выбираться исходя из следующих размеров — 960, 880, 800, 720 пикселей (меньше нет смысла). Первые два подходят для 3-колоночной верстки, вторые два — для 2-колоночной.
Во-вторых, в небольшой по высоте шапке я разместил лого, название блога, ниже описание и справа — список страниц в столбик. Рисуя шапку, как впрочем и все остальное, сразу прикидывайте как вы все это богатство будете верстать. Потому что можно намалевать такое, что потом придется долго ломать голову как все это правильно уложить, да чтобы еще во всех браузерах показывало одинаково, а не задом наперед. К примеру, в нашем рисунке можно в шапке сразу выделить три области: лого, заголовок с описанием, список страниц. То есть уже можно прикинуть, что будет один общий блок с идентификатором #header, в котором будут вложены заголовок первого уровня h1 и три других блока:
.logo
.description
#menu
В-третьих, ширина сайдбаров. Да, именно так! Я рекомендую начать с них, а не с основного содержимого (контента) по той простой причине, что здесь кроме навигации будут всевозможные баннеры, кнопки, окно поиска и пр. Даже если вы не собираетесь сейчас цеплять какие-либо баннеры и вообще не желаете иметь с ними ничего общего, то не факт, что в будущем вам не захочется это сделать. А потому нужно заранее озаботиться местом под них. Существуют стандартные размеры баннеров. В сайдбар обычно помещают небольшие, 125х125 пикселей или 100х100. Я выбрал второй размерчик и задал ширину левого сайдбара в 210 пикселей, чтобы можно было поместить рядом 2 баннера 100х100. Ну и плюс 10 пикселей запас.
Кроме того, размещение блоков в сайдбарах тоже отнюдь не случайно. В левом будут свежие посты, свежие же комментарии и облако тэгов. В правом — окно поиска, рубрики (категории), архив и плюс какие-нибудь пузомерки-счетчики. Почему именно так? Заголовки постов, выдержки из комментов и облако тэгов — сами по себе довольно объемные объекты. А наименования рубрик, года или месяцы из архива и всякие счетчики обычно небольшие по ширине и занимают немного места. Поэтому под правый сайдбар я выделил всего 160 пикселей по ширине. В результате под основное содержимое у нас осталось 590 пикселей — вполне достаточная ширина, чтобы разместить приличного размера фотографии и тексты.
В-четвертых, подвал или иначе — футер (footer). Обычно его делают во всю ширину шаблона. На вкус и цвет, как говорится, волк свинье не товарищ. Я сделал подвал лишь номинально, по ширине блока с контентом, и разместил там ссылку на домен, плюс копирайты и плюс ссылочку на дизайнера, то есть, на себя же любимого ? Правилом хорошего тона считается дублирование в подвале пунктов главного меню. Но это на ваше усмотрение.
Как видим — ничего сложного. Однако уже есть на что опереться. Да, кстати, шаблон я изначально решил делать на английском языке. Просто потому, что название ice pepper blog смотрится и звучит лучше, нежели Блог Ледяного Перца. Ну и, соответственно, раз заголовок на английском, то и все остальное нет смысла писать по-русски, дабы не выглядело “наполовину-переведенной-буржуйской-темой”. Однако для лучшего понимания темы, в книге я некоторые участки кода буду писать с русскоязычными вставками.
Думаю, разберетесь, что к чему ☺
Открываем Фотошоп® !
Ну а теперь самое время открыть программу Фотошоп® и таки начать творить! У меня получился вот такой макетик (уменьшено до 600 px по ширине):
Создаем новый документ размерами 960х800 пикселей с белым фоном. Если у вас до сих пор еще не включено отображение линеек в Фотошоп®, то рекомендую сделать это немедля: View – Rulers (установить флажок). В настройках линеек нужно выставить пикселы: Edit – Preferences – Units & Rulers в окошке Rulers выбрать слово pixels. Теперь у вас в рабочем окне программы сверху и слева появились линейки с делениями в пикселах. Заметьте, что верхний левый угол документа расположен точно напротив нулевых отметок линеек:
Теперь наводим мышку на левую вертикальную линейку, нажимаем левую клавишу и «вытягиваем» тонкую цветную вертикальную полоску, перемещая ее на наш документ. При этом смотрим, чтобы эта полоска на верхней горизонтальной линейке совместилась с отметкой в 590 пикселей. Готово! Одну линейку мы установили. Точно так же поступаем и с другими (этих полосок из линеек можно вытянуть до бесконечности много).
Что у нас в результате должно получиться? Если смотреть на макет слева направо, то разметка должна быть такая: 590px, 210px, 160px. Что касается размеров по высоте, то тут все на ваш собственный вкус. Шапка может быть как 100 пикселей по высоте, так и все 300. Подвал тоже. Руководствуйтесь здравым смыслом и таким соображением: шапка — это «лицо» блога, поэтому должна все-таки быть заметнее, нежели подвал. Хотя возможно вы захотите сделать все наоборот. Дерзайте!
Я намеренно не стану рассказывать во всех подробностях о творческой стороне работы в программе Фотошоп®, полагая, что читатель уже знаком с основными инструментами этого замечательного редактора и умеет рисовать простейшие фигуры. Иначе моя книга превратилась бы в толстый фолиант и далеко ушла бы от основной темы. Ваше внимание я хочу заострить на том, как порезать готовый макет на отдельные картинки, ибо как раз об этом чаще всего и возникают вопросы.
Как была нарисована шапка в нашем макете?
Для начала я просто перелопатил кучу сохраненных файлов с классными дизайнами буржуйских сайтов и нашел один очень подходящий градиент в темно-синих тонах. Я запустил маленькую утилитку Pixie , которой очень удобно находить код цвета просто нацелив указатель мыши на любую точку понравившегося рисунка. Так я определил два нужных оттенка для будущего градиента в шапке: #2D3F49 и #15191C.
Затем я выставил эти два цвета в палитре Фотошоп®, включил инструмент Gradient Tool, установил в нем режим Radial Gradient и провел мышкой от центра шапки к правому краю. Получился своеобразный эффект подсветки центра шапки, а края как бы ушли в тень. Затем на другом слое я обычной шейповой фигурой (Custom Shape Tool) нарисовал ярко-синий перчик, рядом сделал надпись из пары слов: ice и pepper, потом объединил все слои кроме фона и также затенил получившееся лого градиентом. Заголовок и описание набраны обычным шрифтом Arial, хотя буквы были сдвинуты ближе на -50. Список страниц справа был выделен, и на новом слое также залит светлым градиентом из нескольких пастельных цветов. Как потом реализовать эти цвета при верстке я расскажу позднее.
Затем я выключил отображение слоев с логотипом, заголовком, описанием и списком страниц, оставив только фон. Если кто не помнит как выключить слой, подсказываю: в панели слоев Layers есть иконка глаза Кликнув по ней, мы данный слой выключаем. Соответственно, изображение данного слоя становится невидимым. Что нам и требуется.
Далее при помощи инструмента Crop Tool мы выделяем всю шапку целиком, нажимаем клавишу Enter и получаем фон для шапки. Сохраняем его с именем bg-header в папку с именем images. Эта папка потом будет включена в состав шаблона.
Важно!
Имена изображений пишите английские и без пробелов!
Правильно: bg-header, bg_header, bgheader.
Неправильно: bg header, бг-хедер.
После выполнения данной процедуры вернитесь в панели History на шаг назад, чтобы вернуть состояние макета к виду «до обрезания».
Лирическое отступление:
Рекомендую всем рисункам давать понятные и подходящие имена. Так как эта картинка шапки у нас будет играть роль фона у блока header, то и имя она получает соответствующее — bg-header. Кроме того, при сохранении (разумеется «для веб» — Save for Web) всегда выбирайте наиболее подходящий формат изображения. Например, все шрифтовые, шейповые картинки, а также плавный 2-цветный градиент более качественно и чисто сохраняется в формате GIF. Можно и в PNG, но вес будет довольно приличным. Все полупрозрачные картинки — однозначно в PNG, ибо «полупрозрачный» GIF выглядит безобразно. Многоцветные градиенты и фотографии лучше сохранять в формате JPG.
И еще пару слов о так называемом «качестве сохранения» — Quality. При сохранении в GIF не всегда обязательно в окошке Colors оставлять, стоящее там по-умолчанию, число 256. Если рисунок однотонный, то можно без видимых потерь уменьшить количество цветов до 128, а то и до 64. Вес картинки существенно уменьшится. В формате JPG также лучше придерживаться качества High. В формате PNG-24 качество не выставляется. В любом случае, в окне предварительного просмотра увеличьте картинку до 400 – 800% и пробуйте переключать форматы. Вы сразу заметите, как меняется качество рисунка, как появляется или исчезает мусор в виде разноцветных одиночных пикселов.
Теперь нам нужно сохранить лого — рисунок с перчиком. Точно также выделяем инструменnом Crop Tool участок шапки с лого и нажимаем клавишу Enter. По высоте это изображение лучше сделать равным высоте шапки, чтобы потом не мудрить с его расположением.
Ширина же не критична. Вообще что касается линейных размеров: мы с вами делаем довольно простой по графике шаблон. Это означает, что точными размерами картинок, его составляющих, вполне можно пренебречь. Ну согласитесь, нет особой нужды вымерять то же самое лого по ширине, вылавливая буквально по пикселу границы. Именно потому, что тесных границ между изображениями нет. Это когда в макете присутствует довольно много разных элементов: всяких скругленных уголков, вертикальных и горизонтальных линий, то да, там придется очень четко разрезать макет на части и пользоваться уже инструментом Slice Tool , а не Crop Tool
Основное содержимое (контент) и сайдбары.
Фон у всех троих будет общий, а именно: узкая горизонтальная полоса шириной во все 960 пикселей и высотой в 5. Поле контента — просто однотонная заливка цветом #28363E, а оба сайдбара имеют градиент слева-направо от темного к светлому: #020202 — #2E3F47.
Сделать такую полоску проще простого: выбираем на макете свободный от шрифта и прочих украшательств участок, затем инструментом Crop Tool выделяем полоску по всей ширине макета и нажимаем клавишу Enter. Готово! Сохраняем эту картинку с именем bg-container. Кстати, на счет высоты полоски: не обязательно делать ее именно в 5 пикселов. Можно и 1 и 100. Тут тоже руководствуйтесь здравым смыслом. Слишком мельчить ни к чему, а слишком крупный может весить изрядно. В любом случае при верстке мы зададим заполнение фоном в блоке container по вертикали (repeat-y).
В принципе можно поступить иначе: задать для блока контента фон цветом #28363E, а для сайдбаров нарисовать только полоску с градиентом и каждому из них в отдельности задать эту полоску фоном, также с повтором по вертикали. Но в этом случае у нас фон сайдбаров будет заканчиваться там, где кончается полезное содержимое сайдбара, то есть текст. Ниже будет снова однотонный фон, такой же, как и у блока с контентом. А это выглядит не очень красиво и даже неаккуратно.
Теперь нам в этой части макета осталось только вырезать иконку у заголовка поста, фон под поисковую форму (он у нас рисованный, с внутренней тенью, а не просто белый прямоугольник), иконку RSS-фида и еще одну иконку у заголовков блоков в сайдбарах. Пользуясь инструментом Crop Tool , так же последовательно вырезаем их всех и сохраняем в папке images.
Небольшая хитрость:
иконку RSS-фида я специально сделал во всю ширину правого сайдбара. Дело в том, что разные браузеры по-разному высчитывают отступы, и слишком коротко обрезанную картинку потом трудно будет четко поставить на место. При использовании в качестве фона градиента, сдвиг хоть на 1 пиксель уже будет заметен, а это некрасиво. А так наша картинка четко «упрется» в края блока и никуда уже не денется. Напомню: размер правого сайдбара по ширине 160 пикселов, стало быть, и иконку RSS-фида делаем такой же.
