Записи с тегом: Photoshop


17
02.2010

Модульные сетки в Веб-Дизайне

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

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Модульная система упрощает и убыстряет художественное конструирование и создаёт благоприятные условия для автоматизации вёрстки при использовании компьютерных настольно-издательских систем.

Не буду сильно расписывать, что это такое, просто дам пару ссылочек на эту тему:
— Модульные сетки, часть первая. «38 попугаев»
— Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия

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

Ну и напоследок, мой набор из 2-х шаблонов для Photoshop с модульной сеткой на 12 и 16 колонок.


19
03.2009

Создание дизайна сайта от А до Я. Часть 4

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

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

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

template4

Читать далее →


16
03.2009

Создание дизайна сайта от А до Я. Часть 3

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

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

sidebar

Читать далее →


13
03.2009

Создание дизайна сайта от А до Я. Часть 2

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

Приступим.

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

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

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

Горизонтальное меню

Читать далее →


12
03.2009

Создание дизайна сайта от А до Я. Часть 1

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

Программы:

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

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

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

Начнем.

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


11
03.2009

Подборка web 2.0 стилей для Photoshop

Решил поделиться с вами подборкой web 2.0 стилей для Photoshop, которыми я пользуюсь сам.

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

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

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

Unlimited Web 2.0 Layer Styles

Unlimited Web 2.0 Layer Styles


Web 2.0 Styles

Web 2.0 Styles

Читать далее →