FREAKSHOW

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

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


Вы здесь » FREAKSHOW » Обучение дизайну » иллюзорный мир


иллюзорный мир

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

1

Привет Юля .  Для начала предлагаю привести несколько примеров дизайнов которые тебе нравятся, с описанием того что именно в них нравится. И создай пробник на котором будем работать.

0

2

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

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

http://thesunalsorises.f-rpg.ru/ - здесь мне нравится некое спокойствие цветов. шапка, хорошая, но не нравится на шапке то,что должно быть в объявлении.
http://anotherhogwartsstory.mybb.ru/ - здесь нравится,все)
http://queenbees.rolka.su/ - здесь нравится фиолетовые штуковинки,на названиях "форум""участники"и т.д
http://vampirepassion.rusff.ru/ - здесь нравится картинки в названии категорий.
http://touchofdestiny.rusff.ru/ - здесь нравится боковая таблица.

http://limonka.rusff.ru/ - пробник

Отредактировано limonka (2011-11-19 17:01:46)

0

3

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

Поставь мне админство на форуме.

Дизайны будем прописывать в основном через CSS.

Общие понятия о css
Расшифровка css-кодов и схема их написания.

Что представляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Селектор (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
Параметр - это свойство элемента. мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
Аргумент - это значение свойства. мы указываем, какие именно изменения произойдут с выбранным свойством. (например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.)
Стандартный css код выглядит следующим образом:

#селектор {параметр: аргумент;}

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

#селектор {параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
....
}

Вот пример того, как выглядит код для меню навигации

#pun-navlinks {backgroud-color: #FF0000;}

#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}

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

#pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}

Параметры и значения CSS

О том, как производить изменения в выбранных селекторах.
Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Веб-названия для различных цветов можно посмотреть тут: таблица хтмл цветов
Например, вот так будет выглядит код для задания цвета:

#селектор {параметр: #FF0000;}

Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;

ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ!!!
Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.
Например, так мы задаем ширину и высоту элемента

#селектор {height: 200px; width: 70%;}

Параметры CSS

ФОН

background-color 
Цвет фона элемента. Значением может быть веб-название цвета.
background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки
background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.
background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)
Пример:

#селектор {
background-color: #FF0000;
background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top left;
}

расшифровать это можно так:

#элемент форума {
цвет фона: #красный; //(если картинка меньше, чем элемент форума, цвет будет такой)
фоновая картинка: ссылка на картинку;
прокрутка фоновой картинки: не прокручивается, фон зафиксировали;
Повторение фона: Повторить по вертикали;
позиция фона: начинается сверху слева;
}

0

4

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

style_cs.css
управляет цветовыми сочетаниями и стилями шрифтов

1. CS1 Background and text colours
управляет цветовыми сочитаниями таблиц форума и текстов
а) Первое, что мы видим там, это код:

body {
background-color: #Цвет;
}

Мы можем вставить свой цвет, но можем вставить какую-либо картинку:

body {
background-image: url(http://Адрес картинки);
}

б) Потому уже идут блоки:

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

это первый блок.

Он управляет основны цветом форума: фоновый цвет ячеек таблиц форума с количеством сообщений и тем, приветствие, низ форума, статистика форума, меня форума (где "профиль", "поиск" и т.д.)

background-color: #

этот тег устанавливает цвет фона этих элементов форума. но туда можно вставить фоовое изображение, а не цвет:

background-image: url(http://Адрес картинки);

Вот такой тег устанавливает цвет текста:

color: #

ВАЖНО! Цветом, который вы пропишите в этом теге, будет обладать только тест, находящийся в этих блоках.
ТЕКСТ можно менять по стилистике!

Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

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

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #цвет;
  color: #цвет;
  }

меняет цвета таблиц форума и текста форума.
цвет как и всегда можно заменить на картинку:

background-image: url(http://Адрес картинки);

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

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
  color: #цвет;
  font-weight: normal;
font-style: normal;
  }

этот блог управляет категориями форума:

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

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #цвет;
  color: #цвет;
  }

Корректирует шапку

1 - Текст
color: #цвет; - устанавливаете цвет шрифта.
дописываем по необходимости, если надо:
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

2 - ФОН
background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение (например, шапку форума.)

е) далее следует такой блок:

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

Он управляет всяческими замечаниями и приписками форума, которые есть на движке mybb по умолчанию.

ж) далее блок:

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

Он упраыляет шапкой форумных таблиц и теством в этой шапкой.

з) Блок:

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

Управляет "задником" (цвет фона цитаты, кода...) и параметрами его текста:

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

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }
.offline li.pa-online strong {
  font-weight: normal
  }
.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет
}
для удобства я разобью его на 3 части:
и-1)

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }

Управляет меню навигации

.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет

регулирует цвет фона и шрифта в форме ответа (вместе с кнопками "отправить" и "пред. просмотр") и других формах для заполнения.

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

0

5

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

Поставь мне админство на форуме.

поставила. *дальше читает*

0

6

limonka написал(а):

поставила. *дальше читает*

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

0

7

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

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

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

0

8

limonka написал(а):

там где блок управления шапкой... зачем там нужен текст?

Да, я и не обращала внимание. Но это расшифровка стандартного кода, так что я даже и не знаю зачем.

0

9

ШРИФТ И ТЕКСТ

color
Цвет шрифта в элементе

font-size
Размер шрифта.

Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы

CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.

font-style
Начертание шрифта.

Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсив
font-weight
Толщина начертания
Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font-family
Семейство шрифта

Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

font
Все вышеперечисленные параметры шрифта вместе

Пример^

#селектор {font: #FF0000 small bold;

Красный маленький жирный шрифт.

Пример:

#селектор {font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
font-size: small;
color: #FF0000;
}

Шрифт Georgia (если нет такого на компе пользователя, отобразится Times New Roman, если не будет таймс нью роман, отобразится Times, если нет всех вышеупомянутых, отобразится serif).

text-align
Выравнимание текста внутри элемента.

Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру

Пример:

#селектор {text-align: center;
}

ext-decoration
Украшение текста

Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Пример:

#селектор {text-decoration: underline;
}

0

10

Границы (рамки)
border

Все параметры рамки, например, толщина, цвет и т.д.

border-color
Цвет рамки

border-width
Толщина рамки

border-style
Стиль оформления рамки всех сторон рамки

Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона

border-top
Все параметры верхней рамки

border-bottom
Все параметры нижней рамки

border-left
Все параметры левой рамки

border-right
Все параметры правой рамки

Пример:

#селектор {border: #FF0000 dashed 2px;}

Все границы элемента красные, пунктиром и шириной в 2 пикселя

Пример:

#селектор {border-color: #FF0000;
border-width: 2px;
border-style: none dashed none double;
}

Все границы элемента красного цвета, шириной в 2 пикселя, левая граница пунктиром, а нижняя двойной линией

Пример:

#селектор {border-top: #FF0000 dashed 0px;
border-bottom: #FF0000 dashed 0px;
border-left: #FF0000 dashed 2px;
border-right: #FF0000 dashed 2px;
}

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

0

11

ССЫЛКИ

Если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву "a" (латинскую!!!).

Пример:

#селектор a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении.

a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой

Пример:

<style type="text/css">
#селектор a:link, #селектор a:visited {color: green;}
#селектор a:hover {color: red;}
</style>

Этот код сделает ссылки в выбранном месте до и после посещения зелеными, а при наведении - красными.
ВАЖНО! Забегая вперед, следует отметить, что если вы не хотите назначать разное оформление ссылок для каждого из возможных селекторов форума, то следует пользоваться универсальным кодом:
цвет все ссылок в обычном состоянии:

.punbb a:link, .punbb a:visited {color: ...;}

цвет всех ссылок при наведении:

.punbb a:hover {color: ...;}

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

0

12

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

Пример:
<style type="text/css">
#селектор a:link, #селектор a:visited {color: green;}
#селектор a:hover {color: red;}
</style>

это меняет ссылки на ВСЕМ форуме, или в выбраном элементе?

0

13

Это пример как может выглядеть код. Нет, каждый элемент прописан отдельно.

0

14

ультраморин
тогда жду завтра))))) буду переваривать,Полученную информацию)))

0

15

Хорошо. Завтра дам еще немного информации и приступим к освоению дизов )))

0

16

Жду дополняшку. http://prerogative.forum24.ru/gif/smk/sm25.gif

0

17

Вот что. Сделай шапку (размер 1450х500) и фон (1450х300). Середина форума 800 пикселей. После того как сделаешь будем ставить на пробник.

0

18

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

Середина форума 800 пикселей.

это обязательно надо учесть?)))

0

19

Да, потому что это ширина тела форума.

0

20

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

Да, потому что это ширина тела форума.

но это же учитывается в самом коде,Правильно?

0

21

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

0

22

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

Шапка

http://uploads.ru/i/a/B/0/aB0IQ.png

Фон

http://uploads.ru/i/5/1/F/51FbI.png

А вот шаблоны которые я тебе давала выше.

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

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

В шапку мы прорисовываем задний фон, кусочек середины форума и картинку лого. А фон делаем задний фон и середину форума. Переделай.

0

23

Шапку я сделала. Сейчас фон доделаю.

0

24

Хорошо. Как сделаешь загружай сюда.

0

25

фон. не нашла чего получше.
http://savepic.net/2174461.png
шапка. Балдею от фильма))))
http://savepic.net/2184698.png

0

26

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

0

27

эм.... давай по порядку?!
1.Что не так в шапке?

0

28

Хорошо.

По поводу шапки. Поскольку не у всех людей большое разрешение монитора, то такая большая шапка будет резаться по краям, а это не есть хорошо. Широкой мы делаем по тому что бы у всех отображалась нормально. Но основную картинку шапки лучше делать по ширине тела форума (т.е. 800 пикселей). А ты немного с халтурила. Видимо просто вырезала из обойки или увеличила ее. Подойди к созданию графики для дизайна более творчески. Если у тебя плохо с текстурами, то могу поделится ими. Про фон тоже самое. Нет середины форума, а на таком фоне текст не будет смотреться. А делать его ярким и бросающимся в глаза не стоит.  Надеюсь, не обидела?

0

29

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

Надеюсь, не обидела?

нет конечно. Ты, чтооо?)))

Я просто увеличила ее(картинку). Но как ее сделать на 800 пикселей? просто не увеличивать, а оставлять белые края? И если в самом коде прописывается ширина форума, зачем тогда в шапке оставлять место на 800 пикселей?

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

Если у тебя плохо с текстурами, то могу поделится ими.

у меня плохо с текстурами для фона)

0

30

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

limonka написал(а):

И если в самом коде прописывается ширина форума, зачем тогда в шапке оставлять место на 800 пикселей?

Ширина прописывается, но от этого шапка и сам форум не увеличиваются. Просто если увеличить ширину форума, то все что сейчас есть: (окошко где пишем сообщение, названия категорий и т.д) поедут в сторону и просто напросто все останется за приделами форума. Вот смотри я на своем тестовике изменила ширину форума вместо 800px на 1000px. Видишь что произошло с графикой? А так не должно быть. Если мы делаем более широкий дизайн, то размеры графики должны соответствовать.

http://uploads.ru/t/U/C/E/UCEfL.png

Текстуры сейчас загружу

0


Вы здесь » FREAKSHOW » Обучение дизайну » иллюзорный мир