Это последняя статья по рисованию дизайна, в следующих мы будем заниматься версткой.

С прошлого урока дизайн немного изменился. Все правки вы найдете в прилагающихся файлах проекта.

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

А осталось нам нарисовать совсем не много, вывод полного поста и дизайн комментариев.

Приступим

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

Получилось следующие:

Осталось добавить вывод комментариев.

Я люблю, когда комментарии идут с чередованием цвета фона, в данном случае это будет синий(#1480ba) и желтый(#f0de14), прозрачность для них я поставил на 5%.

Вот, что у меня получилось:

На этом все. В ближайшее время выложу стать по верстке. Ждите.

Файлы проекта.

На данный момент у нас готов фон и шапка будущего шаблона. Дабы не терять время зря сразу приступим к дизайну сайдбара.

Ширина сайдбара примерно 320px при ширине шаблона 1010px. Виджеты разделяются между собой с помощью заголовков:

Как видите ни чего сложного в сайдбаре нет. Фон «#fafafa», виджеты разделяются между собой своими заголовками, шрифт «Tahoma» размер 22 и цвет «#a9acb8». Справа от ссылок иконка:

Сами же ссылки – это текст «Tahoma», размер 12, цвет «#2583b7».

C сайдбаром закончили, переходим к контенту.

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

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

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

Я долго думал, каким его сделать. И вот, что получилось:

Все предельно просто и аккуратно, слева копирайт, справа счетчик. Стиль для футера можно найти в моей подборке стилей.

По окончанию 3-х уроков мы имеем:

Файлы проекта на данном этапе.

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

Приступим.

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

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

Снизу шапки рисуем горизонтальную полосу шириной примерно 25px. Вот, что доложно получится:

Стиль для меню можно найти в моей подборке стилей.

Теперь займемся логотипом. Сильно углубляться в подробности того как я рисовал лого я не буду, все таки статья не по работе в фотошоп. Опишу в общих чертах.

Мой логотип – это слово «2coders» написанное шрифтом «baveust» (который вы можете найти в прилагающимся архиве), немного украшенное фигурой из набора floristic_shapes, который также прилагается и небольшое описание сайта под основным логотипом.

На данный момент мы имеем следующие:

Перейдем к форме поиска. Я думаю нарисовать форму поиска у вас не вызовет затруднений. Вот мой вариант:

Осталось добавить иконку RSS. И наша шапка будет готова. Я решил сам её не рисовать и взял готовую:

Вот, что у меня получилось:

В следующей статей займемся дизайном контент области, сайдбара и футера.

Файлы проекта на данный момент.

]]> http://2coders.ru/sozdanie-dizajna-sajta-ot-a-do-ya-chast-2/feed/ 0 http://2coders.ru/sozdanie-dizajna-sajta-ot-a-do-ya-chast-1/ http://2coders.ru/sozdanie-dizajna-sajta-ot-a-do-ya-chast-1/#comments Thu, 12 Mar 2009 20:50:07 +0000 d4rkr00t http://2coders.ru/?p=131

Это первая часть из серии статей по созданию дизайна сайта, которые охватывает все от создания макета до верстки.

Программы:

Photoshop и любой редактор кода, для верстки.

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

• Дизайн будет в светлых тонах.
• Формат: шапка, контент, 1 сайдбар справа, футер.
• Ширина от 1200px до 1000px. Остальное фон.
• Сайдбар 1/3 всей ширины шаблона.
• Шапка: лого, краткое описание, значок rss, строка поиска.
• Футер: копирайты, место под счетчик.

Начнем.

Создаем новый файл Photoshop 1100x800 пикселей. Сам шаблон 1010px, остальное фон.

Вот макет, который получился у меня.

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

Для начала создадим новый файл photoshop с размером 3х3 пикселя. Это будет наш паттерн для фона. Выбираем инструмент «карандаш» выставляем цвет «#0084ff» и рисуем:

После этого в меню выбираем «Edit->Define Pattern».

Теперь возвращаемся обратно к нашему шаблону. Создаем новый слой над фоном и заливаем его нашим паттерном: «Edit->Fill» в поле «Use» выбираем «pattern» и наш паттерн, который мы только что создали. Ставим «opacity» слою в 10%. Жмем правой кнопкой мыши по слою и выбираем пункт «Blending Options», в пункте «Drop Shadow» устанавливаем следующие параметры:

Вот, что у нас должно было получится:

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

Скачать файлы проекта.

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

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

Непосредственно стили:

Unlimited Web 2.0 Layer Styles

Web 2.0 Styles

Еще немного стилей без названия

Soapy Styles – набор «мыльных» web 2.0 стилей для Photoshop

Webster Styles

Это все стили на сегодня. А сейчас пару примеров их использования:

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

Скачать стили для Photoshop.

]]> http://2coders.ru/podborka-web-20-stilej-dlya-photoshop/feed/ 3