Уважаемые гости форума! Чтобы коды и навигация статье корректно отображались, зарегистрируйтесь на форуме.

---

Как создать дизайн?

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

От автора

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

Копирование статьи

КОПИРОВАНИЕ ЭТОЙ СТАТЬИ НА ДРУГИЕ РЕСУРСЫ РАЗРЕШАЕТСЯ ТОЛЬКО ПРИ НАЛИЧИИ ВОТ ТАКОЙ ВОТ НАДПИСИ В САМОМ ВЕРХУ (НАД СТАТЬЕЙ) И БЕЗ УМЕНЬШЕНИЯ РАЗМЕРА ШРИФТА!

Статья предоставлена форумом ForumDesign TS - Дизайн для форумов и техническая поддержка
Автор - Герда

Код:

[align=center]Статья предоставлена форумом [url=http://ForumD.ru/]ForumDesign TS - Дизайн для форумов и техническая поддержка[/url]
Автор - [b]Герда[/b][/align]

Источники информации и ссылки

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

http://lenagold.ru/ - сайт с готовым клипартом (использовано для создания дизайна).
http://artfile.ru/ - на этом сайте выкладываются обои (использовано для создания дизайна).
http://ilovepsd.ru/ - замечательные советы по работе с макетом
http://www.wisdomweb.ru/ - на этом сайте есть отличные учебники по CSS и CSS3 с наглядными примерами
http://htmlbook.ru/ - шпаргалка по тегам HTML и свойствам CSS, всегда в нее подглядываю
http://www.google.com/webfonts - сервис Google для импорта красивых шрифтов на сайты

Внутренние ссылки
Чтобы не копировать сюда все то, о чем уже написано на ForumD.ru, в статье будет приведено масса ссылок на другие разделы и полезную информацию.

Каталог стилей - тут вы можете найти дизайн, по которому создана статья, взять его код, разобрать, собрать, перебрать и сделать с ним все, что угодно. Также имеются другие стили.
Уроки Photoshop - тут вы найдете массу приемов, которые могут вам пригодиться в создании дизайна
Все о photoshop - в этом разделе можно задать вопросы по работе в редакторе photoshop
Новый FAQ по дизайну и CSS - подробное описание шаблона дизайна для MyBB форума
Каталог CSS-кодов - здесь можно найти (или спросить) CSS-коды для дизайна.
Делаем GIF анимацию легче - урок photoshop по работе с форматом GIF
Таблицы в HTML - очень подробно о том, как сделать HTML код таблицы
Заготовки и клипарт для анимации - коллекция заготовок, которая может пригодиться при создании веб-анимации

Оглавление

[html]<a name="ogl"></a>[/html]
[html]&nbsp;- <a href="#1">Создание проекта дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#2">Соответствие дизайна тематике</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#3">Составление проекта дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#4">Поиск исходников</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#4-1">Подборка ссылок</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#4-2">Несколько правил подборки исходников</a><br>
&nbsp;- <a href="#5">Создание макета</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#6">Учимся работать с макетом</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#7">Создание вспомогательных слоев</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#8">Создание дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#9">Основы колоризации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#10">Как делать макет ровным?</a><br>
&nbsp;- <a href="#11">Верстка дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#12">Как работает CSS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#13">Инструменты для верстки: FireBug</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#14">Учимся правильно "резать" макет (правила работы с картинками для WEB)</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#14-1">Планирование элементов дизайна </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#14-2">Формат изображений</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#15">Учимся вставлять фоновые картинки </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#16">Составляем CSS-код дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a><br>
&nbsp;- <a href="#17">Некоторые трюки</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#18">Создаем свои элементы HTML</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#19">Позиционирование в CSS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#20">Делаем контейнеры для элементов дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#21">Делаем контейнеры для текста</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#22">Делаем красивые html-таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#23">Создание таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#24">CSS3: меньше картинок, больше кодов</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-1">BORDER-RADIUS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-2">BOX-SHADOW</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-3">TEXT-SHADOW</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#25">CSS3 на примере таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#26">Свойство DISPLAY: задаем отображение элементов</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#26-1">Наглядные примеры и наиболее популярные применения свойства Display</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#26-2">Применение свойства DISPLAY на примере таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#27">Красивые заголовки и шрифты</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-1">Как работают шрифты в CSS (свойство FONT)</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-2">Картинки-заголовки (ДОЛОЙ ЭТУ БЯКУ!)</a> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-3">Красивые заголовки с помощью Google Web Fonts</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-4">Безопасные шрифты</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28">Анимация в дизайне</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-1">Создание анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2">Подгоняем анимацию под веб-формат</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-1">Размер анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-2">Количество кадров</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-3">Меняем цикл анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-4">Делаем Gif-анимацию легче</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3">Встраиваем анимацию в дизайн</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3-1">Используем z-index для порядка отображения элементов страницы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3-2">Как убрать прокрутку страницы (свойство overflow)</a>
[/html]

Обновления

23.04.2012 - львиная доля статьи дописана, глава [html]<a href="#12">Как работает CSS</a>[/html] откорректирована
25.10.2012 - увеличено оглавление для лучшей навигации то статье
26.10.2012 - в часть Как делать макет ровным? добавлен пункт "Выравнивание объекта относительно фона"
27.10.2012 - началась работа над трюком "[html]<a href="#28">Анимация в дизайне</a>[/html]", написано о создании анимашек.
29.11.2012 - добавлен пример использования безопасного шрифта в дизайне
07.12.2012 - дописана часть про встраивание анимации в дизайн
08.12.2012 - добавлено видео [html]<a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a>[/html]

Теги: урок, photoshop, фотошоп, css, дизайн