Unknown"

Объявление




Форум закрыт. Но у нас есть FRPG по теме Winx:

Вы здесь » Unknown" » учимся вместе. » сделаем стиль"


сделаем стиль"

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

1

На этом уроке я не буду рассказывать вам о css в дизайне. Наоборот, мы займёмся дизайнерскими частями дизайна (шапки, иконки и т.д.) Внимательно слушаем и делаем работы по всем урокам.
Не обращайте внимания на количество текста, просто я не усею кратко всё описывать) Хочется всегда дать как можно больше информации.

Ученики под спойлером.

Свернутый текст

Ученики
.kinder-surprise
андроид
future}

0

2

Урок №1. Шапка
Заранее - у меня хрень вышла.

Предупреждение: Все части дизайна изготовлены лично мной. Плагиат и использование их как элементов дизайна, запрещено!
Шапка - главная часть в оформлении форума. От неё следует отталкиваться. Потом уже будет проще построить фон, иконки и прочее. А вот с шапкой нужно покипеть.
1. Главное - определиться с выбором фона и исходника. Если вы не имеете даже дизайнерского уровня, то лучше выбрать какой-то фон обычный (как у меня - вензеля). Если вы уже имеете приличный опыт работы, то вам под силу будет создать фон и самим, я думаю.
Классические размеры шапки - 800*500 или 800*400. Я взяла 800*500.
Что же, я выбрала Музу в стиле сити и фиолетовые вензеля.
http://savepic.su/820648.png
2. Нужно заполнить пустое место. Я вставила текстуру чалов и круги с цветовыми бликами. Музу пока не трогаем.
http://savepic.su/809384.png
3. Я наложила ещё несколько текстур. В общей сложности они сделали тон шапки более светлым, но потом всё снова придёт в норму. К тому же, я вставила ещё одну Музу, но она уже полупрозрачная и в другой позе. Чтобы через неё "не просвечивала" текстура часов, я её немного подтёрла ластиком.
http://savepic.su/791976.png
4. Я наложила колор на шапку, что бы всё как-то "скрепилось". Ещё добавила кадр из мульта к фону, но позже уберу, так как он не будет подходить к общей картине.

Свернутый текст

Работайте тщательно, не бойтесь экспериментов! Не жалейте времени - пусть вы будете три дня делать шапку, но это того стоит. Работа будет качественнее и красивее.

http://savepic.su/786859.png
5. Завершающий штрих - колор Музы и тень. Она стала вся в этих квадратах, а мне так и нравится) к тому же, мы написали текст. Он получился таким странным, так как лежит между слоями с текстурами.

Свернутый текст

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

В принципе, готово. Я может сделала не лучшую шапку, но от этого можно оттолкнуться, поверьте мне. Главное - наличие времени и желания.
Теперь ваша очередь пробовать)
http://savepic.su/845226.png

0

3

Урок №2. Фон
Предупреждение: Все части дизайна изготовлены лично мной. Плагиат и использование их как элементов дизайна, запрещено!
Вы сами знаете, что фоны бывает обычные (как правило повторяющийся орнамент), с полосами по краям (как у нас) и Шапка+фон.
Мы будем к нашему дизайну делать такой же фон, как и у нас сейчас.
Размеры можно подобрать разные. Классический (1100*1100 - 1200*1200), Средний (1500*1200. Такой фон подойдёт и для широкоформатного монитора и будет органично повторяться) и большой (1920*1200. Такой фон подойдёт на любой экран). Лучше брать средний или большой, но так как мы учимся, мы возьмём классический - 1200*1200.
1. Нужно определиться с цветом. Я выбрала нежно-фиолетовый. Наша основа по цвету должна подходить к уже имеющимся частям дизайна (шапка).
http://savepic.su/786911.png
2. Теперь сделаем боковинки. Так как как фон имеет размер 1200*1200, то боковинки нам нужны размера 200*1200 (чтобы средняя часть имела ширину 800, как раз под ширину шапки).
Если шапка у вас очень тщательно продумала и загружена, то можно взять обычные боковинки, без всяких выкрутасов (просто те же вензеля), максимум наложить колор и текстуры. Если шапка на половину пуста (как у меня в 1 уроке), то можно на боковинки приделать какие-то интересные текстуры (как у меня, часы) или клипарты, а можно вообще кадры из мультика, цветы и прочее. А можно одну боковинку сделать простую, а другую с теми же часами. В общем, вам подскажет фантазия!
Я сделала самые просты боковинки, ну и с часиками посложнее.
А ещё, по краю боковинок можно пустить узкие полоски. Они могут быть однотонные, с орнаментом или надписью. На полосках надписями как правило пишут название форума или адрес форума. Отличная тема для дизайнов в каталог, кстати. Тут уж вас никто не сплагиатит.
Вот как выглядят полоски с надписями.
http://savepic.su/836049.png
http://savepic.su/812497.png
А я, как видите, выбрала обычные белые.
Итак, наши боковинки.
Простая                                                  С часами
http://savepic.su/809425.png             http://savepic.su/796113.png
3. Осталось просто перетащить боковинки на края нашей основы. Чтобы получить вторую боковинку, достаточно просто отразить уже имеющиеся.
Так как у меня была два вида боковин, то и фона будет тоже 2.
Простой
http://savepic.su/845264.png
С часиками
http://savepic.su/802259.png

0

4

дальше продолжать?

0

5

Да! Продолжай. Мне сейчас нужны эти уроки. *стиль один делаю...*
И ещё - запиши меня, если не трудно)

0

6

.kinder-surprise
хорошо. это будем считать частью нашего персонального обучения.

0

7

g r a s s.
Ок)

0

8

В скором времени ждите ещё урок.

0

9

Урок №3. Иконки
Предупреждение: Все части дизайна изготовлены лично мной. Плагиат и использование их как элементов дизайна, запрещено!
Два основных типа иконок - иконки с картинками и иконки с текстом.
1. Иконки с картинками - текст на таких иконках отсутствует. Поэтому, вредством выразительности тут являются колоры. Более яркие колоры подойдут для иконок "новых сообщений", а блёклые - для иконок "старых сообщений".
2. Иконки с текстом. Та таких иконках наоборот, как правило присутствует только текст, а картинок нет.
3. Смешанные - самая большая группа. Перемешиваются иконки разных сортов и получаются интересные штуки:)
Для нашего дизайна я подобрала иконки без текста.
(извиняюсь за сплющенную Музу)

Свернутый текст

1. Важно
2. Новые сообщения
3. Закрыто
4. Старые сообщения

http://uploads.ru/i/c/W/Y/cWYoP.png  http://uploads.ru/i/N/B/R/NBRbq.png  http://uploads.ru/i/o/2/L/o2LZX.png  http://uploads.ru/i/u/W/Z/uWZhs.png

0

10

я с вами)

0

11

андроид
записала.

0

12

а можешь часики дать плз  :flirt:

0

13

а где вы часики нашли  :flirt:

0

14

андроид
Вот тебе:

Свернутый текст

http://img0.liveinternet.ru/images/attach/c/2/70/38/70038977_1296506217__clock_texture_4.png

0

15

спасибо

0

16

андроид
угу. набери в яндексе "текстура часы". там ещё похожие есть.

0

17

А записаться можно?

0

18

Аня
можно. но нужно делать работы к урокам.

0

19

я делаю скоро готово будет

0

20

узасно)
http://savepic.su/993128m.png новое http://savepic.su/997224m.png старое http://savepic.su/983912m.png важное http://savepic.su/991080m.png закрытое

http://savepic.su/1044331m.png

http://savepic.su/1048427m.png

Отредактировано андроид (2011-12-20 15:51:25)

0

21

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

0

22

иконки
http://savepic.su/1047176m.png важно
http://savepic.su/1034888m.png закрытое
http://savepic.su/1033864m.png новое
http://savepic.su/1038984m.png старое
шапка
http://savepic.su/1030792m.png
фон
http://savepic.su/1017480m.png

0

23

андроид
не хуже не лучше стало xd

0

24

g r a s s. написал(а):

не хуже не лучше стало xd

эт как? о.0

0

25

андроид
все не то.
разве что кроп у блум на иконках лучше.

0

26

вот-ес
http://uploads.ru/t/Y/B/1/YB1wg.png
http://uploads.ru/t/j/L/k/jLkn4.png

0

27

андроид
первое - у тебя шапка меньше в ширину, чем пространство для форума.
если тебе так хочется гороха по краям форума, то он не должен быть таким черным (и к шапке это относится!) и Блум должна быть над горохом. горох может быть даже таким, как посередине форума. тоже будет мило.
шапка слишком яркая, пересвечена.

0

28

Отредактировано .kinder-surprise (2011-12-26 07:44:07)

0

29

.kinder-surprise
мило, но пустова-то.

0

30

g r a s s.
спасиб)
а что можно добавить?

0


Вы здесь » Unknown" » учимся вместе. » сделаем стиль"