У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается
24. 05. 12. Так как заказ стилей закрыт, вы можете оставить ваши заявки в теме Стили на очередь!, которые будут выполняться по мере возможностей дизайнеров!
22. 07. 12. Наконец у нас новый дизайн! В котором как вы успели заметить - учтены ваши пожелания! Ваши отзывы и предложения вы можете высказать в ДАННОЙ ТЕМЕ

Калейдоскоп аватар

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

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


Вы здесь » Калейдоскоп аватар » АРХИВ ТЕМ » Angel-Demon


Angel-Demon

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

1

Приветульки!)) Для тех кто еще не знает - я Аня!)
Такс, давай начнем немного с азов, я думаю ты не против если некоторые правила и уроки (основы) я буду просто копировать из своих классов других учеников (просто нет смысла иногда одно и тоже переписывать)!
Начнем с кадрирования (кропирования) http://savepic.org/1522813.png!
Я думаю не нужно объяснять - чем меньше ненужных и бесполезных элементов будет содержать наше изображение, тем лучше!
Правильное кадрирование позволяет добавить снимку выразительности или расставить нужные акценты.

Несколько правил кропирования!
1. Не обрезать части человеческих тел)), только если это будет органично смотреться!
2. Не ставить человека по центру!
3. Если располагаешь человека справа или слева - с другой стороны от него тоже НЕ ДОЛЖНО оставаться много места, иначе изображение будет казаться пустым и незаконченым!
4. Если собираешься поместить на работу текст, сразу продумывай это при кропировании!

Задание
Создать 4 кропа размером 200*200, без каких либо обработок!

Исходник|Закрыть

http://img.desktopwallpapers.ru/women/pics/e42ef5ba1215577f819643.jpg

0

2

Открыть|Закрыть

http://www.imagepost.ru/images/757/e42ef5ba1215577f819645.jpg
http://www.imagepost.ru/images/757/e42ef5ba1215577f819644.jpg
http://www.imagepost.ru/images/757/e42ef5ba1215577f819646.jpg
http://www.imagepost.ru/images/757/e42ef5ba1215577f819643.jpg

Отредактировано Angel-Demon (2011-03-15 18:21:30)

0

3

Angel-Demon
что эээ?
я так понимаю - это ты умеешь делать?
или хочешь сразу с дизайна начать?

0

4

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

что эээ?
я так понимаю - это ты умеешь делать?
или хочешь сразу с дизайна начать?

А, у меня просто уже это в привычку вошло. Я епочти всегда в начале сообщения "Эээ..." вставляю  :blush:

0

5

Кропы очень хорошие, даже придраться не к чему)))
Давай посмотрим на колоризацию, возьми любую работу и сделай 4 колоризации!
Так же возьми любую свою работу (из тех что сделала выше) и наложи текстурки (2 работы - 2 разные текстуры)

0

6

Колор|1 исходник

http://www.imagepost.ru/images/757/rSTfpCN3fR___1.png
http://www.imagepost.ru/images/757/q8EFR1uXok___2.png
http://www.imagepost.ru/images/757/TAmeIMRaQv___3.png
http://www.imagepost.ru/images/757/4o4DyvY14K___4.jpg

Тестуры кину завтра - по крайней мере постораюсь..!

0

7

1 работа - очень много желтезны!
2 работа - хорошо
3 работа - слишком глубое
3 работа - хорошо
Но, на всех работах не очень хорошее качество изображения!!
Пиксельность и не хватает резкости!
В таких случаях берешь инструмент "Размытие" (выбираешь мягкий ластик небольшого диаметра) и проходишься по лицу!
После чего идешь "Фильтр-Резкость"!
Колоризация должна подчеркивать определенные оттенки и сглаживать остальные, но это должно быть гармонично!
Давай еще раз кропы и колоризации
4 штуки, качество тоже постарайся улучшить, если это того требует!

Открыть|Закрыть

http://img.desktopwallpapers.ru/women/pics/Natalie-Imbruglia.jpg

0

8

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

1 работа - очень много желтезны!2 работа - хорошо3 работа - слишком глубое3 работа - хорошоНо, на всех работах не очень хорошее качество изображения!!Пиксельность и не хватает резкости!В таких случаях берешь инструмент "Размытие" (выбираешь мягкий ластик небольшого диаметра) и проходишься по лицу!После чего идешь "Фильтр-Резкость"!Колоризация должна подчеркивать определенные оттенки и сглаживать остальные, но это должно быть гармонично!Давай еще раз кропы и колоризации4 штуки, качество тоже постарайся улучшить, если это того требует!

Выполненное...|Задание

http://www.imagepost.ru/images/767/Fe8fsnG.png
http://www.imagepost.ru/images/767/Natalie_ImbrugliwU.png
http://www.imagepost.ru/images/767/Natalie_ImbrugliUu.png
http://www.imagepost.ru/images/767/Natalie_ImbruglifK.png

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

Так же возьми любую свою работу (из тех что сделала выше) и наложи текстурки (2 работы - 2 разные текстуры)

Хм... У меня ничего не получается!

Отредактировано Angel-Demon (2011-03-17 20:15:27)

0

9

Tunguska, а можно пока отложить фотошоп (он у меня глючит) и позаниматься дизайном.

0

10

Ну давай!)))
Я думаю что элементарное ты знаешь (Админка-Стиль, ставим галочку на "Да" - хочешь ли использовать свой стиль)
Давай начнем со второго окна Цвета style_cs.css
Первый пункт, он отвечает за фон, цвет фона, будет ли он фиксированным или неподвижным

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

} 

#pun { 
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}

Разберем по порядку

Код:
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

}

Пункт отвечает за основной цвет фона и за фоновую картинку (если ты будешь делать шапку совмещенную с фоном)
background: #цвет url(адрес картинки); - вместо "цвет" вставляешь цвет фона, вместо адрес - http изображения! Если у тебя не будет картинки, а просто цвет, убираешь пункт - url(адрес картинки)!
background-repeat:
no-repeat; - фон не повторяется
repeat; - фон будет повторяться.
background-position:позиция форума
top center; - по центру
left - слева
right - справа
background-attachment: - будет ли фон фиксированным или прокручивающимся
no-fixed; - прокручивающийся (для совмещеных шапок с фоном)
fixed; - фиксированный фон


Код:
#pun { 
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}

пункт отвечает за фон форумных таблиц
background-color: - цвет фона
none; - без цвета
#0000 - цвет фона
background-image: если вместо цвета хотим видеть картинку
url(адрес картинки); - вставляем адрес картинки
background-repeat: - отвечает, будет ли наш фон повторяться(для изображения) или не будет
repeat; - повторяется
no-repeat; - не повторяется

0

11

А можно вопрос?
Чтобы картинка хорошо смотрелась сзади каких она должна быть размеров?

0

12

Что дальше?

0

13

Angel-Demon написал(а):

Чтобы картинка хорошо смотрелась сзади каких она должна быть размеров?

я всегда делаю 1400*800 фоновую картинку (это приблизительный стандарт)! А так не угадаешь, расширение экрана у всех разное!


Продолжим!
Далее идет пункт отвечающий за : цвет колонок сообщений и тем в форумной таблице, статистика, приветствие, меню форума.

/* 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: transparent;
  color: #58564d;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: transparent; - фон будет прозрачным
color: # - цвет текста в этих пунктах


Пункт отвечающий за: цвет фона и шрифта в колонке названий форумов и последних сообщений

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: none;
  color: #58564d;
  font-style: Times;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: none; - фон будет прозрачным
color: # - цвет текста в этих пунктах
font-style: Times; - можно изменить шрифт текста (если он не меняется, этот пункт можно убрать)

0

14

Далше!

0

15

Пункт отвечающий за категории форума

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
background-image: url();
  color: #dadcdb;
  font-weight: normal;
font-style: normal;
text-align:center;
font-size: 15px;
  font-family: "Arial";
height: 40px;
padding-top: 25px!important;
  }

background-color: - цвет фона категорий
background-image: url(); - можно вставить картинку
color: - цвет шрифта
font-weight: -начертание шрифта:
normal - нормальный
bold - жирный
font-style: - стиль шрифта:
normal -нормальный
italic - курсив
text-align: - расположение текста:
center, left, right - по центру, слева, справа
font-size: - размер шрифта в пикселях
font-family: - можно менять шрифт текста
height: - высота ячейки
padding-top: 25px!important; - выравнивания текста в зависимости от высоты ячейки

0

16

Готов продолжаь!

0

17

Пункт отвечающий за шапку форума

/* CS1.4 */
#pun-title, #pun-title .container {
  background-image: url(http://savepic.net/761240.png);
  margin:  0 auto 0 auto;
  width: 900px;
  background-color: transparent;
  }
 
.punbb .modmenu .container {
  margin:  0 auto 0 auto;
  width: 900px;
  background-color: transparent;
  }

background-image: - изображение
width: - ширина шапки
background-color: - цвет фона:
если шапка картинкой пишем transparent


Если меняешь размер шапки, одновременно нужно меня высоту и ширину в верхнем окне  Структура style.css
Цифры выделенные красным, меняем на свои значения ширины

/* A5.1 */
#pun {
  margin: auto;
  width : 900px;
  padding: 0px 0px 0px 0px;
  border: none;
  border-top: none;
}

/* A5.2 */
.punbb {
  float: center;
  width: 900px;
  height: auto;
  }

Здесь цифры отвечающие за высоту

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #50210d;
  width: 498px;
  margin: 5px 0;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 498px;
  margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: 498px;
  width: 100%;

0

18

Здес с трудом, но врубилась =)

0

19

Далее пункт отвечающий за....(даже не знаю как обозвать)фон и цвет шрифта надписей, например таких как
http://savepic.net/731337.png  http://savepic.net/736457.png

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: transparent;
  color: #58564d;

  }

background-color: - цвет фона (можно так же вставить картинку)
  color: - цвет шрифта


Пункт отвечающий за графу форумных таблиц «Форум-Тем-Сообщений-Последнее сообщение»

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

background-color: - цвет фона (можно так же вставить картинку)
  color: - цвет шрифта


Пункт отвечающий за заливку фона цитаты, кода и  шрифт

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #82827b;
background-image: url(адрес картинки);
  color: #58564d
}

background-color: - цвет фона
background-image: - можно вставить изображение
  color: - цвет шрифта

0

20

ПОНЯТНО!

0


Вы здесь » Калейдоскоп аватар » АРХИВ ТЕМ » Angel-Demon