FREAKSHOW

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

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


Вы здесь » FREAKSHOW » Обучение дизайну » узнаем что такое дизайн с cotton'


узнаем что такое дизайн с cotton'

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

1

Привет cotton'. К сожалению ты не написала как тебя зовут. Меня можешь звать Ксюшей. Я надеюсь, что к нашему обучению ты отнесешься серьезно. Если занята в реале и не можешь выполнить задание, пиши сюда. Я все пойму. Для начала создай тестовик.

0

2

Привет!)
Меня зовут Лиза)
я у тебя вроде уже училась, хотя точно не помню, но вроде училась, но только не на дизайн))
Да, я могу пропадать из-за учебы, но буду стараться по максимуму тебя об этом оповещать)
http://probnikcotton.rusff.ru/ вот)

Отредактировано cotton' (2011-10-29 22:53:31)

0

3

ах, да, вот то, что я давно пыталась сделать, но я там совсем запуталась в таблицах.. %-)
http://adolescenceaerobatics.rolka.su/

0

4

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

0

5

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

0

6

ну хорошо.
1) ну вот что-то вроде этого наверное, но тут мне просто нравится почему-то когда шапка продолжается и заходя на фон http://yourwonderland.4bb.ru/ но правда на столько большие шапки не очень как-то смотрятся.., точнее сказать немного не удобно.. вот такой может лучше подойдет под описание http://mondedelart.artbb.ru/
2) так, далее вот мне еще этот дизайн тоже нравится как шапкой так и сам форум в спокойных тонах и не режет глаз как бывает на некоторых форумах, что невозможно сидеть из-за яркости. темные форумы тоже не особо люблю, они какие-то такие мрачные..хотя бывают не смотря на это довольно таки красивые и такие могут и понравится)
3) таааак..что мне еще нравится?! ах да, еще хорошая компоновка бывает когда фон и сам форум каких-то более реальные (например те же бумага и дерево) смотрится хорошо как по мне.
4) ну вот этот форум для меня всегда представлял какую-то загадку)
http://dropofpoison.ru/
он какой-то такой многофункциональный все время до ужаса. там все время очень много разных скриптов для него устанавливают.. даже не знаю нравится он мне или нет. от части)
в нем, то боковые таблицы хорошо устроены, то несколько дизайнов и все их ты можешь поменять когда захочешь..в принципе выглядит интересно. но иногда хочется чего-то не на столько продвинутого))
ну вот как-то так..хд

0

7

Дизайны очень хорошие ))) Мне самой некоторые нравятся.

Так, начнем наше обучение.

Замена фона форума.

Заходим в свой стиль и будем работать со вторым окошком стиля. Первый отвечает за структуру форума, текст и т.д. А второе за цвета и прочие элементы. Вот с ним пока и будем работать. Не зная лишний раз лучше не чего не менять в первом окне, иначе весь форум скособочится, а нам этого не надо.

Мы видим такой код:

body {background-color: #e4cdb9;
background-image : url("ссылка на изображение");
background-repeat: repeat;
background-position : top center;}

-background-color: #номер цвета
вместо номера цвета вставляем цвет, например, #e4cdb9
Это цвет фона который мы видим при переадрисации.
-background-image : url("ссылка");
заливаем через любой фотохостинг наш фон и вставляем ссылку
- background-repeat: repeat;
будет повторяться фон или нет
Если ставить "repeat", то он просто будет множиться как по вертикали, так и по горизонтали, и фоном будет залит весь форум. Если поставим "repeat-y", то фон будет множиться только по вертикали, если "repeat-x", то по горизонтали. Если не хочешь, чтобы он повторялся, то ставим: no-repeat.
-background-position : top center;}
откуда будет множиться фон.
center - по центру
right - с правого края
left - с левого края

Это еще не все. Вот тебе задание. Для того что бы поменять фон нужно сделать в фотошопе графические элементы для дизайна. В нашем случае это фон-шапка (если делаем слитный с фоном) и сам фон форума. Я обычно делаю шапку 1450х500 и фон 1450х200(или 300) пикселей. Если не поняла, то могу позже сделать шаблоны.

0

8

http://probnikcotton.rusff.ru/
эээээээмммм..ну ладно..что-то таки получилось.. уже радует..хд
но все же пару вопросов:
1) как можно расширить чуть-чуть фон по середине, а то на нем все не помещается?
2) как сделать фон самого форума (по середине который), чтоб он был полупрозрачный и можно как-то сделать чтоб он пропадал после вот этих локаций форум и т.д.? А то он получается еще и на фоне шапки стоит(
вот то, что получилось в фотошопе..
http://pix.academ.org/img/2011/11/01/e6 … ceb462.png

Отредактировано cotton' (2011-11-01 22:05:40)

0

9

cotton' написал(а):

1) как можно расширить чуть-чуть фон по середине, а то на нем все не помещается?

К этому мы перейдем чуть позже. Какого размер делала желтую середину форума? Она должна быть в длинну 800 пикселей, потому что ширину этой части форума будем делать 800px.

Для фона тела форума (вставь это)

Код:
body {background-color: #2ab2ba;
background-image : url("ссылка на фон");
background-repeat: repeat;
background-position : top center;}

#pun { background-image : url("ссылка");
background-color : #;
background-position : center;}

Для шапки

Код:
#pun_wrap {background-image: url("ссылка"); background-repeat: no-repeat; background-position: center top; }

Теперь полезем в первое окно стиля все это настраивать

/* A5 Basic page layout and borders - отвечает за размер форума

Видим /* A5.1 */ здесь будем менять ширину форума, это то о чем ты меня спрашивала

меняем на это:

Код:
#pun {
  margin: 0px;
  position: relative;
  } 
  width: 800px;
  margin: auto;
  }

margin - линия отступа
width - ширина элемента

Больше в этом пункте не чего не трогаем.

Дальше отредактируем размер шапки.

/* D1 Logo and description - отвечает за наше лого (или шапку)

Работать будем с /* D1.4 */

Код:
#pun-title h1 span  {
   display: none;
  }

#pun-title TABLE {
  border: none;
  height: 500px;
  width: 800px;
  float: none;
    background-position : top center;  
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

height: 500px;- длинна
width: 800px - ширина

0

10

ультраморин написал(а):

К этому мы перейдем чуть позже. Какого размер делала желтую середину форума?

хз..
800 пкс вообще, но там даже когда я меняла, то ширина не менялась..
на счет первого я в фон еще добавила

Код:
background-attachment: fixed;

потому что он все время прокручивается, а в конце получается место пустое..
а код на шапку у меня этот не распознается..у меня сейчас стоит

Код:
#pun-title table {
background-image : url(http://pix.academ.org/img/2011/11/01/c81d4d03a5446edb1451d6aaa79d8235.png); 
background-repeat : no-repeat;
background-position:  left;
border: none;  
}

эмммм...ну вроде все правильно сделала, но он теперь слева почему-то и серединка на весь экран..(

0

11

ну и вот собственно второй, о котором я говорила..хд
http://pix.academ.org/img/2011/11/02/8f41874d0358999ab146fababd09d5de.png

http://pix.academ.org/img/2011/11/02/8a816f7be253e85370615f18e920e008.png
ну шапка конечно все же не совсем та..не смогла подобрать, что туда можно поставить еще..хдд

Отредактировано cotton' (2011-11-02 02:28:24)

0

12

Проверю вечером. И посмотрю что там у тебя с кодами. Вообще если все сделать правильно, то должно работать.

0

13

В шапке меня смущает стандартный шрифт фотошопа. Он все портит, а вот расположение девушки и цвет очень даже нравится.

Попробуй вместо всего первого пункта вставить это.
body {background-color: #2ab2ba; - цвет фона переадресации
background-image : url("ссылка");
background-repeat: repeat;
background-position : top center;}
#pun { background-image : url("ссылка");
background-color : #;
background-position : center;}
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span,  .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {background-color: transparent;
color: #085056;}
#pun-stats h2,.punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, #pun-stats .statscon, li#onlinelist, li#onlinelist div {
background-color: transparent;
color: #d5ebf1;
font-weight: bold;
font-style: normal;}
.punbb .quote-box, .punbb .code-box {
background-color: transparent;
color: #d5ebf1;}
#pun-navlinks .container, #pun-ulinks .container {
background-color: transparent;
color: #444f77;
text-align: center;}
.offline li.pa-online strong {
color: #444f77;
font-weight: normal}
.punbb textarea, .punbb select, .punbb input {
background-color: transparent;
color: #444f77;}
#pun_wrap {background-image: url("ссылка"); background-repeat: no-repeat; background-position: center top; }

0

14

эммммм...что-то ничего не получается...либо я что-то совсем не понимаю либо действительно не получается..

0

15

/* CS1 Background and text colours нужно было убрать то, что у тебя было и поставить то что я дала, только со своими значениями. А так у тебя получились лишние коды и от этого дизайн стал выглядеть так.

0

16

ну все равно ничего не поменялось..я уже и все удаляла и вставляла и по отдельности все вот так заменяла..бестолку( http://fc09.deviantart.net/fs71/f/2010/049/c/0/T_T_by_KatataEtc.gif

0

17

Я завтра посмотрю еще раз что там у тебя с кодами. Сейчас уже спать собираюсь.

0

18

С пункта /* CS1.1 */ по /* CS1.8 */ убирай все и вставляй то, что я писала выше. Ссылки и цвета свои. Должно все получится.

0

19

ну теперь только еще фон вообще не читается..((

0

20

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

0

21

ультраморин написал(а):

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

тю, так какой дизайн мы устанавливаем? второй что ли?! оО
тогда ладно, сейчас поставлю его..хд

0

22

cotton' написал(а):

тю, так какой дизайн мы устанавливаем? второй что ли?! оО
тогда ладно, сейчас поставлю его..хд

Я имела в виду размеры. А ставить можешь тот, что больше нравится.

0

23

ультраморин написал(а):

Я имела в виду размеры. А ставить можешь тот, что больше нравится.

я выбрала второй..))
но все равно у меня что-то либо баннер не видно либо фон((

Отредактировано cotton' (2011-11-04 23:33:15)

0

24

Я поняла почему у тебя текст съезжает за пределы форума. Вот смотри. Я тебе сейчас поставила вот это, а должно быть 800 пикселей. Значит графика сделана не по размеру, потому что коды нормальные. Так что лучше не торопясь сделай по шаблонам.

/* A5.1 */
#pun {
  margin: 0px;
  position: relative;
  width: 780px;
  margin: auto;
  }

Шаблоны для графики дизайна

http://uploads.ru/i/I/q/P/IqPkZ.png

http://uploads.ru/i/x/u/d/xud2N.png

0

25

Иконки пока не ставь.

0

26

ух ты! круто))
спасибо) :love:
что дальше делать?

0

27

CS2 Border colours

управляет цветовыми сочетаниями границ форума.
а) Первый блок раздела:

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

1 - цвет верхних границ
2 - цвет правых боковых границ
3 - цвет нижних границ
4 - цвет левых боковых границ

б)  Следующий блок:

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #цвет
  }

Управляет цветом черты под нижней границей форума

в) Следующий блок:

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

Он управляет рамкой внизу и справа от полоски с названиями категорий

г) Далее идет блок

/* 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: #цвет;
  }

управляет внутренними рамками форумных таблиц

д) следующий блок

/* CS2.5 */
.punbb th {
  border-color: #цвет
  }

Это полоски разделяющие : названия секций!

Это для того что бы знать о этой части дизайна, но границы мы будем убирать совсем. Они нам совершенно не к чему.

Для этого вместо цвета и его номера вставляем это transparent;
Везде где написано #цвет

0

28

эмммм..так оно там и так уже стоит..хд

0

29

Почему у тебя шапка так обрезалась, было же все нормально?

0

30

где она обрезалась? оО у меня все нормально, а когда заходишь в администрирование то да, это так и было(

0


Вы здесь » FREAKSHOW » Обучение дизайну » узнаем что такое дизайн с cotton'