Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2

Автор: myspears | Категория: Уроки Photoshop » Web | 28-01-2012, 14:16
Создание макета страницы с презентацией компании. Часть 2

Продолжение Начало тут


Часть 2

Шаг 8 – Создание слайдера
Допустим, нам нужно отображать продукцию в слайдере. Для этого давайте сначала с помощью направляющих обозначим определенную область. Моя получилась 278 пикселей в ширину, но фактически – это случайная величина. Я просто решил, чтоб этой ширины вполне достаточно, а о конкретном количестве пикселей думал уже в последнюю очередь.

Создание макета страницы с презентацией компании. Часть 2



Займемся навигационными стрелками. Наш слайдер будет организован по принципу замкнутой петли, следовательно, возможные состояния кнопок будут следующими: “нормальное”, “зависшее”, “кликнутое”. Нам предстоит подготовить различные стили для каждого из этих состояний. Нарисуем круг цвета #858584.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



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


Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Разместите на фигуре стрелку. Для этого можно использовать инструмент печати, выбрав симпатичный готовый значок “ Трансформировать > Отразить горизонтально (Edit > Transform > Flip horizontal)), и расположите кнопку на противоположной стороне макета. Теперь, поместите на макете изображение какого-нибудь образца продукции, напечатайте заголовок и какое-нибудь его описание. Для текста используйте один из темных оттенков серого.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Создадим разделитель. При помощи инструмента Область (горизонтальная строка) (Single Row Marquee Tool) создайте выделенную область вдоль направляющей, и залейте ее белым цветом.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Теперь, не снимая выделения, еще раз передвиньте ее на один пиксель вверх, пройдите в меню Выделение > Трансформировать выделение (Select > Transform Selection) и переместите ее верхнюю грань вверх.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Далее, уменьшите непрозрачность этого слоя примерно до значения 15%.

Шаг 9 – Основной контент
Напечатайте какой-нибудь заголовок и текст в верхней части области основного контента. И снова для заголовка я использовал шрифт Georgia, и Arial – для самого текста.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



А сейчас я покажу вам как быстро и легко создать модель маркированного списка в Photoshop. Как известно, Photoshop создан для растровой графики, и его возможности по форматированию текста очень ограничены. Однако и имеющихся возможностей для наших с вами нужд вполне достаточно. При помощи инструмента Текст (type tool) выделите область, в которую нужно будет внести какой-нибудь текст, подлежащий маркированию.

Создание макета страницы с презентацией компании. Часть 2



Выделите весь текст, пройдите в меню настроек символов и задайте интерлиньяж (leading) примерно 22 pt., расширяя, таким образом, текст по вертикали.

Создание макета страницы с презентацией компании. Часть 2



Теперь, поместите курсор в начало текста (в режиме редактирования текста, конечно), удерживая Alt, нажмите клавишу 7, затем два или три раза нажмите пробел. Вид созданного символа табуляции будет зависеть от использованного шрифта.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Выделите весь текст и в меню настроек абзаца (Paragraph) введите в окно отступа первой строки (indent first line) какое-нибудь отрицательное значение. Все! Можете наслаждаться отличным протабулированным списком.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Далее, под белой строкой прочертите прямоугольник со скругленными краями (rounded rectangle), так как показано ниже. Я использовал цвет #f27600.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Я также, разместил несколько логотипов компаний-клиентов, но работу над их выравниванием легче проделать в CSS, а пока это только прикидка:

Создание макета страницы с презентацией компании. Часть 2



Шаг 10 – Рассылка новостей
На этом шаге мы создадим красивое завершение окна основного контента в виде области для подписки на новости. При этом за основу будут взяты копии уже созданных нами элементов. Начните с прочерчивания однопиксельной полосы во всю ширину макета страницы. Сделайте ее темно-серой, почти черной, и сильно уменьшите непрозрачность слоя. В моем случае – это полоса темно серого цвета с непрозрачностью 20%. Она должна быть едва заметной. За счет своей низкой непрозрачности она в какой-то степени унаследует текстуру фона страницы. В данном конкретном случае – это не очень существенно, но запомните этот прием на будущее.

Создание макета страницы с презентацией компании. Часть 2



Напечатайте заголовок шрифтом Georgia, какую-нибудь дополнительную информацию шрифтом Arial, и просто скопируйте поле поиска. Затем замените иконку и удалите градиент.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Шаг 11 – Нижняя часть страницы
Создайте новую группу для нижней части страницы. Убедитесь, что созданная группа размещена под области с новостной подпиской, так, чтобы элементы, созданные до этого, накладывались на область нижней части (“футера”).

Создание макета страницы с презентацией компании. Часть 2



Прочертите фигуру цвета #333333, которая перекрывала бы всю нижнюю часть макета, и у самой нижней кромки наложите резкий градиент. Если у вас недостаточно места, или же у вас его слишком много, воспользуйтесь инструментом Обрезка (Crop Tool). Вы можете использовать его как для уменьшения размера холста, так и для его расширения. Поэкспериментрируйте с ним, даже если у вас достаточно места. Эта маленькая хитрость, о которой многие не знают, но которая может оказаться очень полезной.

Создание макета страницы с презентацией компании. Часть 2



Добавляем дополнительные элементы навигации:

Создание макета страницы с презентацией компании. Часть 2



Далее, создадим еще кое-какие элементы, которые должны быть выровнены по предыдущему, но точным позиционированием мы займемся в HTML/CSS. Если уж очень захочется, можете выровнять их вручную при помощи инструмента Перемещение и параметров выравнивания. Затем нам предстоит создать форму для партнеров и ссылку на центр поддержки.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Сохраните документ под названием index.psd или main_page.psd. На самом деле название – не принципиально, лишь бы вы сами знали что это за файл. Обратите внимание на область контента, которая выделена красным цветом. Удалите все слои, относящиеся к ней. Хотя, если у вас нет проблем со свободным объемом оперативной памяти, можете просто сделать их невидимыми. Но я, все-таки, рекомендую удалить их, оставив только элементы, которые мы реально будем использовать. Теперь сохраните документ через опцию Сохранить как… (SAVE AS) под названием blank.psd.

Создание макета страницы с презентацией компании. Часть 2



Шаг 12 – Отдельная страница с образцом продукции
Итак, вот что мы имеем на данный момент. Это наш пустой документ, причем открытый. Сохраните его как single.psd, для того, чтобы при работе с ним, наш исходный blank.psd остался нетронутым.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Если вам интересно как я прочертил такие прямые линии, простой кистью, отвечу: выберите кисть, кликните в какой-либо точке холста, зажмите Shift и кликните в другой точке. Видите? Линия точно легла от первой точки ко второй. Это свойство очень полезно при разметке страницы. Итак, как нами и было запланировано, вернее, мной было запланировано, напечатайте название товара, прочертите линию (можно просто скопировать ту, которая прочерчена в разделе подписки) и из копии кнопки сделайте ссылку на каталог. Все использованные здесь элементы мы уже создали до этого.

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



Добавьте изображение товара и его описание. Помните, не направляющие должны указывать вам насколько большими должны быть элементы, а вы сами должны это определять. Вот почему система с сеточной разметкой такая… плохая. Я не хотел использовать это грубое слово, но у меня нет других вариантов. Так или иначе, именно направляющие часто указывают, максимальный размер крупных элементов, и то, где они должны быть расположены. Таким образом, у вас не остается возможности создать что-либо по-настоящему уникальное. К счастью, никакая разметочная сетка нами использована не была. Возвращаемся к уроку: разместите на холсте текстуальную часть контента (описание, заголовки), и оставьте немного свободного места для галереи.

Создание макета страницы с презентацией компании. Часть 2




Отделите текстуальную область от галереи (которая сейчас пуста) при помощи линии, скопированной в разделе подписки.

Создание макета страницы с презентацией компании. Часть 2




Для того, чтобы равномерно распределить элементы галереи, мне пришлось произвести кое-какие замеры и подготовить окошки. В любом случае, элементы можно делать больше или меньше непосредственно в HTML/CSS, а сейчас просто подготовьте макет. Создайте белый прямоугольник и нанесите на него рамку при помощи стиля слоя. Размер фигуры ровно 100x100 пикселей.

Создание макета страницы с презентацией компании. Часть 2




Внутри нее создайте еще одну, размером 80х80. Для задания точных размеров воспользуйтесь инструментом Прямоугольная область (Rectangular marquee tool) и в окне Стиль выберите пункт фиксированные размеры (Fixed size). Для выравнивания относительно друг друга воспользуйтесь опциями инструмента Перемещение.

Создание макета страницы с презентацией компании. Часть 2




Скопируйте пример изображения товара в буфер обмена. Удерживая Ctrl, кликните по иконке слоя с малым квадратиком, образуя выделенную область. Далее, пройдите в меню Редактирование > Специальная вставка > Вставить в… (Edit > Paste into) и вы получите скопированное изображение, вставленное точно в выделенную область. Как здесь:

Создание макета страницы с презентацией компании. Часть 2




Продублируйте этот слой 6 раз, и распределите копии по макету, таким образом, чтобы последняя картинка касалась крайней вертикальной направляющей. Затем, активируйте инструмент перемещение, выделите все слои с изображениями на палитре слоев (каждая иконка должна была быть создана в отдельной папке, иначе не сработает, следовательно, выделять будете группы), после чего нажмите Выравнивание центров по горизонтали (Distribute Horizontal Centers) в верхней части окна программы. В результате вы получите идеально выровненные иконки.

Создание макета страницы с презентацией компании. Часть 2




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

Создание макета страницы с презентацией компании. Часть 2




Шаг 13 – Страница с контактной информацией
Сохраните и закройте документ. Затем снова откройте документ blank.psd и сохраните его как contact.psd. таким образом, blank.psd вновь остается нетронутым, а мы будем работать с contact.psd. Форма с контактами, как вы можете заметить на примере ниже, создана на основе формы поиска, только непрозрачность области здесь уменьшена, и удалены пиктограмма и градиенты. Это делается очень легко, поэтому я не буду останавливаться подробно на процессе. В конце нам понадобится один пример конвертирования в HTML/CSS. Кнопка взята с предыдущего шага. Здесь ничего особенного, но…

Создание макета страницы с презентацией компании. Часть 2



…я бы хотел описать в этом шаге создание карты (схемы проезда). Если у вашего клиента есть готовый снимок, сделанный, например, в google-maps, тогда работы будет немного. Другое дело, если вам придется сделать ее самостоятельно, и как дизайнер, сделать ее красивой. На этом шаге воспользуемся спутниковым снимком (все же лучше, чем рисовать вручную). При помощи простых манипуляцый, мы превратим имеющийся у нас образец спутниковой карты в симпатичный элемент макета. Начинать работу над картой лучше на новом документе. Так и сделаем. Размер холста особого значения не имеет, но учтите, что ширина его должна быть не менее 900 пикселей. Карта у нас панорамная, поэтому высота должна быть немного меньше чем ширина. Выбор размера оставляю на ваше усмотрение. Ничего страшного, если карта получится слишком большой, для таких случаев в Photoshop предусмотрена функция масштабирования, не так ли? Запомните, уменьшить размер какого-либо элемента легче, чем увеличить его, не потеряв вид. Создав новый документ разместите вертикальные направляющие на отметках 0%, 25%, 50%, 75% и 100%, и горизонтальные – на отметках 0% и 100%, как здесь:

Создание макета страницы с презентацией компании. Часть 2



Затем пройдите в меню Изображение > Размер холста (Image > Canvas Size), поставьте галочку на пункте Относительная (Relative), и введите в поля ширины и высоты значение 40. Таким образом, мы получим холст, увеличенный в высоту и ширину на 20 пикселей.

Создание макета страницы с презентацией компании. Часть 2



Теперь залейте весь документ белым цветом. Создайте прямоугольное выделение по крайним направляющим. Скопируйте карту в буфер обмена и пройдите в меню Редактирование > Специальная вставка > Вставить в… (Edit > Paste Into). В результате получите карту внутри маски. При необходимости, ее размер можно подкорректировать через меню Редактирование > Трансформация > Масштаб (Edit > Transform > Scale).

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



Далее, для продолжения работы над картой, создадим четыре новых слоя. Это облегчит наши дальнейшие трансформации. Начните с создания выделения, как показано ниже, затем пройдите в меню Редактирование > Копировать выделенную область (Edit > Copy Merged), и вставьте изображение на ваш макет.

Создание макета страницы с презентацией компании. Часть 2



Еще одно выделение, и снова копирование-вставка на макет:

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



Превращаем это нагромождение слоев…

Создание макета страницы с презентацией компании. Часть 2




…в осмысленную последовательность:

Создание макета страницы с презентацией компании. Часть 2



Объедините эти четыре слоя в одну группу. Для этого выделите их на палитре слоев и нажмите Ctrl+G. После этого выделите фон и, удерживая Ctrl, выделите только что созданную группу.

Создание макета страницы с презентацией компании. Часть 2



Выберите инструмент Перемещение (V) и кликните по кнопке Выровнять центры по горизонтали (Align horizontal centers).

Создание макета страницы с презентацией компании. Часть 2



Теперь наша карта отлично выровнена. Далее, применим кое-какие трансформации. Выберите первый слой и пройдите в меню Выделение > Трансформирование > Наклон (Edit > Transform > Skew). Измените положения опорных точек, после чего введите отрицательное значение в поле Наклон по вертикали (Vertical Skew).

Создание макета страницы с презентацией компании. Часть 2



Проделайте то же самое для второго, третьего и последнего слоев. Слои должны продолжать друг друга, поэтому двигайте опорные точки и задавайте значение вертикального наклона исходя из конкретной ситуации. Как, например здесь, в случае со вторым слоем:

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



Теперь выделите все четыре слоя (но не объединяйте их) и пройдите в меню Редактирование > Трансформирование > Перспектива (Edit > Transform > Perspective). Выполните что-то вроде этого.

Создание макета страницы с презентацией компании. Часть 2



Затем, пройдите в меню Редактирование > Трансформирование > Масштаб (Edit > Transform > Scale) и уменьшите высоту изображения как показано ниже:

Создание макета страницы с презентацией компании. Часть 2



Я изменил цвета, и поработал инструментами Осветлитель (Dodge Tool) и Затемнение (Burn Tool) на разделах карты, чтобы придать ей объем. На картинке ниже красный цвет обозначает области, где нужно пройтись Затемнением, а зеленые области – участки для Осветлителя.

Создание макета страницы с презентацией компании. Часть 2



Теперь добавим еще теней. Все эти тени можно будет поместить на один слой. Измените режим наложения на Умножение (Multiply), выберите какой-нибудь темный цвет и создайте выделение первого слоя. Затем, наложите местами градиент. Проделайте то же самое для остальных слоев. Таким образом мы подчеркнем грани.

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Снимите выделение, и поработайте инструментом Размытие (Blur tool) для получения вот такого результата. Учтите, размытие должно уменьшаться по мере приближения к углу.

Создание макета страницы с презентацией компании. Часть 2



При помощи Ластика (Eraser tool) сгладьте внутренние грани фигуры.

Создание макета страницы с презентацией компании. Часть 2



Повторите процедуру, пока результат не получится вот таким:

Создание макета страницы с презентацией компании. Часть 2



Похоже, мы закончили. Добавьте значок карты и все. Мой – это смесь трех эффектов, показанных выше. Цвета и свет взяты с кнопки главного меню. Кроме этого наклон и размытая тень. Приступаем к части обрезки.

Создание макета страницы с презентацией компании. Часть 2



Шаг 14 – Обрезка под HTML
Было бы неплохо, если бы у вас имелся какой-нибудь пустой шаблон HTML и файл CSS с исходными установками. Здесь все так же как в Photoshop. Вам не нужно писать/копировать все это сотни раз. Просто скопируйте пустой файл HTML и исходный файл CSS в папку с проектом, и вы готовы к быстрому старту. Вы так же можете скачать мой пустой шаблон. Итак, приступим к воссозданию нашей Главной страницы в HTML/CSS. Откройте в Photoshop psd-файл с макетом нашей Главной страницы и отключите видимость всех имеющихся на нем слоев, кроме зашумленного фона. Затем создайте выделенную область размером примерно 200х200 пикселей. Не переживайте из-за размеров, фон будет наложен бесшовно в виде узора.

Создание макета страницы с презентацией компании. Часть 2



Пройдите в меню Редактирование > Копировать совмещенные данные (Edit > Copy merged), таким образом, все, что окажется под областью выделения будет скопировано в буфер обмена (этот на тот случай, если фон имеет больше одного слоя). Далее пройдите в меню Файл > Создать (File > New). Как вы можете заметить, ширина и высота вновь создаваемого холста автоматически станет равной высоте и ширине выделенной (скопированной) области. В новом документе пройдите в меню Редактирование > Вставить (Edit > Paste), затем Файл > Сохранить как (File > Save As). Сохраните файл как background.jpg (в максимальном качеством 12) в папке 'graf' моего шаблона (либо в любой другой папке, только потом не забудьте изменить путь в моих CSS-кодах). Не переживайте пока о размерах изображений. Сохраняйте все в максимальном качестве, а позже я покажу вам как сжимать их. Теперь откройте файл index.html в окне своего браузера. Он пуст. Теперь откройте файлы index.html и style.css в каком-нибудь редакторе кода. Для этого можно использовать даже Блокнот, но, поверьте, есть варианты лучше. Измените стиль html в CSS путем вставки в него вот этого кода:

html { font: 12px Arial, Helvetica, sans-serif; text-align: left; background: url(graf/background.jpg); }


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

Шаг 15 – Кодирование шапки
Сначала нам придется поработать над HTML-частью. Так что давайте попробуем отделить все элементы, имеющиеся на нашем макете: повторяющийся фон, неповторяющийся фон (градиент), логотип (изображение) и окно поиска. Попробуем добавить их. Не забудьте удалить HTML-комментарии, заключенные в тэг “”.

<div id="wrap_header"><!-- for repetitive background --><div id="header"><!-- for gradient background --><a href="index.html"><img src="graf/logo.png" alt="Logo" class="logo" /></a><!-- logo --><form action="#" id="searchform" method="get"><!-- search form --><fieldset><input type="text" id="searchinput" name="s" value="search form" onblur="if(this.value.length == 0) this.value='search form';" onclick="if(this.value == 'search form') this.value='';" /><input type="submit" class="searchbutton" value="search" /></fieldset></form><!-- end of search form --></div><!-- end of header --></div><!-- end of wrap_header -->


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

Создание макета страницы с презентацией компании. Часть 2



Скройте все слои с градиентом, так, чтобы фон шапки страницы был однородным по оси X (по горизонтали). Выделите несколько пикселей в начале области, как мы это делали с предыдущим фоном и будем делать со всеми следующими изображениями, и проделайте стандартную процедуру: Копировать совмещенные данные – Новый документ – Вставить – Сохранить как… (jpg или png). Сохраните этот файл как topbg.jpg.

Создание макета страницы с презентацией компании. Часть 2



Теперь выделите всю шапку ВМЕСТЕ с градиентом и на этот раз сохраните как topgradient.jpg.

Создание макета страницы с презентацией компании. Часть 2



Вот CSS-код для фонов:

body { background: url(graf/topbg.jpg) top center repeat-x; } #wrap_header{ width:100%; margin:0 auto; height:157px; background: url(graf/togradient.jpg) top center no-repeat; } #header { width:980px; height:157px; margin:0 auto; position:relative; }


Фон “тела” на этом этапе может отображаться некорректно (не полностью) так как длинна тела такая же как длинна заголовка. Но позднее, когда мы разместим остальные элементы, такие как меню и область контента, все будет нормально. Должен заметить, что я сам подрезал все изображения, которые намеревался использовать, до того, как приступил к написанию HTML и CSS кода, но в этом уроке все будет рассмотрено шаг за шагом. Итак, следующее, что нам понадобится на странице – это логотип. Мой имеет размер 296х76 и сохранен с расширением .png. Было время, когда формат png не поддерживался браузерами (я имею ввиду IE6), но это было очень давно. Сейчас все современные браузеры поддерживают даже анимированные png-изображения (которые, на самом деле, не очень популярны), так что вам не о чем беспокоится. К стати, вы знаете кого-нибудь, кто бы до сих пор пользовался IE6? Просто интересно, потому что лично я не знаю. Итак, у нас есть логотип, а вот CSS-код для него. HTML-часть было добавлена до этого. При помощи линейки вы можете определить расстояние от логотипа до верхнего края.

Создание макета страницы с презентацией компании. Часть 2

#header .logo { position: absolute; left:20px; top:34px; /* distance from top */
display:block; }



Теперь нам нужен какой-нибудь фон для окна поиска. Скройте все ненужные слои и выделите форму поле поиска. Выделенная область не обязательно должна быть идеальной. Помните, что когда вы создаете новый документ, к нему будет применен не размер скопированного выделения, а размер существующей области с пикселями. Назовите этот файл searchbg.png. Учтите, что мы сохраняем полупрозрачные слои с расширением png, а все остальные – в jpg.

Создание макета страницы с презентацией компании. Часть 2



Скопируйте вот этот год для поля и иконки поиска.

#header #searchform { position: absolute; right: 20px; top: 55px; width: 196px; /* width of a background image */
height: 36px; /* height of a background image */
background:url(graf/searchbg.png) top left no-repeat; border:0px; } #header #searchform #searchinput { color: #686767; padding: 8px 5px 4px 8px; width: 150px; background:none; border:0px; } #header #searchform .searchbutton { height: 15px; width: 12px; text-indent: -9000px; text-transform: capitalize; background: url(graf/searchicon.png) no-repeat 0 0; border: none; position: absolute; right: 10px; top:9px; }


Если вы обратили внимание, реальная форма поиска скрыта.

Шаг 16 – Код для главного меню
Теперь воспользуемся так называемыми div-разделителями для написания года меню (наш неупорядоченный список) и кнопки обратной связи.

<div id="wrap_menu"><div id="menu"><ul id="mainmenu"><li><a href="index.html">About</a></li><li><a href="products.html">Our products</a></li><li><a href="download.html">Download</a></li><li><a href="contact.html">Contact</a></li><li><a href="">Client zone</a></li></ul><a href="#" id="calltoaction">Catalog <span>2011</span></a></div></div>


Как вы можете заметить, в тэге (все кнопки) есть вложенный тэг, который нужен для замены шрифта “2011”, (унаследованного от свойств HTML в CSS) на Georgia. Итак, приступим к обрезке изображений psd-из файла. Нас интересует вся область меню, два фона для элементов меню и фон для кнопки обратной связи. В psd-файле я определил что наше меню имеет ширину 49 пикселей (расстояние между двумя направляющими). На изображении ниже показаны элементы, которые нам предстоит вырезать.

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



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

Создание макета страницы с презентацией компании. Часть 2



Теперь сделайте слой коррекции Вибрация (Vibrance) (или какой-либо другой корректирующий слой) видимым, скопируйте выделенную область и вставьте ее на ранее созданный документ (не тот который новый, а тот, который с кнопкой), создав таким образом в нем второй слой. Теперь пройдите в меню Редактирование > Размер холста (Image > Canvas size) поставьте галочку на пункте Относительная (Relative) и введите в поле Высота (Height) значение реальной высоты, увеличив таким образом ее вдвое.

Создание макета страницы с презентацией компании. Часть 2

Создание макета страницы с презентацией компании. Часть 2



Переместите один из слоев вниз (он должен прилепиться к нижней грани), после чего сохраните файл как calltoaction.png.

Создание макета страницы с презентацией компании. Часть 2



Таким вот способом мы создадим нависший эффект в CSS без задержки времени на загрузку изображения. Итак, последний этап – код CSS. Я уверен, тут и так все будет понятно, но я все же сделаю кое-какие комментарии. Например, я использовал свойство “Размер фона” для того, (чтобы растянуть фон) эта опция представлена в CSS3, так что более старые браузеры не смогут корректно отображать наше меню. Да мы и не предусматриваем поддержку нашей страницы устаревшими программами. Если вы все же надумаете, то вам придется предусмотреть специальные “заплатки” для корректного отображения изображений. Не очень сложно, но не станем загромождать и без того большой урок. Поэтому я остановлюсь на свойстве “размере холста”, которое полностью поддерживается всеми современными браузерами Opera 10+, FireFox 4+, Internet Explorer 9+, Safari 4.1+ и Chrome 3+.

#wrap_menu{ width:100%; margin:0 auto; height:49px; /* height measured in psd file */
} #wrap_menu #menu{ width:980px; margin:0 auto; height:49px; position:relative; } #mainmenu { position: absolute; top:0; left: 20px; list-style: none; height: 49px; width: 741px; /* menu shape's width */
padding-left: 20px; /* so the first element will be pushed from beginning of the shape */
background: url(graf/menubg.png) no-repeat 0 0; /* menu shape */
} #mainmenu li a { float: left; display: inline-block; height: 48px; padding: 15px 12px 2px 12px; /* paddings for text positioning */
background: none; color: #1f1f1f; text-decoration: none; font-size: 16px; margin-right: 16px; /* to make distance between menu elements */
} #mainmenu li:hover a { background: url(graf/menuactive.jpg) no-repeat 0 0; background-size: 100% 48px; /* to stretch the hover background */
-o-background-size: 100% 48px; /* for Opera 9.5 */
-webkit-background-size: 100% 48px; /* for Safari 3 and Chrome 1 */
-khtml-background-size: 100% 48px; /* for Konqueror */
-moz-background-size: 100% 48px; /* for firefox 3.6 */
color:#fff8de; } #calltoaction { position: absolute; top:0; right:20px; width:194px; height:34px; /* 49px minus padding-top value */
background: url(graf/calltoaction.png) no-repeat 0 0; text-align: center; padding-top: 15px; /* to push text vertically from top */
font-size: 16px; color: #fff; text-decoration: none; text-shadow: 0px 1px 1px #b3830c; /* simulation of photoshop's shadow */
} #calltoaction:hover { background: url(graf/calltoaction.png) no-repeat 0 -49px; } #calltoaction span { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: bold; }


Шаг 17 – Код для подписки на рассылку и нижней части страницы
Отлично! Мы далеко продвинулись! Оставим временно область основного контента, потому как сначала нам предстоит создать пустой (ну хорошо, не совсем пустую, а без основной части) HTML-документ (как мы уже делали с psd). И только после этого мы воспроизведем контент для каждой страницы. Наша область подписки на рассылку будет фиксированного размера. Начните с размещения направляющих по верху и по низу области (выделите группу с областью подписки на рассылку, тогда легче будет расставить направляющие) для того, чтобы обрезать фон.

Создание макета страницы с презентацией компании. Часть 2



Обрезав фон сохраните как файл newsletterbg.jpg.

<!--dle_image_begin:http://zerolayer.ru/uploads/posts/2012-01/1327690472_step-017b5.jpg|-->Создание макета страницы с презентацией компании. Часть 2урок фотошоп создание шаболан html web

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

Другие новости по теме:


Просмотров: 6679 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.