Рисуем контент для сайта

Контентная часть у нас состоит из трех блоков: блок с текстом, блок с фотографиями и блок с таблицей:

Рисуем контент для сайта

Начнем с первого. Как создавать текст вы уже знаете. Как его раскрашивать тоже. В нашем примере первая буква заголовка имеет серый цвет #878787. Также нужно будет добавить белую тень к тексту в панеле Layer Style. Это мы тоже делали. Нужно обозначить ссылки подчеркиванием, и выделить их синим цветом #0024ff:

Рисуем контент для сайта

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

Блок с картинками

Здесь покажу один прием, как сделать картинки с скругленными углами. Для этого скачайте их сначала. Теперь в нашем макете создайте прямоугольную область (129pxx98px), с скругленными углами (радиус 3px):

Рисуем контент для сайта

Скопируйте область четыре раза, и разместите копии по горизонтали:

Рисуем контент для сайта

Теперь вам нужно открыть первую картинку img1.jpg, выбрать инструмент Move Tool, и перетащить ее мышкой на наш холст с макетом. Разместите слой с картинкой над первым квадратиком:

Рисуем контент для сайта

На холсте также разместите картинку над первым квадратиком:

Рисуем контент для сайта

А теперь зажмите клавиши CTRL+ALT+G, картинка примет форму области, т.е. станет с скругленными углами, а на панеле слоев появится такая стрелочка:

Рисуем контент для сайта

Таким же образом вы открываете остальные картинки, размещаете их над своей прямоугольной областью, не забываем и про панель слоев, и зажимаем Ctrl+Alt+G. Чтобы добавить границу к картинке, нужно добавить стили не к ней, а к слою на котором он лежит, т.е. вы должны установить внутреннюю границу толщиной в 1px, черного цвета:

Рисуем контент для сайта

Таблица

Чтобы создать таблицу в фотошопе, нужно использовать теже фигуры, т.е. это прямоугольная область, линия. При помощи них мы задаем фон, границы, строки и ячейки. Дальше при помощи инструмента Horizontal Type Tool (T) мы наполняем таблицу какой нибудь информацией. 

Подвал

В подвале имеется мини-копия логотипа — © 2012 Redface.com, поэтому нужно скопировать слой с логотипом, перед ним дописать год и значок копирайтов, затем установить для всего текста размер 16pt, затем для .com установить размер 14pt. Этот слой нужно выровнять снизу по центру холста. И макет готов.

http://youtu.be/4Y2fCyfHWLY

Источник: http://psd-html-css.ru/ps/risuem-kontent-dlya-sayta

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Рисуем контент для сайта | | 2012-05-03 21:57:00 | | Статьи Web-мастеру | | Контентная часть у нас состоит из трех блоков: блок с текстом, блок с фотографиями и блок с таблицей:Начнем с первого. Как создавать текст вы уже знаете. Как его раскрашивать тоже. В нашем примере | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: