Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Статья: Как создать дизайн?


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

Сообщений 1 страница 15 из 15

1

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

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

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

Копирование статьи
КОПИРОВАНИЕ ЭТОЙ СТАТЬИ НА ДРУГИЕ РЕСУРСЫ РАЗРЕШАЕТСЯ ТОЛЬКО ПРИ НАЛИЧИИ ВОТ ТАКОЙ ВОТ НАДПИСИ В САМОМ ВЕРХУ (НАД СТАТЬЕЙ) И БЕЗ УМЕНЬШЕНИЯ РАЗМЕРА ШРИФТА!

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

Код:
[align=center]Статья предоставлена форумом [url=http://forumdts.org/]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 для импорта красивых шрифтов на сайты

Внутренние ссылки
Чтобы не копировать сюда все то, о чем уже написано на ForumDTS.org, в статье будет приведено масса ссылок на другие разделы и полезную информацию. (комментируйте, какая информация была бы востребована на RusFF - перенесем сюда)

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

Оглавление

- Создание проекта дизайна
     - Соответствие дизайна тематике
     - Составление проекта дизайна
     - Поиск исходников
         - Подборка ссылок
         - Несколько правил подборки исходников
- Создание макета
     - Учимся работать с макетом
     - Создание вспомогательных слоев
     - Создание дизайна
         - Основы колоризации
         - Как делать макет ровным?
- Верстка дизайна
     - Как работает CSS
     - Инструменты для верстки: FireBug
     - Учимся правильно "резать" макет (правила работы с картинками для WEB)
          - Планирование элементов дизайна
          - Формат изображений
     - Учимся вставлять фоновые картинки
     - Составляем CSS-код дизайна
- Некоторые трюки
     - Создаем свои элементы HTML
          - Позиционирование в CSS
          - Делаем контейнеры для элементов дизайна
          - Делаем контейнеры для текста
     - Делаем красивые html-таблицы
          - Создание таблицы
          - CSS3: меньше картинок, больше кодов
             - BORDER-RADIUS
             - BOX-SHADOW
             - TEXT-SHADOW
          - CSS3 на примере таблицы
          - Свойство DISPLAY: задаем отображение элементов
             - Наглядные примеры и наиболее популярные применения свойства Display
             - Применение свойства DISPLAY на примере таблицы
          - Красивые заголовки и шрифты
             - Как работают шрифты в CSS (свойство FONT)
             - Картинки-заголовки (ДОЛОЙ ЭТУ БЯКУ!)
             - Красивые заголовки с помощью Google Web Fonts
             - Безопасные шрифты
          - Анимация в дизайне
             - Создание анимации
             - Подгоняем анимацию под веб-формат
               - Размер анимации
               - Количество кадров
               - Меняем цикл анимации
               - Делаем Gif-анимацию легче
             - Встраиваем анимацию в дизайн
               - Используем z-index для порядка отображения элементов страницы
               - Как убрать прокрутку страницы (свойство overflow)

Обновления
07.12.12 Добавлен трюк "Анимация в дизайне"

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

Отредактировано Герда (07.12.2012 20:37:27)

+4

2

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

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

Вот подборка примеров с первых восьми страниц каталога http://webtalk.ru/ (форумы со стандартным дизайном пропускались)

http://uploads.ru/t/R/3/r/R3rFG.jpg

http://uploads.ru/t/i/c/3/ic3H9.jpg

http://uploads.ru/t/8/n/D/8nDgB.jpg

Тематика форума - фотошоп-уроки.
Кто этот мужик в шапке? какое он имеет отношение к форуму? http://uploads.ru/i/6/p/i/6pin5.gif

Тематика форума - ВСЕ ОБО ВСЕМ. (ключи к играм, общение и т.д. и т.п.)
А дизайн на тему "Сумерки". Зачем? ведь куча форумов спокойно и со стандартным дизайном живут

Угадайте, какой сюжет у этой ролевой игры?
Вы не поверите! :D Эта ролевая на тему продолжения сумеречной саги

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

Итог. первое, что при разработке дизайна надо учитывать - это ТЕМАТИКА ресурса
Не красивые картинки из интернета, не цветовая гамма, а именно тематика. :)

Для примера (чтоб было на чем показывать) я беру себе тему "Фентези". (дизайн можно скачать и посмотреть здесь: Стиль Fairy Fantasy (Mybb) + PSD макет [10/10])

Составление проекта дизайна

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

Вот пример схематического макета, которые я рисую:

http://uploads.ru/t/a/X/y/aXyNU.jpg

Расшифровка моих каракулей

Расшифровка моих каракулей:

http://uploads.ru/t/7/f/0/7f09U.jpg

У дизайна будет шапка, выходящая за края с обрамлением. картинки в шапке должна иметь расположение справа, слева будет контейнер для текста. меню навигации и юзер-меню располагаются "лесенкой" под шапкой.
Категории и заголовки будут торчать за пределы области форума, а текст будут обрамлять иконки. Форумные таблицы будут именно табличного типа и распологаться под категориями.
Копирайт в отличие от шапки за края торчать не будет. Он должен содержать узорчики, направленные внутрь. в копирайте будет рабочая область для текста.
Фон будет состоять из переднего плана с картинками и заднего с бесшовной текстурой.

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

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

Поиск исходников
Самые профессиональные супер-пупер дизайнеры, конечно, ничего не ищут, а рисуют сами. Но если до художника вам далеко пользоваться сайтами с исходниками - не грех, все начинающие дизайнеры так делают, поэтому следует выдать напутствие, как это делать правильно.

Во-первых, где же исходники взять?

Подборка ссылок
http://lenagold.ru/ - Сайт с готовым клипартом (изображения в формате png).
на мой взгляд, это САМЫЙ лучший сайт по поиску клипарта и бесшовных текстур (повторяющихся фонов). Самый лучший благодаря своей навигации - можно искать по тематике, можно искать по цвету, можно искать по алфавиту. Почти все картинки размещены отдельно - вам не придется качать несколько гигабайт скрап-набора для того, чтоб получить один-единственный элемент.

http://allday.ru/ и http://pixelbrush.ru/ - два сайта тематики "все для фотошопа". Там есть много всего, но это "много всего" находится в одной каше. На эти сайты я залезаю обычно только если нигде не нашлось подходящего элемента, а рисовать самостоятельно очень-очень лень. Чтобы найти там что-то нужное, придется листать огромную кипу страниц ненужного. Тратится куча времени.

http://artfile.ru/ - На этом сайте выкладываются обои, но не простые, а золотые - много в формате hd, много-много разной тематики, короче, большие и качественные картинки.
Единственное, чего не хватает для счастья на этом сайте - еще более "узкое" разделение на категории или тегов. Когда ищется что-то конкретное - тратится безумное количество времени на проматывание ненужного.

(18+) http://konachan.com/ (английский) и http://mjv-art.org (русский) - сайты с обоями и артом в стиле Аниме.
Привела именно эти сайты, т.к. там много широкоформатных картинок. Однако, к сожалению, оба сайта содержат кучу хентая, если вам нет 18 даже не открывайте эти сайты - родители не поймут ваши оправдания типа "я пристойную картинку на этом сайте ищу".
поиск на этих сайтах происходит ТОЛЬКО по тегам. Комбинировать теги почему-то не получается. Так что, тяжело что-то искать.

Но найти исходники - это не главное, Главное - это исходники подобрать.
Несколько правил подборки исходников

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

2. Не бывает неподходящего цвета
Не отказывайтесь от исходника, если не подходит цвет - вас спасет колоризация. Есть множество уроков о том, как менять цвет объекта полностью или частично.
По той же причине не надо качать кучу одинаковых скрап-наборов только потому, что хочется не только фиолетовые цветочки, но и желтые. Выбирайте объект по форме, а потом поменяете цвет. Супер-художником для этого быть не придется.

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

4. Много картинок и графики не нужно
В принципе, подборка исходников может содержать хоть миллион графических картинок, но это не означает, что все они должны быть использованы в дизайне. Например, красиво смотрится дизайн, где в шапка сделана из одной картинки и не красиво получается, когда дизайнер пытается туда "упаковать" сразу несколько разных картинок с кучей деталей.
Если же действительно хочется сколлажировать несколько картинок, то смотрите не на исходники, а возвращайтесь к листку бумаги - обозначьте на на своем шаблоне схематическое расположение персонажей, объектов и декораций, а уже потом подбирайте исходники для коллажа.

Отредактировано Герда (25.10.2012 03:30:38)

+2

3

Создание макета

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

Учимся работать с макетом
  Для начала потребуется понять и использовать несколько простых правил, без которых ваш макет превратится с кашу. где даже вы не сможете разобраться.
(в этой части использовались материалы сайта http://ilovepsd.ru/)

1. Используйте папки.
Все свои, которые относятся к определенному элементу сохраняйте в отдельную папку. Чтобы создать папку, нужно кликнуть на указанную иконку, а потом перетащить туда слои:

скриншот

http://uploads.ru/t/Y/u/j/YujJV.png

2. Лучше еще и "раскрашивать" папки.
таким образом вы визуально будете отличать один элемент от другого, а не всматриваться в название.
http://uploads.ru/i/3/y/F/3yFjD.png

3. Давайте название слоям и папкам.
папку лучше проименовать заранее, а слои уже по завершению работы над элементом. Не забудте удалить все неиспользованные слои по окончанию создания элемента удалите или вынесете в отдельную папку.
http://uploads.ru/t/k/P/h/kPhuf.png

3. Называть папки и элементы лучше на английском.
Во-первых, названия получаются гораздо короче. А, во-вторых, не будет проблем, если вы передадите макет на доработку более профессиональному дизайнеру - проще разобраться в английском языке, чем в наименованиях типа "штучка справа".
http://uploads.ru/t/X/7/4/X74Jq.png

4. Не склеивайте слои без необходимости.
Всегда может получиться так, что вам или пользователям сайта потребуется что-то убрать или заменить. Если ваш макет состоит из отдельных слоев, то это может воплотиться в два-три клика и не потребуется рисовать что-либо с нуля.
Если вам все же понадобилось что-то склеить в один слой поступайте одним из двух методов:
  1 способ - скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой. Таким образом у вас останутся все исходные элементы
  2 способ - сохраните текучий макет с учетом версии. Например "design-1", следующая версия со склеенными слоями будет называться "design-2"

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

Правильно

Не правильно

http://uploads.ru/t/u/n/c/uncrh.png

http://uploads.ru/t/q/D/x/qDx18.png

Создание вспомогательных слоев
При работе с макетом надо представлять, пространство веб-страницы, верстку дизайна, а самое главное - вписываться под разные разрешения экрана.
Мне в этом помогает создание вспомогательных слоев.
Разрешения экрана
Во-первых, надо запомнить: Ваш монитор и то, что вы видите на экране, не является истинной в последней инстанции!
У других пользователей разрешение экрана другое. Оно может быть больше вашего или меньше.
Ваша задача - учитывать это еще при создании макета, а не только при верстке.

(использовались материалы акции "дизайн и критика". выбраны именно те дизайны, которые нравятся пользователям)

https://forumupload.ru/uploads/0007/e3/f7/72663-4.jpg
При разрешении 1500+ обрывалась шапка

https://forumupload.ru/uploads/0007/e3/f7/72666-5.jpg
шапка плавно переходит в фон

https://forumupload.ru/uploads/0007/e3/f7/72664-2.jpg
при разрешении 1400+ обрывался фон

https://forumupload.ru/uploads/0007/e3/f7/72666-3.jpg
фон рассчитан на высокое разрешение экрана

чтобы заранее не создавать себе проблем с версткой, создайте сначала вспомогательные слои под разные разрешения.
основные разрешения - 1920*1200 (телеэкран), 1600*1200, 1400*900, 1280*800, 1024*768
создавайте макет шириной в самое большое разрешение экрана:
http://uploads.ru/t/o/f/b/ofbFR.jpg
Высота может быть любой. можно поставить 1200, но если будет не хватать при создании элементов места (например, если вы будете отрисовывать высокую шапку и высокую область копирайта), то можно просто всегда увеличить (или уменьшить) рабочую область макета: Image > Canvas Size (Изображение > размер холста) - Alt+Ctrl+C
http://uploads.ru/t/P/v/p/Pvp7B.jpg
выбираете единицу изменения (удобней всего - пиксели), выбираете в какую сторону макет будет увеличиваться (где будет добавляться новое пространтво) и остается только задать новый размер макета (помните, что писать надо не то количество, на которое собираетесь увеличивать/уменьшать пространство, а общий размер, который должен получиться после увеличения/уменьшения).
после создания большой рабочей области, создаем другие размеры с разрешением.
создаем новый файл размером 1600*1200
выбираем цвет и заливаем пространство. (я выбрала синий)
http://uploads.ru/i/Z/E/J/ZEJaf.jpg
затем перетащите слой заливки на макет
http://uploads.ru/t/K/U/2/KU2Mu.jpg
теперь нужно расположить этот слой по центру. для этого лучше создать слои-боковушки - это позволит не только отмерить расстояние, но и (что важнее) отключать середину и смотреть только на боковушки, т.е. ту область, которая будет за пределами экрана при данном разрешении.
чтобы рассчитать размер боковых полосок отнимите от ширины макета ширину разрешения экрана и разделите на 2:
http://uploads.ru/t/k/Y/K/kYKG3.jpg
создаем отдельный файл с боковой полоской. ширина посчитана, а высота должна соответствовать высоте макета
http://uploads.ru/t/W/V/p/WVpyB.jpg
затем перетащите боковушку на макет и поставьте ее слева. затем спопируйте слой с боковой полоской. для этого можно просто перетащить его мышкой на кнопку "новый слой" (слои находятся обычно на панели слоев слева. если у вас такой панели нет включите ее: Window > Layers (окно > слои):
http://uploads.ru/t/a/q/8/aq8Ve.jpg
расположите вторую полоску справа. остается только подвинуть середину так, чтоб она не наезжала и не вылезала за боковые полоски. делать это надо при 100% отображении макета. (если оно будет меньше, вы можете допустить пробел в 1-3 px между серединой и одной из полосок)
пользуйтесь лупой для масштабирования макета:
http://uploads.ru/t/9/8/k/98kJR.jpg
теперь объедените слои в одну группу (чтобы можно было их в любой момент отключить) и поставьте прозрачность на группу (это позволит вам просматривать область экрана поверх элементов дизайна)
http://uploads.ru/t/U/w/D/UwDZI.jpg
по же самое повторите с остальными разрешениями экрана. лучше будет выбирать разные цвета для разных разрешений. цвета выбирайте как вам будет удобней, но обязательно яркие (чтоб в полупрозрачном состоянии их было видно).
http://uploads.ru/t/t/E/R/tERNC.jpg
будет удобно все слои с разрешениями экрана запихнуть в одну группу "SCREEN". если понадобится посмотреть, как ваш макет дизайна вписывается в разные разрешения, просто раскрыть группу и нажать отображение нужного разрешения, у вас не будет висеть много папок на панели слоев.

Часто делаете макеты или планируете часто делать макеты? Тогда СОХРАНИТЕ файл с вспомогательными слоями разрешений экрана как psd-шаблон, чтобы не повторять эту процедуру каждый раз.

Размер форума/сайта
Теперь следует определиться с размерами элементов дизайна.
Для начала выбираем ширину самого "тела" сайта/форума.  при чем именно той части, где будет находится текст, а не боковые украшения.
Делается это так же как и вспомогательные слои с разрешениями экрана.
При "резиновой" верстки нужно выбрать ширину в процентах и посчитать сколько она будет занимать пикселей от ширины макета.
При фиксированной ширине выбираем размер в пикселях, и далее повторяем шаги описанные выше.

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

Создание дизайна
http://uploads.ru/t/O/G/7/OG7oH.jpg -> http://uploads.ru/t/2/l/f/2lfYm.jpg
Собственно, таким вот образом шаблон должен преобразоваться в макет дизайна - как уже говорилось выше, не по частям, а целостно.
Чтобы создать такой дизайн, который приведен на примере, требуются минимальные знания редактора photoshop. Никаких особенных приемов я специально не использовала.

исходники

http://uploads.ru/t/H/Q/b/HQbZg.png
http://uploads.ru/t/F/c/t/Fctak.png
http://uploads.ru/t/5/B/h/5Bhkj.png
http://uploads.ru/t/Q/n/m/QnmdB.png
http://uploads.ru/t/k/Y/9/kY9jl.jpg
http://uploads.ru/t/t/A/w/tAwGy.jpg
http://uploads.ru/t/f/N/G/fNGcv.jpg
http://uploads.ru/t/G/Z/a/GZaQK.png
http://uploads.ru/t/C/n/Z/CnZlx.png

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

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

Свернутый текст

http://uploads.ru/t/m/Q/9/mQ9Aa.jpg -> http://uploads.ru/t/i/P/I/iPIpE.jpg ->

http://uploads.ru/t/7/u/s/7us1x.jpg -> http://uploads.ru/t/5/G/n/5GnEl.jpg ->

http://uploads.ru/t/G/3/o/G3omy.jpg -> http://uploads.ru/t/X/O/J/XOJQL.jpg ->

http://uploads.ru/t/F/q/9/Fq98X.jpg -> http://uploads.ru/t/7/H/c/7Hc14.jpg ->

http://uploads.ru/t/J/v/T/JvTRF.jpg -> http://uploads.ru/t/3/Y/2/3Y2VB.jpg ->

http://uploads.ru/t/m/z/5/mz5rS.jpg -> http://uploads.ru/t/z/h/I/zhIFS.jpg ->

http://uploads.ru/t/B/n/X/BnX6k.jpg -> http://uploads.ru/t/2/V/l/2Vlik.jpg ->

http://uploads.ru/t/8/c/h/8ch0f.jpg -> http://uploads.ru/t/D/6/3/D634L.jpg ->

http://uploads.ru/t/9/t/n/9tnJO.jpg
В этой статье я не буду вдаваться в подробности фотошоп-мастерства, потому как приемов в дизайне существует масса и все их описывать в одной статье не получится. Вы можете воспользоваться специализированными форумами по фотошопу при создании дизайна, там найдется масса уроков.
Однако есть пара моментов, о которых стоит рассказать подробнее.

Основы колоризации
Выше (при подборе исходников) уже говорилось о том, что цвет картинки не имеет значения. Вкратце (ОЧЕНЬ кратко - рекомендую все же освоить побольше приемов работы с цветом) о возможностях замены цвета изображения.

1. Заменить цвет

http://uploads.ru/t/O/Q/B/OQBNy.jpg
Инструментарий по замене цвета находится в Изображение > Коррекция > Заменить цвет (Image > Adjustment > Replace Color)
http://uploads.ru/t/P/s/i/Psi4d.jpg
Берем пипетку и выбираем цвет, который необходимо заменить (кликаем пипеткой по картинке).
Устанавливаем цвет, на который произойдет замена.
С помощью инструментов http://uploads.ru/i/w/0/8/w08qu.jpg и http://uploads.ru/i/O/V/R/OVRTX.jpg можно управлять областью замены (отмечено зеленым), например, заменить на данный цвет не только все красное, но еще и белое.
Ползунком можно корректировать глубину замены цвета - чем левее ползунок, тем меньше область цветокоррекции.
http://uploads.ru/t/E/p/n/Epn91.jpg > http://uploads.ru/t/X/I/v/XIvV6.jpg

2. Полная цветокоррекция
http://uploads.ru/t/T/F/4/TF4AS.jpg
Когда заменить цвет нужно не частично, а всю целиком, вам подойдет инструментарий Изображение > Коррекция > цветовой тон/насыщенность (Image > Adjustment > Hue/Saturation), быстрые клавиши - Ctrl+U
http://uploads.ru/t/X/D/e/XDeT7.jpg
Ползунок Цветовой тон (Hue) задает цвет, в который нужно перекрасить исходник
Ползунок Контраст (Saturation) делает цвет более блеклым или ярким. (Например, когда хотите превратить золото в серебро, цвет не важен, зато контраст надо сдвинуть влево - цвет исчезнет, станет серым.)
Ползунок Свет (Lightness) делает картинку чернее/белее (не могу назвать этот эффект "темнее/светлее", в стандартной сборке без плагинов этот эффект больше походит на добавление поверх черного и белого, чем на световую цветокоррекцию)
Вы можете сохранить свою цветокоррекцию с помощью кнопки Save и загрузить позднее с помощью кнопки Load (например, если такую же цветокоррекцию надо произвести с еще несколькими другими картинками).
Кнопочка Колоризовать (Colorize) позволяет вам сделать автоподбор колоризации к выбранному цвету (отмечено стрелочками) - выберете заранее цвет и нажмите галочку колоризовать, при необходимости доделайте колоризацию с помощью ползунков.
http://uploads.ru/t/Z/x/6/Zx6JK.jpg > http://uploads.ru/t/E/g/P/EgPpq.jpg

Как делать макет ровным?
Другая большая проблема для новичков - это выравнивание деталей относительно друг друга. Всплывает эта проблема на стадии вертки - выясняется, что фон торчит из-под "тела", а шапка получается меньшего размера, чем сам форум.
Первый шаг на встречу решения этой проблемы - делать макет целиком, 50% проблем (как, например, шапка меньше размера страницы) будет видно прямо на макете.
Другое дело - как "отзеркаливать" элементы относительно друг друга? Как сделать так, чтобы правая половина фона торчала настолько же, как и левая? Как сделать боковые украшения на шапке симметричными?

1. Вспомогательные слои.
Как уже говорилось выше, вспомогательные слои можно делать не только для того, чтобы видеть размер экрана, но и для размера фоновых элементов.
http://uploads.ru/t/u/0/a/u0aT3.jpg
С помощью этих полупрозрачных полосок можно двигать элементы так, чтобы они находились на одинаковом расстоянии.
Для оптимального передвижения вам понадобится выбрать инструмент http://uploads.ru/i/B/O/y/BOyE9.jpg и запомнить сочетания клавиш:
Shift + стрелочки - двигает слой сразу на несколько пикселей;
Ctrl + стрелочки - двигает слой на 1 пиксель.

Некоторые слои могут помогать создавать элементы дизайна. например, у вас уже точно будет обозначен размер тела форума/сайта. Вы можете выделить эту область, нажав CTRL и кликнув по вспомогательному слою, появится выделенная область:
http://uploads.ru/t/9/O/U/9OUWa.jpg
Затем остается просто создать новый слой "Body", залить его текстуркой или цветом, наложить какие угодно эффекты для боковых границ.

2. Линейка и направляющие.

http://uploads.ru/t/V/R/O/VROYS.jpg
Второй ваш помощник - это линейка, вызывается/убирается сочетанием клавиш Ctrl+R.
Сама по себе она почти бесполезна - когда вы что-то пытаетесь выравнивать по ней, вы все равно делаете на глазок. Для точности необходимо пользоваться направляющими линиями.
Чтобы создать направляющую, кликните по вертикальной или горизонтальной шкале (в зависимости от того, какая линия нужна) и потяните линию в нужное место.
Например, сделали боковые украшения справа - ставим направляющую в конец правых декораций. Затем смотрим на линейку и по направляющей считаем расстояние от линии до исходной точки. Потом отсчитываем по линейке такое же расстояние слева и ставим в нужном месте линию.

3. Выравнивание объекта относительно фона. (в редакции)

Отредактировано Герда (25.10.2012 07:55:29)

+1

4

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

Как работает CSS
Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

так выглядит форум без кодов CSS

так выглядит форум с стандартным дизайном

так выглядит форум с индивидуальным диайном

http://uploads.ru/t/9/r/a/9rag3.jpg

http://uploads.ru/t/r/6/F/r6FEY.jpg

http://uploads.ru/t/V/k/Q/VkQXw.jpg

Верстка дизайна представляет собой прописывание кодов для конкретных элементов.
В любом движке любого сайта и форума для этого можно действовать двумя способами - либо прописывать коды в head с тегами <style>, или открыть стандартный шаблон и изменять его.
На примере mybb форума: вставлять данные коды с тегами <style> в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль.

Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять как они работают и запомнить написание кодов.
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.
Например, вот так выглядит HTML код шапки mybb форума (красное - идентификаторы, синее - классы):

<div id="pun-title" class="section">
  <table id="title-logo-table" cellspacing="0">
    <tbody id="title-logo-tbody">
        <tr id="title-logo-tr">
           <td id="title-logo-tdl" class="title-logo-tdl">
            <h1 class="title-logo">
              <span>ForumDesign TS - Дизайн для форумов и техническая поддержка</span>
            </h1>
           </td>
           <td id="title-logo-tdr" class="title-logo-tdr">
            <img width="468" height="60" border="0" src="http://mybb.ru/i/blank.gif">
           </td>
        </tr>
      </tbody>
   </table>
</div>

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:

#pun-title {тут будет код}
.title-logo-tdl {тут будет код}

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

#title-logo-table, #title-logo-tr, #title-logo-tdl {тут будет код}

СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:

#селектор {свойство: значение;}
пример:
#pun-navlinks {backgroud-color: #FF0000;}
расшифровка:
меню навигации {цвет фона: красный;}

Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (;)

#селектор {свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
....
}

Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.
о селекторах mybb-форума можно почитать здесь: Новый FAQ по дизайну и CSS
о свойствах и значениях можно почитать в разделе CSS-кодов

Инструменты для верстки дизайна (Firebug)
Как уже говорилось выше, селекторы нужно не зубрить и знать, а их всегда можно подглядеть в исходном коде.
Для того, чтоб исходный код было удобно просматривать, сделана масса программ, в том числе есть иснструменты для просмотра исходного кода, встроенные в браузер по умолчанию. Однако, они не очень удобны, для того, чтоб щелкать html и css коды как орешки, лучше озаботиться поиском отдельного програмного обеспечения.
Программ для веб-разработчиков масса, тут каждый выбирает для себя, мне лично подошел FireBug, поэтому и добавлю сюда инструкцию по использованию. (если у кого-нибудь будут рекомендации программы получше, скиньте в ЛС, предложим альтернативу).

FireBug - это плагин для браузера FireFox. Им можно абсолютно бесплатно обзавестись на firebug.ru, и если вам понравится, добровольно пожертвовать разработчикам, сколько не жалко.
после установки у вас появится возможность проанализировать код любого элемента на любой странице:

http://uploads.ru/t/n/R/P/nRPYT.jpg

Если навести курсор на строчку HTML-кода, будет показана область, которая относится к этому коду. Если кликнуть по строчке, то справа будут отображаться все CSS-коды, которые влияют на дизайн этой области.

http://uploads.ru/t/U/b/d/Ubdi2.jpg

и HTML-код и CSS-Код в панели FireBug модно редактировать. Более того, туда встроено авто-заполнение, поэтому подобрать коды с ошибками не получится.

http://uploads.ru/i/g/9/I/g9I2U.jpg http://uploads.ru/i/k/z/Z/kzZ35.jpg

Подробнее о том, как использовать FireBug показано в этом видео-уроке:

Учимся правильно резать макет
http://uploads.ru/i/C/a/r/Caruo.jpg
Следующий этап создания дизайна - превращение макета в элементы дизайна.
Этот этап относится именно к верстке, а не работе с макетом, потому как в этом случае работа в фотошоп завязана на работе с CSS-кодами - необходимо глядя на макет представлять его в виде элементов дизайна и исходя из этого "резать" макет.

Планирование элементов дизайна
Необходимо сориентироваться и экономно распланировать расположение элементов дизайна.

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

Не правильно

Правильно

http://uploads.ru/t/8/N/G/8NGgX.png

http://uploads.ru/t/Z/K/f/ZKfT2.png

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

Не правильно

Правильно

http://uploads.ru/t/1/N/O/1NOg8.jpg

http://uploads.ru/t/J/K/s/JKshi.jpg
+
http://uploads.ru/t/K/0/I/K0Ige.png
+
http://uploads.ru/t/J/0/b/J0bA3.jpg

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

GIF - 36,92 Кб

PNG - 100,88 Кб

JPG - 17,96 Кб

http://uploads.ru/i/D/Q/x/DQxcb.gif

http://uploads.ru/i/W/7/R/W7RVu.png

http://uploads.ru/i/h/U/Q/hUQ4t.jpg

  - GIF следует использовать для анимации
если картинка не анимированная, то формат нужно использовать другой, т.к. PNG и JPG картинки получаются значительно легче и качественней.
если вы добавляете анимированный элемент дизайна, старайтесь облегчить вес анимации. Подробнее об этом можно прочесть в уроке photoshop делаем GIF анимацию легче

  - PNG используется для прозрачности
PNG весит значительно больше JPG (и больше неанимированной гифки), поэтому картинку следует сохранять в PNG только если в ней есть прозрачные области, которые не работают в формате JPG

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

  - понижайте качество JPG картинки
Когда сохраняете картинку в JPG, вы можете значительно сбросить ее вес, покрутив колесико Quality (Качество):
http://uploads.ru/i/t/f/b/tfb0W.jpg
Для глаза разница не заметна, а вес графики станет меньше.

элементы, которые у меня получились:

Свернутый текст

http://uploads.ru/t/5/8/U/58Uro.jpg
http://uploads.ru/t/s/l/1/sl1mb.jpg
http://uploads.ru/t/2/Y/M/2YMKl.jpg
http://uploads.ru/t/D/0/e/D0eGk.jpg
http://uploads.ru/t/Q/e/8/Qe8ij.png
http://uploads.ru/t/R/M/G/RMGjZ.png
http://uploads.ru/t/M/I/V/MIVB8.jpg
http://uploads.ru/t/c/o/H/coHy9.jpg
http://uploads.ru/t/U/Z/g/UZgKV.png
http://uploads.ru/t/k/Q/Y/kQY6w.png

так же, следует всегда помнить, что если что-нибудь пойдет не так, вы всегда можете вернуться к макету и переделать картинки. да здраствует PSD! http://uploads.ru/i/g/p/f/gpfN7.gif

Учимся вставлять фоновые картинки

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

Чтобы этих проблем не было, нужно не просто ставить фоновую картинку, а указывать все настройки для нее (все значения свойства BACKGROUND)

background-color - задает фоновый цвет.
значения:
цвет (см. таблицу цветов)
transparent (прозрачный)
примеры:
селектор {background-color: red;}
селектор {background-color: #ff0000;}
селектор {background-color: transparent;}

background-image - устанавливает фоновое изображение для элемента.
значения:
url(путь к файлу)
none - отсутствует
примеры:
селектор {background-image: url("/files/0007/e3/f7/87936.png");}
селектор {background-image: none;}

background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image.
значения:
repeat - картинка повторяется по горизонтали и вертикали. (это значение идет по умолчанию)
no-repeat - картинка не повторяется
repeat-x - повторяется только по горизонтали
repeat-y - повторяется только по вертикали
space - повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round - повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
примеры:
селектор {background-repeat: no-repeat;}
селектор {background-repeat: repeat-x;}

background-position: - задает начальное положение фонового изображения, установленного с помощью свойства background-image.
значения:
У этого свойства два значения: положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom).
Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
примеры:
селектор {background-position:: top center;}
селектор {background-position:: 30px 30px;}
селектор {background-position:: 10% 50%;}

background-attachment - устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
значения:
fixed - делает фоновое изображение элемента неподвижным.
scroll - позволяет перемещаться фону вместе с содержимым.
local - фон фиксируется с учётом поведения элемента: если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
примеры:
селектор {background-attachment:: fixed;}

Все значения фона можно прописать одним кодом!
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
Значения не разделяются запятыми, а пишутся подряд (согласна правилам CSS-кодов, описанных выше):

селектор {background: цвет картинка повторение фиксация расположение;}
Пример:
#pun {background: transparent url("/files/0007/e3/f7/87936.png") no-repeat fixed right bottom;}
расшифровка:
селектор {фон: прозрачный с вот такой картинкой: https://forumstatic.ru/files/0007/e3/f7/87936.png не дублировать фон зафиксировать фон разместить внизу справа;}

Составляем css-код дизайна

http://uploads.ru/t/O/G/7/OG7oH.jpg -> http://uploads.ru/t/2/l/f/2lfYm.jpg -> http://uploads.ru/t/3/C/t/3Ctpl.jpg
По прочтении всего, изложенного выше, с составлением кодов может быть только одна проблема - как вычислить нужный селектор?
Ведь любые свойства и значения CSS можно всегда подглядеть или спросить, а селекторы везде разные.
Секрет составления кода дизайна во внимательном просмотре HTML кода.
Рассмотрим этот процесс на примере последовательности фоновых изображений в текущем дизайне.

На самый задний фон необходимо поставить текстурку (http://uploads.ru/i/c/o/H/coHy9.jpg).
Заглядываем в HTML-код страницы и ищем самый первый тег, с которого начинается код (он, кстати, везде и всегда одинаковый):

Код:
<html>
   ....
</html>

Мы можем вписать тектуру в данный тег:

Код:
html {background: url("http://uploads.ru/i/c/o/H/coHy9.jpg") repeat scroll 0 0 #000000;}

Следующим "слоем" у нас идет эльфийки с цветочками (http://uploads.ru/i/M/I/V/MIVB8.jpg). Смотрим, какие теги идут следующими:

Код:
<html>
   <head>
      ....
   </head>
   <body>
      ....
   </body>
</html>

С помощью FireBug видно, что тег HEAD не подсвечивается, а при наведении курсора на BODY выделяется вся страница (потому как тег body в html отвечает за тело форума/сайта, собственно body и переводится с английского как "тело" - в нем хранятся все коды, отвечающие за содержимое страницы).
http://uploads.ru/t/p/9/8/p98OK.jpg
вписываем фон в body:

Код:
body {background: url("http://uploads.ru/i/M/I/V/MIVB8.jpg") no-repeat scroll center bottom transparent;}

следующим слоем нужно вписать верхние цветочки, которые должны отображаться под фоном таблиц и под шапкой (http://uploads.ru/i/d/q/J/dqJp6.png)
Разворачиваем тег BODY и ищем ближайший тег содержимого страницы:
http://uploads.ru/t/I/G/H/IGHcC.jpg

Код:
<html>
   <head>....</head>
   <body>
      <div id="pun_wrap">
         ....
      </div>
   </body>
</html>

вписываем фон в контейнер с идентификатором pun_wrap:

Код:
#pun_wrap {background: url("http://uploads.ru/i/d/q/J/dqJp6.png") no-repeat scroll center top transparent;}

следующим этапом идет фон форумного контента (http://uploads.ru/i/U/Z/g/UZgKV.png)
разворачиваем контейнер pun_wrap и сразу же видим контейнер pun
http://uploads.ru/t/o/x/d/oxdbS.jpg

Код:
<html>
   <head>....</head>
   <body>
      <div id="pun_wrap">
         <div id="pun">
            ....
         </div>
      </div>
   </body>
</html>

на этот раз нужно не только вписать фон, но и задать ширину контейнера:

Код:
#pun {
    background: url("http://uploads.ru/i/U/Z/g/UZgKV.png") repeat-y scroll center top transparent;
    margin: auto;
    padding: 0 40px;
    position: relative;
    width: 918px;
}

Вот таким образом, анализируя HTML-код, можно задавать настройки.
С помощью FireBug можно экспериментировать, например, редактировать CSS-коды до того, как вставлять изменения в стиль - если что-то пойдет не так или что-то перекосится, вы всегда можете обновить страницу и попробовать написать код заново.
Сам процесс подбора размеров форумных элементов и вставки картинок с помощью Firebug у меня занял 40 минут.

коды

html верх:

Код:
<style>
html {background: url("http://uploads.ru/i/c/o/H/coHy9.jpg") repeat scroll 0 0 #000000;}
body {background: transparent url("http://uploads.ru/i/M/I/V/MIVB8.jpg") no-repeat scroll bottom center;}
#pun_wrap {background: transparent url("http://uploads.ru/i/d/q/J/dqJp6.png") no-repeat scroll top center;}
#pun {background: url("http://uploads.ru/i/U/Z/g/UZgKV.png") repeat-y scroll center top transparent; margin: auto; padding: 0 40px; position: relative; width: 918px;}
.punbb { float: left; height: auto; margin: 0 40px; width: auto;}
#logoup {background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height: 383px; margin: 0 -206px;}
#my_text {color: #FFFFFF; height: 134px; margin-left: 420px;  overflow: auto; position: absolute; top: 106px; width: 238px;}
#pun-title {background: transparent; border: none;}
#pun-title h1 {display: block;  font-family: 'Marck Script',cursive; height: auto; padding: 0 0 0 176px; position: absolute; top: 76px;}
#pun-title h1 span {color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE;}
#pun-title td.title-logo-tdl, #pun-title table, #pun-title td.title-logo-tdr {width: auto; height: auto}
#pun-title td.title-logo-tdr {margin-left: -50px; position: absolute; top: 3px;}
#pun-navlinks {position: absolute; border: none; background: transparent; width: 840px; top: 306px;}
#pun-ulinks {position: absolute; border: none; background: transparent; width: 840px; top: 350px;}
#pun-navlinks .container, #pun-ulinks .container {border: none; background: transparent; text-align: center;}
#pun-navlinks .container {font-weight: bold;}
#pun-navlinks a, #pun-ulinks a, .punbb a, .punbb a:link, .punbb a:visited {color: #afa7ca;} #pun-navlinks a:hover, #pun-ulinks a:hover, .punbb a:hover {color: #9783db;}
#pun-ulinks li, #pun-ulinks li a {border: none;}
.punbb .divider {border-color: #858585 #333333 #333333;}
#pun-status, #pun-status .container, #pun-crumbs1, #pun-crumbs1 p.container, #pun-crumbs2, #pun-crumbs2 p.container, #pun-about, #pun-about .container {border: none; background: none; color: #b4b4b4;}
#pun-crumbs1 p.container {padding: 1em 1em 0;}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2  {background: transparent url(http://uploads.ru/i/Q/e/8/Qe8ij.png) no-repeat top center; margin: 20px -20px 0; height: 34px; border: none; text-align:center;}
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {border: none;}
.punbb h2 span {font-weight: bold; position: relative;  top: 10px; color: #afa7ca;}
#pun-stats .container, .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {background: #000; margin: 0 12px;  -moz-border-radius: 0 0 10px 10px;  -webkit-border-radius: 0 0 10px 10px;  -khtml-border-radius: 0 0 10px 10px;  border-radius: 0 0 10px 10px; border-color: #636363; border-top: medium none;}
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post {border: none;}
.punbb .post h3 span, #viewprofile li, #setmods dl {color: #b4b4b4; background: #000;}
.punbb th {text-align: center; border: none; background: transparent; color: #b4b4b4;}
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, .punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd, .punbb .info-box, .punbb #pun-main .info-box .legend {background: #000; color: #b4b4b4;}
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table {border-color: #2f2f2f;}
.punbb .main th {border-color: #2f2f2f;}
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {color: #B4B4B4;}
li#onlinelist {border: none;}
li#onlinelist div {border-color: #636363;}
.punbb tbody.hasicon td.tcl {padding-left: 1em;}
.punbb table Div.icon {float: left; display: block; width: 80px; height: 70px; border-style: none; background-image: url(http://uploads.ru/i/5/8/U/58Uro.jpg);  background-repeat: no-repeat; position: relative; padding-right: 5px; margin-left: -2px;}
TR.inew Div.icon {background-image : url(http://uploads.ru/i/s/l/1/sl1mb.jpg); background-repeat: no-repeat; }
TR.isticky Div.icon {background-image : url(http://uploads.ru/i/2/Y/M/2YMKl.jpg); height: 78px; background-repeat: no-repeat; }
TR.iclosed Div.icon {background-image : url(http://uploads.ru/i/D/0/e/D0eGk.jpg); background-repeat: no-repeat; }
#html-footer .container {border: none; background: transparent;}
#html-footer {margin-bottom: 0;}
#logobottom {background: url("http://uploads.ru/i/R/M/G/RMGjZ.png") no-repeat scroll center top transparent; height: 178px; margin: 0 -56px;}
#my_copyright {bottom: 64px; height: 86px; margin-left: 260px;  position: absolute;  width: 426px; color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE; font-family: 'Marck Script',cursive;}
#FD_copyright {bottom: 12px; margin-left: 244px; position: absolute; width: 460px;}
</style>

<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<div id="logoup"><div id="my_text">

Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>

</div></div>

html низ

Код:
<div id="logobottom"><div id="my_copyright">

<center>Тут любой текст вашего копирайта.</center>

</div><div id="FD_copyright"><center><!-- ПОЖАЛУЙСТА!!! НЕ УДАЛЯЙТЕ ЭТОТ ТЕКСТ! --> Стиль сделан В рамках проекта <a href="http://forumd.ru/">ForumDesign TS</a><br/> <a href="http://forumd.ru/viewforum.php?id=97">Выбери свой стиль</a> | <a href="http://forumd.ru/viewtopic.php?id=3073">Как создать дизайн?</a> | <a href="http://forumd.ru/viewforum.php?id=5">Дизайн на заказ</a></center></div></div>

Верстка дизайна на mуbb форуме при помощи FireBug

Для наглядности предлагаю вам ознакомиться с данным видео.
Вы увидите:
  - как происходит верстка дизайна с нуля
  - как вставлять фоновые элементы
  - как добавлять в стиль новые селекторы страницы
  - как использовать функционал FireBug
  - как позиционировать элементы
  - (забегая вперед) как делать свои блоки для элементов дизайна

Отредактировано Герда (08.12.2012 18:59:23)

0

5

Некоторые трюки

В этой части статьи вы научитесь двум вещам, без которых невозможен хороший дизайн:
1. Оригинальность
когда все коды и все фишки стянуты со стандартных уроков или из каталогов готовых кодов, дизайн получается клоном еще сотни таких же. в начале статьи вас уже просили закрыть интернет и включить воображение, а в этой части статьи вы на практике увидите, что с помощью CSS и HTML возможно почти все.

2. Рациональность
невозможно держать в голове сразу все пути воплощения своих идей, но нужно уметь их находить, тогда дизайн получится легким и, самое главное, практичным.

Создаем свои элементы HTML (контейнеры для текста, контейнеры для элементов дизайна)

В этом уроке стоит обратить вше внимание на шапку из дизайна-примера:
http://uploads.ru/t/d/V/H/dVHGO.jpg
Как вы можете видеть, название форума и текст в контейнере выполнен в виде текста, а не картинки (да, для некоторых текст в виде текста - это магия), его можно копировать. Сама шапка вставлена не в стандартный шаблон, а сделана с помощью дополнительного DIV-блока.
Все, что нужно для подобных приемов в дизайне - освоить позиционирование элементов.

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

Значения:
absolute - указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Визуально элемент с абсолютным позиционированием выглядит будто находится НАД остальными.

Было (#pun-status .container {background: transparent;})

Стало (#pun-status .container {background: transparent; position: absolute; top: 227px;})

http://uploads.ru/t/s/Y/W/sYW7a.jpg

http://uploads.ru/t/D/n/C/DnC8Q.jpg

После того, как элементу заается абсолютное позиционирование, можно регулировать положение с помощью свойств left (влево), top (сверху), right (справа) и bottom (снизу).
Пишем куда двигать и на какое расстояние, например:

Код:
селектор {
  position: absolute;
  top: 227px;
}

ВНИМАНИЕ!!!  На положение при перемещении влияет значение свойства position родительского элемента (тега, внутри которой находится элемент): если у родителя значение position не установлено или родителя нет, то отсчет координат ведется от края окна браузера, а если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Вывод: когда вы задаете элементу абсолютное позиционирование, но не указываете позиционирование родителя, свойства LEFT и RIGHT двигают элемент не относительно рабочей области, а относительно ОКНА БРАУЗЕРА! (а ширина окна браузера у каждого разная - зависит от разрешения экрана)
именно таким образом получаются, например, рекламные баннеры, которые "ездят" по шапке сайта/форума.

relative - положение элемента устанавливается относительно его исходного места.

Было (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left;})

Стало (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left; position: relative; left: -22px;})

http://uploads.ru/t/B/h/F/BhFnE.jpg

http://uploads.ru/t/D/r/V/DrVA4.jpg

Добавление свойств left (влево), top (сверху), right (справа) и bottom (снизу) изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Пишем куда двигать и на какое расстояние, например:

Код:
селектор {
  position: relative;
  left: -22px;
}

fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left (влево), top (сверху), right (справа) и bottom (снизу) точке на экране и не меняет своего положения при прокрутке веб-страницы.

Было
.tab {
    height: 42px;
    position: relative;
    top: 0;}

Стало
.tab {
    position: fixed;
    top: 0;
    width: 1000px;
}

http://uploads.ru/t/P/E/R/PERze.jpg

http://uploads.ru/t/M/L/y/MLytj.jpg

http://uploads.ru/t/J/T/6/JT6GB.jpg

http://uploads.ru/t/p/k/1/pk125.jpg

в отличие от absolute, при движении фиксированного элемента, вы его двигаете ОТ КРАЕВ ЭКРАНА, не зависимо от того, какое позиционирование стоит у родительского элемента.

Позиционирование на примере названия форума
находим селектор названия:
http://uploads.ru/t/E/t/X/EtXiw.jpg

Код:
#pun-title h1 {....}

задираем объект вверх:
http://uploads.ru/t/6/v/k/6vkCW.jpg

Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
}

Делаем отступ слева и убираем другие отступы, которые стояли в шаблоне стиля:
http://uploads.ru/t/W/Z/D/WZDPn.jpg

Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
    padding: 0 0 0 176px;
}

добавляем всякое-разное для красоты:
http://uploads.ru/t/b/W/A/bWAU0.jpg

Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
    padding: 0 0 0 176px;
    font-family: 'Marck Script',cursive;
}
#pun-title h1 span {
    color: #E25DB3;
    font-size: 2.1em;
    text-shadow: 1px 1px 2px #9670CE;
}

Делаем контейнеры для элементов дизайна
Указанную выше шапку (http://uploads.ru/i/k/Q/Y/kQY6w.png) можно было вставлять множеством способов...
Например, можно было объеденить ее с фоном, расположенным под ней и вставлять через контейнер pun_wrap. Но, тогда картинка была бы больше, а следовательно, тяжелее.
Или можно было бы ее нарезать (отдельно меню навигации, отдельно юзер-меню, отдельно бока, отдельно область шапки) и вставлять в соответствующие контейнеры (кстати, это было бы ПРАВИЛЬНЕЕ, т.к. можно было бы сделать большую часть картинки в формате JPG и суммарный вес графики получился бы меньше), но я преследовала цель как можно меньше времени тратить на дизайн и как можно больше - на написание этой статьи, поэтому шапка вставлена прям-таки под наши цели - через отдельный контейнер.

На любом движке существует возможность дополнить HTML шаблон своими кодами: в некоторых случаях эти возможности шире (например, ucoz, phpbb, joomla и т.д.), в некоторых - крайне не велики (mybb, borda...). Главное - лишь бы было место, куда вставлять HTML, а дальше нас спасет позиционирование.

Создадим свой див блок для шапки и вставим его в верх:

Код:
<div></div>

Есть два способа оперировать стилем этого блока. Мы можем добавить атрибут STYLE прямо в контейнер и внутри него писать свойства и значения стиля:

Код:
<div style="background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height:300px"></div>

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

Код:
<div id="logoup"></div>

когда у контейнера есть имя, мы можем ссылаться на него через CSS:

Код:
#logoup {background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height: 383px; margin: 0 -206px;}

Точно так же выполнена и область копирайта:
вниз

Код:
<div id="logobottom"></div>

в стиль

Код:
#logobottom {background: url("http://uploads.ru/i/R/M/G/RMGjZ.png") no-repeat scroll center top transparent; height: 178px; margin: 0 -56px;}

http://uploads.ru/t/G/B/b/GBbhN.jpg

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

Итак, нам нужно сделать контейнер в шапке форума. создаем DIV для текста:

Код:
<div id="logoup">
   <div id="my_text">
      Тут будет ваш текст
   </div>
</div>

позиционируем текст:

Код:
#my_text {
    margin-left: 420px;
    top: 106px;
}

http://uploads.ru/t/V/2/E/V2EHx.jpg

зададим максимальную ширину и максимальную высоты контейнера:

Код:
#my_text {
    margin-left: 420px;
    top: 106px;
    width: 238px;
    height: 134px;
}

http://uploads.ru/t/Z/v/O/ZvOJj.jpg

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

Код:
#my_text {
    margin-left: 420px;
    top: 106px;
    width: 238px;
    height: 134px;
    overflow: auto;
}

http://uploads.ru/t/T/P/g/TPg5K.jpg

Также (но в этом случае - без прокрутки) можно поступить и с копирайтом:
вниз

Код:
<div id="logobottom"><div id="my_copyright">

<center>Тут любой текст вашего копирайта.</center>

</div><div id="FD_copyright"><center><!-- ПОЖАЛУЙСТА!!! НЕ УДАЛЯЙТЕ ЭТОТ ТЕКСТ! --> Стиль сделан В рамках проекта <a href="http://forumd.ru/">ForumDesign TS</a><br/> <a href="http://forumd.ru/viewforum.php?id=97">Выбери свой стиль</a> | <a href="http://forumd.ru/viewtopic.php?id=3073">Как создать дизайн?</a> | <a href="http://forumd.ru/viewforum.php?id=5">Дизайн на заказ</a></center></div></div>

в стиль

Код:
#my_copyright {bottom: 64px; height: 86px; margin-left: 260px;  position: absolute;  width: 426px; color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE; font-family: 'Marck Script',cursive;}
#FD_copyright {bottom: 12px; margin-left: 244px; position: absolute; width: 460px;}

0

6

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

Создание таблицы
Для примера таблицы, вернемся к макету и нарисуем любую невероятной красоты штуку для информации.

http://uploads.ru/t/V/N/U/VNUDf.jpg

При создании таблиц, конечно нужно исходить не из неземной красоты, а из функционала, который табличка должна в себя включать:

http://uploads.ru/t/W/y/U/WyUtv.jpg

Для начала нужно составить HTML-код полученного макета. попытаемся прочертить визуальные границы:

http://uploads.ru/t/Q/h/E/QhE98.jpg

Составляем HTML-код таблицы. Подробно о том, как составлять HTML код таблицы написано здесь: Таблицы в HTML.

подготовка

чтобы табличка отображалась так, как на макете, пришлось еще дополнить стиль (убрать фон объявления, передвинуть слово "оъявление" и т.п.)

Код:
#pun-announcement, #pun-announcement .container, #pun-announcement h2, #pun-announcement h2 span {background:transparent; border:none;}
#pun-announcement {margin-bottom:0;}
#pun-announcement .container {padding: 4.3em 1em 0;}
#pun-announcement h2 span {position:absolute; margin-left: 130px; margin-top: 50px; }
Код:
<table>
<tr>
<td rowspan="2">контейнер</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

теперь будем постепенно эту таблицу разукрашивать через стиль.
Сделаем фон. Для этого зададим табличке идентификатор my_table.

коды

HTML

Код:
<table id="my_table">
<tr>
<td rowspan="2">контейнер</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

CSS

Код:
#my_table {
   background: transparent url(http://uploads.ru/i/i/y/f/iyfQ8.png) no-repeat bottom center;
   border: 0 none; 
   height: 350px; 
   width: 850px; 
   margin: 0 -20px; 
   padding: 0 30px;
}

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

CSS3: меньше картинок, больше кодов
Что такое css 3 и откуда он взялся? жили-были люди, которые хотели быстро и просто раскрасить интернет без использования HTML, и придумали они каскадные таблицы стилей CSS. Разработчики браузеров сказали "ух ты! какая полезная штука. добавим мы ваши коды в браузеры, чтобы они отображались у пользователей". С тех пор мы можем менять дизайн сайта через CSS, а браузеры "понимают" этот код и выдают пользователю картинку.
Но разработчики не стояли на месте, а сели и подумали над новой версией CSS-кодов. Зачем? затем, что не все действия можно выполнить с помощью css-кодов. закругленные контейнеры приходилось делать картинками, светящиеся буковки - тоже картинками... Слишком много картинок.
Так появился CSS3 - новые коды для дизайна.

Плюсы и минусы CSS3
Плюс в том, что все ваши дизайнерские навороты можно выполнить с помощью простых кодов, а не делать много-много картинок. Код грузится значительно быстрее картинки, а следовательно, дизайн будет "легче".
Проблема в том, что разработчики браузеров не спешили "учить" браузеры понимать эти коды, поэтому в старых версиях CSS3 не отображается (например, Internet Explorer 9 знает css3, а все предыдущие версии не отображают CSS3).
Так что, использовать CSS надо на всякий пожарный так, чтобы страница была читабельна как с этими кодами, так и без них.

CSS3 кроссбраузерность
Еще одна проблема - каждый браузер по-своему "понимает" коды CSS3. Например, свечение текста в Mozilla и в Opera выглядят по разному. Еще один пример - закругление границ, некоторые версии некоторых браузеров "требуют" писать css-код для них отдельно:

Код:
#селектор {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
}

Так что, при использовании CSS3 требуется тщательная проверка на кроссбраузерность.
В любом случае, повозиться с CSS3 стоит, т.к. экономия трафика значительна.

здесь и далее использовались материалы сайта http://www.wisdomweb.ru
Что умеет CSS3
Свойств CSS3 настолько много, что все их перечислять на наглядном примере в этой статье не имеет смысла - глава растянется на очень большое количество символов, скриншотов и пояснительного текста. Имеет смысл обращаться в Каталог CSS кодов с просьбами сделать урок по интересующим свойствам.
Здесь будет перечислены все свойства, а ниже будут разбираться подробнее те, которые используются в примере дизайна (border-radius, box-shadow и text-shadow).

background-image - модернизировано и позволяет вставлять сразу несколько фоновых изображений для элемента;
background-size - задает размер фонового изображения;
background-origin - позволяет установить как должно вычисляться положение элемента относительно границ его родительского элемента;
background:linear-gradient и background:radial-gradient - позволяет создавать градиентный фон (линейный и радиальный);
border-radius - создает элемент с закругленными (сглаженными углами);
box-shadow - делает тень или свечение у элемента;
border-colors - позволяет регулировать цвет каждого пикселя границы;
border-image - осуществляет вставку изображений в качестве границы;
@font-face - позволяет импортировать любые шрифты;
text-shadow - делает тень или свечение у текста;
text-overflow - позволяет указать, что должно случиться с текстом вышедшем за пределы границ элемента;
word-wrap - заставляет длинные слова, выходящие за пределы границ элемента, должны разделяться и переносится на новую строку;
opacity - создает полу-прозрачные элементы;
transform - позволяет трансформировать элементы с помощью разных значений, например, поворачивать, смещать, растягивать и т.п.;
transition - одно из свойств, позволяющий анимировать элементы, создает эффекты перехода;
@keyframes - создает анимацию;
column-count - позволяет легко и ыстро разбить текст на столбцы;
column-gap - устанавливает величину отступа между столбцами текста;
column-rule - задает ширину, цвет и стиль оформления пространства между столбцами;
column-width - позволяет указывать ширину столбцов текста;

BORDER-RADIUS
С помощью нового CSS3 свойства border-radius Вы можете делать углы элементов сглаженными.

Код:
#el1 {
border-radius:5px;
}
#el2 {
border-radius:10px;
}
#el3 {
border-radius:20px;
}
#el4 {
border-radius:15px;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Данное свойство может применяться не ко всем углам элемента, а только к определенным:
    border-top-left-radius делает сглаженным только верхний правый угол элемента;
    border-top-right-radius делает сглаженным только верхний левый угол элемента;
    border-bottom-left-radius делает сглаженным только нижний правый угол элемента;
    border-bottom-right-radius делает сглаженным только нижний левый угол элемента.

Можно не использовать эти свойства, а записывать закругление границ одним кодом:

Код:
#el1 {
border-radius:5px 5px 15px 15px;
}
#el2 {
border-radius: 0 0 10px 10px;
}
#el3 {
border-radius:40px 0 40px 0;
}
#el4 {
border-radius:0px 20px 20px 20px;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Чтобы border-radius отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):

Код:
#селектор {
  border-radius: 10px;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
}

BOX-SHADOW
С помощью свойства box-shadow Вы можете добавлять к элементам страницы тени.
Тень может быть внешней и внутренней. Внешние тени создают эффект приподнятости элемента над остальным содержимым, а внутренние создают эффект вдавленности элемента.

Код:
#el9 {
box-shadow:4px 4px black;
}
#el10 {
box-shadow:6px 6px 6px 2px black;
}
#el11 {
box-shadow:0px 0px 6px 2px black inset;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Чтобы box-shadow отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):

Код:
#селектор {
   .shadow {
    background: #fc0; /* Цвет фона - обязательно для IE*/
    box-shadow: 0 0 10px red; 
    -moz-box-shadow: 0 0 10px red; /* Для Firefox */
    -webkit-box-shadow: 0 0 10px red; /* Для Safari и Chrome */
}

TEXT-SHADOW
С помощью нового CSS3 свойства text-shadow Вы можете добавлять к тексту элементов тени (к тексту одного элемента может быть добавлено одновременно несколько теней).
При задании тени для текста необходимо указать: величину смещения тени от текста по горизонтали и вертикали (может быть отрицательной), а также радиус размытия и цвет тени.

Код:
#shadow1 {
text-shadow:3px 2px #FFAE00;
}
#shadow2 {
text-shadow:1px 1px 10px #FFAE00;
}
#shadow3 {
text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

CSS3 на примере таблицы
http://uploads.ru/i/T/1/0/T105E.jpg

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

Для создания контейнера назовем ячейку с контейнером "box-td" и вставим в ячейку контейнер "my_box"
HTML

Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="my_box">контейнер</div>

</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

Через стиль ограничиваем размер ячейки (чтоб ничто никуда не вылазило):

Код:
#box-td {height: 170px; width: 340px;}

А контейнеру задаем размер, отступы (ведь справа к нему надо будет "прилепить" фею) и CSS3 свойства (закругление и тень)

Код:
#my_box {
   background: #000;
   width: 280px; 
   height: 105px; 
   -moz-border-radius: 10px;  
   -webkit-border-radius: 10px;  
   -khtml-border-radius: 10px;  
   border-radius: 10px; 
   -webkit-box-shadow: 0px 0px 3px #8c61ca; 
   -moz-box-shadow: 0px 0px 3px #8c61ca; 
   box-shadow: 0px 0px 3px #8c61ca; 
   height: 100px; margin-left: 45px; 
   margin-top: 65px; 
   width: 275px; 
   padding:5px; 
   overflow: auto;
}

Теперь сделаем поверх него фею, делаем так же, как и с контейнирами для элементов дизайна (см. выше): создаем DIV-блок для картинки, а в CSS прописывается ширина, высота + позиционирование:

коды

HTML

Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<div id="my_box">контейнер</div>

</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

CSS

Код:
#fairy1 {
   background: transparent url(http://uploads.ru/i/4/K/o/4KoS9.png) no-repeat top center; 
   height: 265px; 
   margin-left: -55px; 
   margin-top: -15px; 
   position: absolute; 
   width: 172px;
}

Добавляем текст (с отступом от феи) и готово:

коды

HTML

Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div>
</div>

</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

CSS

Код:
#my_box-text {margin-left: 65px;}

Свойство DISPLAY: задаем отображение элементов
При создании каких-либо нестандартных элементов, вам понадобится внимательно изучить CSS-свойство display.
чем оно так необходимо и полезно? дело в том, что по правилам HTML теги влияют на положения элементов: например, если текст вставлен через параграф (<p>текст1</p> <p>текст2</p>), то он обязательно будет переноситься на следующую строку. С помощью свойства display можно менять эти правила, влиять на положение элементов.

Значения свойства display
(точные определения, взяты с HTML-book, ниже будут более понятные примеры и расшифровки)

block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
                   
inline - Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
                   
inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

inline-table - Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

list-item - Элемент выводится как блочный и добавляется маркер списка.

none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.

run-in - Устанавливает элемент как блочный или встроенный в зависимости от контекста.

table - Определяет, что элемент является блочной таблицей подобно использованию тега <table>.

table-caption - Задает заголовок таблицы подобно применению тега <caption>.

table-cell - Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).

table-column - Назначает элемент колонкой таблицы, словно был добавлен тег <col>.

table-column-group - Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.

table-footer-group - Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.

table-header-group - Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.

table-row - Элемент отображается как строка таблицы (тег <tr>).

table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

Наглядные примеры и наиболее популярные применения свойства Display

#элемент {display: none;}
вот он, вот он - ответ на ваши бесконечные вопросы "как убрать вот это? как убрать вот то?" :)
если у вас нет доступа к шаблону сайта/форума, элемент можно заставить "исчезнуть" - находим нужный селектор и убираем его через CSS.

Было (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent;})

Стало (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent; display: none;})

http://uploads.ru/t/D/4/e/D4euq.jpg

http://uploads.ru/t/a/8/N/a8N0r.jpg

#элемент {display: block;}
этот тег заставляет элемент вести себя как контейнер: все элементы, которые стоят рядом, переносятся на следующую строчку; блочному элементу всегда можно задать ширину, высоту и тому подобные характеристики.

Было (#pun-ulinks li a {text-decoration: none; text-align: center; width: 300px;})

Стало (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})

http://uploads.ru/t/n/u/c/nucC9.jpg

http://uploads.ru/t/V/l/9/Vl94j.jpg

#элемент {display: inline;}
это свойство заставляет элемент(ы) отображаться в строчку. чаше всего употребляется в горизонтальных меню:

Было (#pun-navlinks li {display: block;})

Стало (#pun-navlinks li {display: inline;}})

http://uploads.ru/t/y/o/F/yoFEW.jpg

http://uploads.ru/t/g/2/Y/g2YJr.jpg

#элемент {display: inline-block;}
Что делать, если нам нужно, чтоб элемент вел себя как контейнер (ему можно было бы задать ширину, высоту), но при этом, чтоб элемент не переносил на другие строчки своих соседей? тут нас спасает значение inline-block

Было (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})

Стало (#pun-ulinks li a {display: inline-block; text-decoration: none; text-align: center; width: 200px;})

http://uploads.ru/t/V/l/9/Vl94j.jpg

http://uploads.ru/t/c/p/7/cp7Su.jpg

значения table
эти значения могут позволить превратить в табличку все то, что таблицей не является.

Было (убраны все свойства display)

Стало (#pun-ulinks {display: table;}
#pun-ulinks .container {display: table-row;}
#pun-ulinks li, #pun-ulinks li a {display: table-cell;}
)

http://uploads.ru/t/S/c/X/ScXlB.jpg

http://uploads.ru/t/N/W/r/NWrDg.jpg

Применение свойства DISPLAY на примере таблицы
В соседней от CSS3 контейнера ячейке, нам нужно разместить красивые контейнеры для каких-нибудь важных ссылок:

http://uploads.ru/t/8/S/N/8SNiq.jpg

сначала назначаем ячейки ID  и задаем ее размеры

коды

HTML

Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div>
</div>

</td>
<td colspan="2" id="link-td">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

CSS

Код:
#link-td {height: 85px;}

Теперь сделаем каждую ссылку с отдельном div-контейнере:

код HTML
Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">
<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">
тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>
</div>
</div>
</td>
<td colspan="2" id="link-td">

<div id="link1"><a href="#">Ссылка1</a></div>
<div id="link2"><a href="#">Ссылка2</a></div>
<div id="link3"><a href="#">Ссылка3</a></div>

</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

попробуем их стилизовать:

Код:
#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
}

http://uploads.ru/t/O/Z/D/OZDo4.jpg

добавим ширину и высоту, чтоб они не растягивались:

Код:
#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
}

http://uploads.ru/t/5/k/z/5kz6b.jpg

получается беда: ссылки все равно идут друг под другом (потому что мы поместили их в div-блоки)
заставим их стоять в ряд, добавив display:inline;

Код:
#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display:inline;
}

http://uploads.ru/t/k/g/2/kg2uC.jpg

опять не то. как видно на скрине, перестали работать ширина и высота.
значит, нам нужно заставить элементы быть одновременно блочными, но при этом стоять в линию. Поправзяем inline на inline-block

Код:
#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display: inline-block;
}

http://uploads.ru/t/r/t/J/rtJYD.jpg

это именно то, что и было на макете. осталось только подвинуть элемент с помощью свойства margin

Код:
#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display: inline-block;
margin: 34px 3px 3px;
}

http://uploads.ru/t/N/8/A/N8A6U.jpg

Красивые заголовки и шрифты

http://uploads.ru/t/V/N/U/VNUDf.jpg -> http://uploads.ru/t/S/N/W/SNW2X.jpg
Все администраторы ролевых форумов (да и не только ролевых) обожают вставлять в таблицы красивые надписи-заголовки. Поэтому тут настало времени поговорить о шрифтах, о том, как они работают и, наконец, о том, как сделать шрифт не только красивым, но и читабельным.

Как работают шрифты в CSS (свойство FONT)
Названия разных шрифтов в CSS вставляются с помощью свойства font-family:

#селектор {font-family: Georgia, 'Times New Roman', Times, serif;}

Список шрифтов может включать одно или несколько названий, разделенных запятой.
Если в названии шрифта есть пробелы, то согласно правилам CSS, он записывается в одинарных кавычках (обратите внимание на написание шрифта Times New Roman в коде).
Как это работает.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Внимание! Когда вы пытаетесь уставить на форум какой-то неимоверно красивый шрифт, поставленный на ваш компьютер, это не значит, что у ваших пользователей он будет отображаться. Он может отображаться ТОЛЬКО у тех, кто скачают его и установят на компьютер.

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

Красивые заголовки с помощью Google Web Fonts
Не смотря на многочисленные недостатки картинок-заголовок, здравый смысл все равно будет повержен одним простым аргументом: "хочу что было красиво". Поэтому стоит предложить альтернативу.
Существует возможность импортировать шрифты с внешних ресурсов. Таким образом, грузиться они будут не с компьютера пользователя, а с какого-либо сайта. Один из таких ресурсов - Google Web Fonts

Выбираем язык шрифта:
http://uploads.ru/t/Q/p/h/QphHi.jpg

Выбираем шрифт и нажимаем кнопку Quick-use:
http://uploads.ru/t/1/G/l/1GlFz.jpg

Под предпросмотром шрифта надо еще раз отметить использование Кириллицы:
http://uploads.ru/t/N/n/U/NnUWL.jpg

Вставляем код себе на сайт/форум:
http://uploads.ru/t/H/Y/r/HYrKn.jpg

Ниже отображается CSS свойство и значение, которое нужно задать селекторам, к которым необходимо применить этот шрифт:
http://uploads.ru/t/z/r/P/zrPLl.jpg

На примере названия форума:

http://uploads.ru/t/m/k/Y/mkYfp.jpg

в HTML-вверх код Google Web Fonts

Код:
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

В CSS стиль заголовка:

Код:
#pun-title h1 {display: block;  font-family: 'Marck Script',cursive; height: auto; padding: 0 0 0 176px; position: absolute; top: 76px;}
#pun-title h1 span {color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE;}

Внимание! Недостатки Google Web Fonts:
Во-первых, на данный момент, не работает в Opera.
Во-вторых, хоть шрифт грузиться быстрее тонны картинок, но все равно грузится.
Ничего легче и приятней шрифтов, которые грузятся с компьютера пользователя, быть не может.

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

Код таблицы с заголовками
Так как в таблице дальше не используется ничего из того, о чем еще не говорилось выше, стоит сразу привести ее код в качестве примера использования Google Web Fonts

коды

HTML

Код:
<table id="my_table">
<tr valign="top">
<td rowspan="2" id="box-td">
<div id="fairy1"></div><div id="my_box"><div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div></div></td>
<td colspan="2" id="link-td">

<div id="link1"><a href="#">Ссылка1</a></div>
<div id="link2"><a href="#">Ссылка2</a></div>
<div id="link3"><a href="#">Ссылка3</a></div>

</td></tr>
<tr valign="top">
<td rowspan="2" id="text-td2"><span>Ссылки</span> <div class="text-div">

Вставляйте сюда свои ссылки<br/>Стиль сделан В рамках проекта <a href="http://forumdts.org/">ForumDesign TS</a><br/> <a href="http://forumdts.org/viewforum.php?id=97">Выбери свой стиль</a> <br/> <a href="http://forumdts.org/viewtopic.php?id=3073">Как создать дизайн?</a> <br/> <a href="http://forumdts.org/viewforum.php?id=5">Дизайн на заказ</a> <br/> Вставляйте сюда свои ссылки

</div></td>
<td rowspan="2" id="text-td3"><span>Баннеры</span><div class="text-div">

Вставляйте сюда свои баннеры<br/><a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://forumdts.org/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a><br/>Вставляйте сюда свои баннеры
<br/><br/><br/><br/><br/><br/><br/><br/>

</div><div id="fairy2"></div></td></tr><tr valign="top">
<td id="text-td1"><span>Заголовок</span><div class="text-div">

и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. 

</div></td></tr></table>

CSS

Код:
#my_table {background: transparent url(http://uploads.ru/i/i/y/f/iyfQ8.png) no-repeat bottom center; border: 0 none; height: 350px; width: 850px; margin: 0 -20px; padding: 0 30px;}
#box-td {height: 170px; width: 340px;}
#my_box {background: #000; width: 280px; height: 105px; -moz-border-radius: 10px;  -webkit-border-radius: 10px;  -khtml-border-radius: 10px;  border-radius: 10px; -webkit-box-shadow: 0px 0px 3px #8c61ca; -moz-box-shadow: 0px 0px 3px #8c61ca; box-shadow: 0px 0px 3px #8c61ca; height: 100px; margin-left: 45px; margin-top: 65px; width: 275px; padding:5px; overflow: auto;}
#fairy1 {background: transparent url(http://uploads.ru/i/4/K/o/4KoS9.png) no-repeat top center; height: 265px; margin-left: -55px; margin-top: -15px; position: absolute; width: 172px;}
#my_box-text {margin-left: 65px;}
#link-td {height: 85px;}
#link1, #link2, #link3 {-moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -khtml-border-radius: 10px 10px 0 0;  border-radius: 10px 10px 0 0; -webkit-box-shadow: 0px 0px 3px #8c61ca; -moz-box-shadow: 0px 0px 3px #8c61ca; box-shadow: 0px 0px 3px #8c61ca;
display: inline-block; height: 50px; margin: 34px 3px 3px; text-align: center; width: 135px; background: #000;}
#link1:hover, #link2:hover, #link3:hover {-webkit-box-shadow: 0px 0px 7px #8c61ca; -moz-box-shadow: 0px 0px 7px #8c61ca; box-shadow: 0px 0px 7px #8c61ca;}
#link1 a, #link2 a, #link3 a {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.3em; text-shadow: 1px 1px 2px #8c61ca; text-decoration:none; padding-top:10px;}
#text-td2 {width: 220px;}
#text-td3 {width: 210px;}
#text-td1 .text-div, #text-td2 .text-div {border-right: 1px solid #505050;}
#text-td2 .text-div, #text-td3 .text-div {height: 200px; overflow:auto;}
#text-td1 {padding-bottom: 20px;}
#text-td1 .text-div {height: 110px; overflow: auto;}
#fairy2 {background: transparent url(http://uploads.ru/i/M/i/m/MimpY.png) no-repeat top center; height: 159px; position: absolute; width: 193px; margin-left: 85px; margin-top: -154px;}
#pun-announcement h2 span {position:absolute; margin-left: 130px; margin-top: 50px; }
#pun-announcement h2 span, #text-td2 span, #text-td3 span {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.3em; text-shadow: 1px 1px 2px #8c61ca;}
#text-td1 span {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.5em; text-shadow: 1px 1px 2px #8c61ca; margin-left: 60px;}

Безопасные шрифты
На самом деле самые красивые шрифты - самые простые, которые есть у пользователя по умолчанию и грузятся быстро и просто. Использование всех наворотов связано зачастую с тем, что пользователи в глаза не видели всего разнообразия самых обычных и доступных видов шрифтов.
шрифты

Код:
<p style='font-family:Arial;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-style:italic;

Код:
<p style='font-family:Arial;font-style:italic;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-style:italic;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-style:italic;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-style:italic;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-style:italic;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-style:italic;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-style:italic;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-style:italic;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-style:italic;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-weight:bold;

Код:
<p style='font-family:Arial;font-weight:bold;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-weight:bold;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-weight:bold;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-weight:bold;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-weight:bold;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-weight:bold;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-weight:bold;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-style:italic; font-weight:bold;

Код:
<p style='font-family:Arial;font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-style:italic;font-weight:bold;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-style:italic;font-weight:bold;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-style:italic;font-weight:bold;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-style:italic;font-weight:bold;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-style:italic;font-weight:bold;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

Как видно, если поэкспериментировать со стандартными безопасными шрифтами, вполне может получиться оригинальное начертание.
Например, вот этот шрифт был выполнен стандартными средствами CSS:
http://s3.uploads.ru/Xt3RM.png

+1

7

Анимация в дизайне

Очень модная и красивая тенденция на форумах - делать анимацию в шапке, на фоне или каких-либо объектах. Иногда, это действительно не лишнее, если автор умеет соблюсти стиль и меру. Прежде всего, следует отметить пару правил обращения с анимацией.

   1. Анимации не должно быть много.
Часто анимируют сразу и шапку, и фон, и курсор, да еще и какую-то фигню пускают летать поверх всего сайта. На форумах часто встречается, что сразу куча анимашек теснится в одной шапке. Это излишне - пользователь не заметит всей красоты вашего мастерства, если вы набрасываете на него сразу кучу двигающихся объектов.

   2. Анимация просто обязана быть легкой.
Gif-анимация - самая коварная штука. Она испортит ко всем чертям загрузку вашего дизайна, по любой из сотни причин: анимашек много, или анимация имеет гигантский размер, или анимация сохранена в самом потрясающем качестве, или она состоит из тонны кадров. Именно поэтому в этой части статьи мы подробно будем переваривать формат GIF.

   3. Анимации не должна быть в ущерб работе сайта.
Проявляя креативность, всегда помните то, что писалось в пункте Как работает CSS - дизайн прежде всего должен служить для улучшения интерфейса сайта, а не усугубления чтения информации. Не ставьте анимашек в ущерб читабельности или взамен полезных блоков.

   4. Не путайте кино и анимацию.
Заранее прошу забыть о том, чтобы вставлять с помощью этого урока минимувы (вычислю по айпи и оторву руки ]=| ) - эту штуку НИКАК нельзя нормально привести к веб-формату. Если вам нравятся кадры из кино, лучше подумать над установкой видео-плеера, включенного по умолчанию.

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

Создание анимации
Для начала следует достаточно хорошо овладеть GIF-анимацией, вам не подойдет уроки типа "делаем баннер". Самое простое, что я могу посоветовать - это анимация с параметрами наложения.
Для этого нам потребуется найти какую-нибудь картинку-заготовку с замкнутой анимацией. Этим добром можно разжиться у нас: Заготовки и клипарт для анимации

Я выбрала вот такую анимашку: http://s2.uploads.ru/tyIFL.gif . Для начала Нужно ее разложить по кадрам. Для этого я использую приложение photoshop http://s2.uploads.ru/SBAqw.pngImage Ready
Просто перетаскиваю картинку на рабочую область программы и получаю все кадры анимации:
http://s3.uploads.ru/t/qSbdo.jpg

Можно прямо из этой программы перетащить анимацию в фотошоп Файл > Редактировать в photoshop (File > Edit with photoshop) или просто сохранить в формате psd Файл > Сохранить как (File > Save as, клавиши Shift+Ctrl+S), а потом уже открывать анимацию с кадрами в фотошопе.
Еще полезная информация для тех, кто не в курсе - В самом фотошопе окно анимации открывается через меню: Окно > Анимация (Window > Animation)

Откроем макет (а лучше - готовый элемент дизайна) и вырежем ту часть, в которую будет вставляться анимация. Для меня это был кусок шапки:
http://s2.uploads.ru/t/AxZgr.jpg
анимация по моей задумке должна как бы "сыпаться" сверху под названием форума.

Теперь рассмотрим тот факт, что анимашка не соответствует по цвету дизайну - нам нужна фиолетовая анимация, а не синяя. Для этого я открываю ее и колоризую самым ленивым методом через цветовой тон, клавиши Ctrl+U (см. выше Основы колоризации, пункт Полная цветокоррекция).
Переделывать пидется каждый слой, поэтому я после подбора колоризации в окошке нажимаю кнопочку Сохранить (Save), сохраняю цветовой баланс, а в последствии просто жму кнопку Загрузить (Load) и получаю свои настройки.

Теперь создадим новую папку на панеле своев анимации и упакуем туда все слои:

http://s2.uploads.ru/t/G4T2k.jpg

Для этого выделите все слои с первого по последний при помощи зажатой кнопки Shift
После этого перетаскиваем папку на нашу заготовку под анимацию:
http://s2.uploads.ru/t/S0Zhc.jpg

Далее меняем размер и расположение всей группы слоев через Редактирование > Свободное Трансформирование (Edit > Free transform, клавиши Ctrl+T)
http://s2.uploads.ru/t/1KimV.jpg

А теперь магия параметров налажения! Находим меню на панеле слоев и начинаем подбирать нужный эффект, чтоб анимация сливалась с нашей картинкой:
http://s3.uploads.ru/t/oxE3h.jpg

После этого создаем анимацию по кадрам, включая и отключая свои как было на изначальной анимашке и работа по созданию закончена:
http://s2.uploads.ru/t/N5SOF.jpg

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

Размер анимации
Чем больше картинка - тем больше ее вес. Когда речь идет о GIF-формате, лишние края становятся непосильной ношей.
Изначальную рабочую область картинки необходимо обрезать до размера анимированной части. Для этого можно кликнуть по иконке любого слоя анимации с нажатой кнопкой Ctrl:

http://s2.uploads.ru/t/tjzcJ.jpg

Появится выделение. Сделайте инверсию: Выделение > Инверсия (Select > Inverse, клавиши Shift+Ctrl+I) и удалите лишний задник картинки:

http://s3.uploads.ru/t/OvrST.jpg

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

http://s2.uploads.ru/t/2biak.jpg

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

я сократила анимацию с 88 кадров до 21

88 кадров, 740,93 КБ

21 кадр, 208,75 КБ

http://s3.uploads.ru/t/2cGT0.gif

http://s2.uploads.ru/t/wClKf.gif

Меняем цикл анимации
Если после (или до) перекадровки анимация не выглядит цикличной, можно избавиться от еще одной порции кадров. Например, сделаем плавное появление и исчезание 10 кадров анимашки:

21 кадр, 208,75 КБ

14 кадров, 124,5 КБ

http://s2.uploads.ru/t/wClKf.gif

http://s3.uploads.ru/t/cEh6l.gif

Делаем Gif-анимацию легче
Оставшийся секрет - это умение грамотно пожертвовать качеством во имя легкого веса картинки при сохранении.

Чем больше количество цветов, тем больше вес изображения
При облегчении изображений требуется жертвовать его качеством.
например, можно понизить количество цветов. некоторые изображения без проблем потерпят такие изменения.
высший пилотаж - стилизовать анимацию так, чтоб в ней и без того использовалась небольшая палитра оттенков.

http://s2.uploads.ru/t/leM1o.jpg

Добавьте шума и попрощайтесь с отменным качеством
Финальные помощники в подгонке качества картинки ползунки lossy и web sharp, чем больше значение поставите, тем хуже будет качество и меньше будет вес. Их тоже нужно докрутить до той черты, когда потеря качества еще не режет глаз.

http://s2.uploads.ru/t/veaDd.jpg

Встраиваем анимацию в дизайн

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

<div id="logoup">

    <div id="my_text">
       Тут будет ваш текст <br/>Тут будет ваш текст <br/>
    </div>

    <div id="animation"></div>

</div>

#animation {
    background: url("http://s3.uploads.ru/cEh6l.gif") no-repeat scroll center top transparent;
    height: 185px;
    margin-left: 292px;
    width: 393px;
}

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

Используем z-index для порядка отображения элементов страницы
Часто случается, что анимашки перекрывают другие элементы дизайна и блоки. Например, вам необходимо, чтоб она отображалась где-то на фоне, а анимашка торчит поверх шапки из-за того, что она встроена в html-верх. Проблема эта чисто майбб-шная, т.к. на нормальных форумных движках можно поправлять шаблон страницы и все свои декоративные изыски запихнуть в самый нижний элемент кода. Но даже проблему корявого кода страницы можно решить с помощью CSS.
Для примера, я убрала в таблице отступ блока с текстом в таблице:
http://s3.uploads.ru/t/wtGNR.jpg

Допустим, нам нужно, чтобы фея отображалась не поверх текстового блока, а под ним. В этом нам поможет свойство z-index

Описание:
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Значение z-index представляет собой число. Чем больше число - тем "выше" будет элемент.
Например:
http://s3.uploads.ru/lWcFh.jpg

<style>
   #layer1, #layer2 {
    position: relative; /* Относительное позиционирование */
   }
   #layer1 {
    font-size: 50px; /* Размер шрифта в пикселах */
    color: #000080; /* Синий цвет текста */
   }
   #layer2 {
    top: -55px; /* Сдвигаем текст вверх */
    left: 5px; /* Сдвигаем текст вправо */
    color: #ffa500; /* Оранжевый цвет текста */
    font-size:70px;  /* Размер шрифта в пикселах */
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
  </style>
  <div id="layer1">Слой 1</div>
  <div id="layer2">Слой 2</div>

Теперь рассмотрим код нашей таблички. Картинка с феей уже имеет абсолютное позиционирование, добавим в код z-index:

#fairy1 {
    background: url("http://uploads.ru/i/4/K/o/4KoS9.png") no-repeat scroll center top transparent;
    height: 265px;
    margin-left: -55px;
    margin-top: -15px;
    position: absolute;
    width: 172px;
    z-index: 10;
}

Блок с текстом не имеет позиционирования. Надо добавить свойство position и поставить ему z-index больше, чем у блока с картинкой:

#my_box {
    background: none repeat scroll 0 0 #000000;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 3px #8C61CA;
    height: 100px;
    margin-top: 65px;
    overflow: auto;
    padding: 5px;
    width: 275px;
    position: relative;
    z-index: 20;
}

Получаем наглядный результат:
http://s2.uploads.ru/t/vtzQp.jpg

Как убрать прокрутку страницы
(сотни поклонов sadhaka, которая идеально разжевала проблему и ее решение в этой теме - с ее слов и написана эта часть статьи)

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

http://uploads.ru/t/d/X/L/dXL0W.jpg

Автор стиля не стал превращать фон в огромную тяжелую гифку, а сделал отдельные картинки и вставлял их с помощью css-позиционарования.
Слева:

#left-ani {margin-left: -331px; margin-top: -47px; position: absolute;}
<div id="left-ani"><img src="http://uploads.ru/i/Q/3/Z/Q3ZIm.gif"></div>

Справа:

#right-ani {position: absolute; margin-left: 1037px; margin-top: -284px;}
<div id="right-ani"><img src="http://uploads.ru/i/S/4/H/S4HZE.gif"></div>

В теории, картина должна быть замечательной, но кто хочет быть профи, всегда проверит свою работу на отображение при низких разрешениях. И появится вот такая картина:
http://uploads.ru/t/X/H/Y/XHYWu.jpg

При чем эта проблема будет возникать только при наличии именно правой анимашки.

Почему и откуда берется проблема?
Все позиции считаются от верхнего левого угла. Для левой картинки указан отрицательный отступ слева и когда позиционируемое место выходит за пределы экрана, то картинка исчезает. Т.е. при уменьшении окна браузера, позиция margin-left: -331px находится в невидимой области страницы, потому что граница окна браузера слева - это исходная точки отчета позиционирования всех элементов.

http://s3.uploads.ru/t/UkyVz.jpg http://s2.uploads.ru/t/Q95wB.jpg

Но совсем по-другому будет справа, т.к. справа у нас нет "границы", справа у нас сколько угодно места, поэтому, если мы говорим в CSS-коде "отступи вот от этой точки 1000px", то браузер послушно это и делает, он не знает, что место справа у него закончилось.

Как решать проблему?
Можно сказать браузеру, что справа место кончилось, используя свойство overflow: hidden; для родительского контейнера анимашек (на примере майбб - это селектор #pun). Можно также попробовать поставить overflow: hidden; для body.

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

http://s2.uploads.ru/t/gFqHk.jpg

#my_text {
    color: #FFFFFF;
    height: 134px;
    margin-left: 420px;
    overflow: auto;
    position: absolute;
    top: 106px;
    width: 238px;
}

Этим же свойством можно не только добавлять скролл-бары, но и убирать.

Отредактировано Герда (07.12.2012 20:33:55)

0

8

{зарезервировано}

0

9

{зарезервировано}

0

10

{зарезервировано}

0

11

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

0

12

Лютый
ссылку на форум, пожалуйста

0

13

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

офф:
Герда написал(а):

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

О май гад, ужас. как выглядел у вас диз наш... (Фатария) О.О
Да, не думали над этим...

Отредактировано Sweetynasty (05.12.2012 22:34:24)

+1

14

07.12.12 Добавлен трюк "Анимация в дизайне"

Далее планируется написать о том, как делать дизайн легче - подробнее раскажем о формате изображений о том, как правильно нарезать макет для верстки дизайна, о css-спрайтах и т.д.

Но если кому-то кажется, что с трюками еще не закончили - приводите примеры, дополним. :)

0

15

Та-да-ДАМ!
собственно, добавлена вкусная весчь!

Верстка дизайна на mуbb форуме при помощи FireBug

Для наглядности предлагаю вам ознакомиться с данным видео.
Вы увидите:
  - как происходит верстка дизайна с нуля
  - как вставлять фоновые элементы
  - как добавлять в стиль новые селекторы страницы
  - как использовать функционал FireBug
  - как позиционировать элементы
  - (забегая вперед) как делать свои блоки для элементов дизайна

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

И, если у кого-то еще есть вопросы о том, как использовать FireBug - глядеть обязательно ;)

Отредактировано Герда (08.12.2012 19:00:44)

+2


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Статья: Как создать дизайн?


Рейтинг форумов | Создать форум бесплатно