FREAKSHOW

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

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


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


две недели до декабря

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

1

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

0

2

ультраморин
Доброго вечера, спасибо, что откликнулась на мою просьбу)))

Вот пробник: http://undertheworld.rolka.su/

http://narniapc.f-rpg.ru/
Вот здесь мне очень нравится шапка...как она оформлена и то, что не просто чёткая прямоугольная картинка, а именно выходит за пределы и растворяется в фоне.

http://mondedelart.artbb.ru/
Этот дизайн полностью нравится (опять-таки, с первого взгляда покорила шапка)

http://vdiariesworld.rolka.su/
Этот дизайн тоже всецело нравится, особенно нравятся закруглённые края (не знаю, как правильно назвать, у главного фона, что ли...в общем, полотно где форумы идут)

http://dropofpoison.ru/
С технической стороны интересным показался этот дизайн.

http://fatariya.ru/
В этом дизайне, конечно, зацепила анимация и вообще неординарность, как шапки, так и рамки, ограничивающей "рабочую зону" форума.

http://paradise-frpg.ru/
Вот здесь, снова, очень понравилась световая рамка...даже не представляю, как такое чудо создать можно, но очень бы хотелось научиться. Так же понравилась техническая часть (например, ссылки "форум", "участники" и т.д. не по стандарту сделаны в одну линию, а именно сгруппированы в правом верхнем углу)

В общем, вот в таком духе)

0

3

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

спасибо, что откликнулась на мою просьбу)))

Не за что ))) Буду очень рада если смогу научить тебя чему-нибудь )))

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

Вот пробник: http://undertheworld.rolka.su/

Поставь мне админство

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

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

Дизайны будем прописывать в основном через 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

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

Поставь мне админство

Сделано)

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

Пока почитай это, а чуть позже дам тебе еще дополнительное задание.

Прочитала, пока что, вроде бы, всё понятно. Буду ждать следующее задание)

0

5

Сделай фон. Размер 1450х200(или 300) пикселей. Середина форума 800 пикселей.

1.

Сделай прокручиваемый фон
Сделай что бы он не размножался
слева

2.

фон фиксированный
не прокручивается
стоит по центру

Вообщем как сделаешь, то делай скрины и кидай сюда.

0

6

ультраморин

В общем, что делать - я поняла...вот только не поняла где именно это менять нужно(

В "Администрировании" я зашла в раздел "Свой стиль", и там открылось два окошка: "Структура style.css" и "Цвета style_cs.css".  А дальше в этих окошках тьма различного текста, в котором я, честно говоря, запуталась.

Отредактировано shadow (2011-11-15 16:47:26)

0

7

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

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

8

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

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

Спасибо) Буду на это очень надеяться)))

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

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

Если честно, так и не поняла, где и как оформлять этот момент

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

1. Сделай прокручиваемый фон
Сделай что бы он не размножался
слева

http://s2.ipicture.ru/uploads/20111116/C1akM4Vq.png

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

2. фон фиксированный
не прокручиваетсястоит
по центру

http://s2.ipicture.ru/uploads/20111116/8jU5RzYS.png

Отредактировано shadow (2011-11-16 06:23:05)

0

9

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

0

10

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

На счет фона я тебе вечером кину шаблон, тогда все станет понятно.

Окей, буду ждать.

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

Я просила сделать скрины того как будет выглядеть фон после изменений.

Переделала скрин: http://s2.ipicture.ru/uploads/20111116/r9SU3fTm.png

А в центр перемещаться не желает, всё равно остаётся слева.

Отредактировано shadow (2011-11-16 11:59:18)

0

11

У тебя же не вставлен фон картинкой, вот не чего и не заметно.

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

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

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

0

12

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

У тебя же не вставлен фон картинкой, вот не чего и не заметно.

Угу, переделала, вот что вышло:

1.
http://s2.ipicture.ru/uploads/20111116/3NV47O9U.png

2.
http://s2.ipicture.ru/uploads/20111116/r5Np6oZb.png

0

13

Очень хорошо. Для дальнейшей работы над дизайном нам потребуется сделать графику. Опираясь на мои шаблоны сделай фон и шапку. Что бы было легче делать определи для себя любую тематику дизайна. Потом скажу что будем делать дальше.

0

14

Вот что вышло: http://uploads.ru/i/h/U/3/hU3Da.png

0

15

Это шапка, а где фон?

0

16

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

Это шапка, а где фон?

http://uploads.ru/i/l/t/r/ltr6j.png

0

17

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

0

18

ультраморин
В смысле, тебе отдельно нужна шапка и отдельно фон?
Если так, то вот...
Шапка:
http://s2.ipicture.ru/uploads/20111117/8VxTLPsa.png
Фон:
http://s2.ipicture.ru/uploads/20111117/RWH4AeDR.jpg

0

19

Нет, ты меня не поняла. То что ты сделала не совсем то. Вот смотри я делала это для дизайна.

Шапка

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

20

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

Переделай.

Окей

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

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

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

0

21

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

0

22

Да, делаешь и показываешь. После этого объясню как ставить.

0

23

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

По стилю ты можешь делать все что нравится

Мне бы самое простенькое для начала, чтобы не запутаться)))
А вот как полоску навигации делать я понятия не имею, так что ещё порасспрашиваю позже тебя на её счёт.
Хорошо, постараюсь что-нибудь сделать и завтра вечером показать)

0

24

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

http://s1.ipicture.ru/uploads/20110927/R56ulGOW.png[/url]

Хорошо, я не тороплю.

0

25

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

А полоска навигации делается на шапке.

А какие у неё размеры быть должны?

0

26

Длинна 800 пикселей, а ширина любая. Ну конечно в пределах разумного.

0

27

Вот что получилось...

Шапка:

http://uploads.ru/i/m/X/y/mXyLQ.jpg

Фон:

http://uploads.ru/i/K/W/J/KWJq7.jpg

Отредактировано shadow (2011-11-18 22:12:55)

0

28

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

0

29

ультраморин

Спасибо)))
Я вот тоже думала об этом, значит, не зря на это обратила внимание. Сейчас сделаю светлее.
И ещё, мне кажется, что полоса навигации не очень вышла...нужно что-то другое. Что скажешь?

0

30

http://uploads.ru/i/A/i/c/AicQI.jpg

http://uploads.ru/i/M/0/D/M0Dty.jpg

Так лучше? Или ещё светлее?

0


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