Ладно. Покажи мне свои работы

Не, рекламу, да всё, кроме авиков

Блин, у тебя виден стиль? Пытаюсь поменять, а он убирает его Оо

.hina
Любые картинки, кроме авиков

Не, форум точно тупит... Ввожу, а он убирает ==

.hina
Значит, только авы делаешь?

.hina
Валяй анимации

.hina
Ну давай начнем по порядочку - с колоров, текстур, совмещения, а потом будем продвигаться. Иконки и фоны будем изучать попутно с CSS, так как нам это очень пригодится, но а пока посмотрю, на что ты способна
Шпаргалка: Все необходимое для работы можешь взять здесь.
Текстуры - http://browse.deviantart.com/?qh=&s … ;q=texture Здесь также можно найти шрифты и колоры.
Колоризации PSD (надеюсь, ты знаешь, что это такое и как с ними обращаться),шрифты, кисти я беру отсюда - http://tritroichki.narod.ru/ и http://forum.allavatars.ru/?topic=9076.0 отсюда.
На всякий случай если не знаешь что делать с колорами PSD. Скачиваешь приглянувшуюся колоризацию, открываешь ее в ФШ и вместо исходного изображения подставляешь свое в слои. Если нужно, подгоняешь размер исходника в колоризации.
Так же не забывай, что перед началом работы над исходником копируем его посредством нажатия клавиш Ctrl+J, на копии нашего слоя идем в Параметры наложения> выбираем Мягкий свет, корректируем его непрозрачность если надо.

Задание:
Сделать 3 разных аватара.
1. Текстура
2. Колоризация
3. На свой вкус + надпись.
Даю тебе срок - сегодняшний остаток дня + завтрашний день.
http://st.kinopoisk.ru/im/wallpaper/4/1 … w--800.jpg
Удачи

.hina
Брр... Отвратительный, прощу прощения, колор на втором авике.
И почему ты его только выбрала? Даже слов нету, как описать этот ужас =)
На последнем не нравится, как обрезала Пенелопе ноги. Никогда не обрезай части человеческих тел. =)
Шрифты и параметры наложения в топку =) Загрузи себе побольше  шрифтов, если в PS стоят только "родные".
Попробуй в следующий раз при работе с текстом наложить градиент + сделать обводку размером 1 пкс и вообще поработать с параметрами наложения: тень, внутренняя тень и т.п, я думаю ты знаешь об этом =)
И да, далее при нашей с тобой работе сохраняй работы в PSD, чтобы можно было подкорректировать недочеты.
Переделай второй и первый авики. Примени такую колоризацию, чтобы цвета были естественными и нежными. Убери текст. Он хорош только для последнего.

Теперь будем учиться корректировать плохое качество.
Я взяла исходник ужасного качества:

1. Такое ощущение, что на этом изображении кто-то явно перестарался с резкостью, правда? Поэтому я зашла в Фильтр>Размытие>Размытие по Гауссу и выбрала радиус 0,7 пик. Но это делаем только в том случае, если исходники именно такого качества. На некоторых, наоборот, не хватает резкости.
2. Одним из главных условий с изображением является цветокоррекция, попозже мы разберем ее подробней.
либо идем в Изображение>Коррекция>Выборочная коррекция. Сначала я откорректировала Черные цвета, двигая все ползунки методом тыка и смотря, что лучше подходит к нашей картинке. Затем я откорректировала белые, зеленые и желтые цвета, так как они присутствуют на картинке. Главное не переборщить и не высветилить сильно картинку, так что нейтральные цвета лучше не трогать, либо работать с ними очень осторожно. Ну а вообще какой бы ни была картинка,  делаю цветокоррекцию по интуиции, обычно прохожусь по всем цветам.
3. Работа с кривыми. Позже мы тоже рассмотрим ее. Идем в Изображение>Коррекция>Кривые, и опять-таки подбираем все под картинку. Лучше создать несколько точек на этой диагональной линии (т.е подвигать ее в нескольких разных местах). В общем, начав работу с кривыми, ты сразу разберешься и поймешь что к чему, но опять-таки не перебарщивать =)
4. Изображение>Коррекция>Уровни.
Опять-таки подвигать ползунки и поработать с цветом. Ничего сложного нет =)
При необходимости также используем Яркость\Контрастность, но на этом изображени я не использовала ее.

.hina
Обычно. Для начала нужно усовершенствовать твои работы, иначе получится не диз, а... Ну ты поняла.

.hina
Хм... У многих с этим проблемы.
Итак, для аватара, а также любой другой картинки, на которой вы хотите разместить текст, важны три правила:
     1. Сочетаемость
     2. Читабельность
     3. Уместность
Разберем их чуть подробнее.
Первое: желательно, чтобы надписи, помещаемые вами на картинку, сочетались с ней по стилю. Это не значит, что они будут сливаться с изображением, текст может быть ярким, привлекающим внимание, но в то же время он должен как бы дополнять общую концепцию, а не вываливаться из неё. Важно так же и расположение текста, хорошо, если ваша композиция будет связной.
Второе: если это не текстурка и не элемент общего плана, текстом дизайнер передает свое видение смысла изображения. А мысли лучше всего передавать четко. Неподходящий, слишком мелкий, яркий или темный шрифт может сделать надпись нечитабельной. Лучше всего этого избегать.  Значение тут имеет и цвет. С осторожностью используй яркие и кислотные оттенки, вроде красного, салатового, голубого. Или будет так:
- разве это нормально?
Третье: как было сказано выше, надпись, выбранная тобой, передает смысл изображенного (разумеется, это не относится к именным подписям и т.п.). То есть, она должна сочетаться с картинкой, раскрывать её для стороннего зрителя. Эти три простых пункта не являются железными правилами, но, как показывает опыт, соблюдение их поднимает творчество на совершенно другой уровень.

Думаю, хоть что-то понятно)

.hina
Давай когда приедешь я тебе все свои уроки по дизайну выложу? Ибо у меня их ну оочень много))

.hina
Не-, недельки через три)) Творческий кризис хд

.hina, хорошо, но текст надо было бы сделать побольше)

1. Для начала создаём свой тестовой форум.
2. Заходим в http://mybb.bbcorp.ru/generator/ и делаем стиль. Я обычно форум делаю одним цветом.
У меня основной цвет будет серый.(#ababab)

Основной цвет  #ababab
Внешние границы  #ababab
Цвет фона  #ababab
Шапка форума #ababab
Текст в шапке ЦВЕТ ТЕКСТА
Меню навигации #ababab
Шапка таблицы #ababab
Цвет фона таблицы #ababab
Внутренние рамки #ababab
Текст форума ЦВЕТ ТЕКСТА
Есть новые сообщения #ababab
Нет новых сообщений #ababab
Заголовки форума #ababab
Цвет текста заголовков ЦВЕТ ТЕКСТА

Нажимаем Сохранить стиль.
Далее копируем код и вставляем на форум в Администрование - Стиль - Цвета style_cs.css
Вот мой код стиля:

/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
	background-color: #ababab;
}

/* CS1.1 */
.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-color: #ababab;
  color: #000000;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #ababab;
  color: #000000;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #ababab;
  color: #000000;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #ababab;
  color: #000000;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #ababab;
  color: #000000
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #ababab;
  color: #000000
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #9B9B9B;
  color: #000000
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #ababab;
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #ababab;
  color: #000000
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #ababab #ababab #ababab #ababab
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #9B9B9B
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #ababab;
  }

/* CS2.4 */
.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: #ababab;
  }

/* CS2.5 */
.punbb th {
  border-color: #ababab
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #8B8B8B #CBCBCB #CBCBCB #8B8B8B;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #8B8B8B
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #CBCBCB
  }

.punbb .divider {
  border-color: #8B8B8B #CBCBCB #CBCBCB #CBCBCB
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #ababab;
  }

.punbb .post-sig dt {
  border-top-color: #ababab !important;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #FFFFFF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #000000
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #000000;
    border-bottom: 1px dashed #000000;
  text-decoration: none;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #FFFFFF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000000;
  font-weight: bold;
font-style: italic;
  border-bottom: 1px dashed #FFFFFF;
  text-decoration: none;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #ababab #8B8B8B #7B7B7B #8B8B8B}
tr.iredirect div.icon {border-color: #ababab #ababab #ababab #ababab}
div.inew {border-color: #ababab #8B8B8B #7B7B7B #8B8B8B}

#pun-main div.catleft, #pun-main div.catright {display: none}

Хотите ли Вы использовать собственный стиль оформления?
Да
3. Теперь сдеалем форум узким.
В первом окошке (Структура style.css) находим это:

/* A5.1 */

Заменяем весь пункт на это:

/* A5.1 */
#pun {
  margin: 0px auto 30px auto;
  width : 630;
  padding: 0px 15px 0px 15px;
}

630 - меняем на свой значение.
4. Теперь уберем таблицы форумов, что бы вставить фон.
с

/* CS1.1 */

до

/* CS2 Border colours

вставляем это:

background-color: transparent;

Вот так:

http://s011.radikal.ru/i318/1011/a7/b45df026635ft.jpg

5. Чтобы не было рамок на форуме, ставим
с

/* CS2 Border colours

до

/* CS3 Links

этот код:
Выделить код
; border-style:none !important;

Вот так:
http://i022.radikal.ru/1011/14/8b5ebcfc2664t.jpg

замечаем, чтобы  такого не было:

border-color: #ababab;; border-style:none !important;

нужна одна ;
6. Теперь будем делать фон форума.
Идём в фотошоп.
Берем шаблон (тык)
И делаем с фоном все что захотим)
Я сделала самый обычный фон:
http://i045.radikal.ru/1011/cf/dae02d90f2bet.jpg
И теперь во втором окне (Цвета css) в самом верху вставляем этот код:

/* CS1 Background and text colours
-------------------------------------------------------------*/
html {background: url(ссылка)
#ffffff;
background-position: center;
background-attachment : fixed;
}

/* CS1 Background and text colours
-------------------------------------------------------------*/ - в место этого
ссылка - код фона.
7. Теперь делаем шапку.
Вставляем в HTML-верх.

<style type="text/css">
#pun-title table {background-image : url("код шапки");
background-repeat : no-repeat; height : 400px;
}
</style>
<style type="text/css">
#pun-title .title-logo {display: none;}
</style>

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

<style>
.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative;
  left: 0px;
  right: 350px;
  top: 200px;
}
</style>

8. Делаем иконки: Нет новых сообщений, есть новые сообщения, важная тема, закрытая тема.
Во втором окошке в самом низу находим это:

и заменяем на этот код:

Если хотите, чтобы иконки были справа от описания, то ставим в html-верх этот код:
<style type="text/css">
#pun-main .category Div.icon{
float: right;
}
</style>

пробуй. Так я училась))