BG Development


Страници: (2) [1] 2   ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> 1. Фона на сайта - трикове за по-добър уеб сайт.
iDesign-er
Публикувано на: 12-06-2004, 11:31
Quote Post


Group Icon
Име:
Група: BG Dev модератори
Ранг: Почетен член

Мнения: 2208
Регистриран на: 01.02.04



Искам да напиша нещо като статия, с която се надявам да съм полезен на тези, които навлизат в уеб дизайна. Става дума как може някои много често използвани ефекти като градиенти, сенки и т.н. според това как са направени да са професионални или любителски. Също така ще обърна внимание на някои много често допускани грешки, които могат да ви изложат. icon_smile.gif Тъжното е, че много сайтове на известни фирми допускат тези грешки. Тъй като стана много дълга статия за фона на сайта, ще отделя няколкото статии в различни теми.

Фона на сайта (Background)

Първото правило за цвета, който ще служи за фон на вашата страница, е той да не е ярък, за да не уморява окото. Типичен пример за ярки и ужасни фонови цветове са #FF0000, #00FF00, #FFFF00 и т.н. Може би ще се запитате кой нормален човек би ги ползвал, но за моя изненада това са доста сайтове! icon_eek.gif

Преди изборът ни на цветове беше ограничен, защото повечето видеокарти и монитори не поддържаха повече от 256 цвята. Сега обаче тези карти са рядкост. Затова препоръчвам по-често да се обръщаме към цветовите миксери на програмите за дизайн (Dreamweaver, Photoshop и др.), за да извлечем максимално добър цвят. Цветовите миксери ви предлагат свободно и същевременно много точно да изберете цвят. Точно тези миксери имат едно малко прозорче, където са вижда миксираният цвят. Той може да ви се стори много добър, но на голяма площ цветът може да е ужасно уморителен. Затова трябва да се правят експерименти до постигане на най-добрия ефект.

Най-общо има два типа цветове - тъмни и светли. Ето един тъмен цвят #435C7F и един светъл #D6E0ED. И двата не уморяват окото.

Целта на един сайт е да изпъква основната му част, където е информацията. Затова, ако се ползва тъмен фонов цвят, е логично основната част на сайта да е значително по-светла и обратното.

Старайте се да използвате по-бледи цветове, но не трябва те да се като "изпрани". icon_wink.gif

Друг много често използван отскоро ефект за фона е градиентът (преливката). Това е малко по-рискован, но и много ефектен вариант, ако се направи както трябва. Правилата в цвета при градиент за фон са същите като тези за едноцветен фон, но разликата тук е, че има и втори цвят. Внимавайте с градиента поради 2 основни причини.

1. Трябва и двата цвята в градиента да си подхождат. Тоест, ако градиента е син трябва да има светло-синьо, което да прелива в по-тъмно. В никакъв случай не трябва да се смесват два коренно различни цвята. Например синьо и жълто.
2. Да се зададе no-repeat за фона, за да не започне да се повтаря градиентът отново при по-дълги страници.

Ето малко примери за добре направени градиенти за фон:
http://ntv.bg
http://www.macromedia.com/

Аз мисля, че тази мода беше започната от Macromedia и техния сайт.

И най-важното правило при ползване на градиенти за фон е:
Трябва да има максимум два близки цвята и никога трети!Смесването на два различни цвята прави трети в средата, където се засрещат цветовете. Например синьо и жълто прави зеленикаво в средата.

Последният вид фон, за които се сещам е графичният.
Имам предвид gif-че, което се повтаря многократно и се слага за фон на сайта. Правилата за това да не е натрапчив и да не уморява окото отново важат и тук.

Добре е, да не кажа и задължително, картинката, която трябва да е за фон, да е малка и да се повтаря многократно, без да личи къде се съединяват картинките.

Много популярни са щрихованите фонове. Като този например: http://www.jerryavenaim.com/ Получава се много добър ефект, но са станали малко досадни. icon_wink.gif

Когато се слагат диагонални линни като щрих, е добре да са възможно най-бледи. А при хоризонтални линии за фон е задължително да са много бледи, защото погледът се премрежва много лошо, ако са ярки. Не ви съветвам да ползвате вертикални линни за фон. И без това един сайт е предназначен да се превърта надолу и едни вертикални линии ще изглеждат ужасно.

Може да ползвате за фон каквото искате. Но снимките, които не могат да се съединят и да създадат ефект за нещо цялостно, не са добра идея за фон на сайт.

Ивайло Георгиев (iDesign-er)
PM
Top
sved
Публикувано на: 12-06-2004, 21:17
Quote Post


Group Icon
Име: Светослав Ранков
Група: BG Dev модератори
Ранг: Почетен член

Мнения: 1162
Регистриран на: 30.01.04



добра статия icon_smile.gif да ви кажа най-добрият миксер за цветове е ColorImpact 2 ...


--------------------
Важното е да си метЪл!!!
http://sved.net/
PMEmail PosterUsers Website
Top
b081
Публикувано на: 18-06-2004, 00:06
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 27
Регистриран на: 16.05.04



Това е от преди маса време, но върши работа и като миксер (първо "link both") - http://606u.dir.bg/xgui/


--------------------
"Only those who try will become." -- Kimahri Ronso
PM
Top
prank
Публикувано на: 29-01-2005, 11:26
Quote Post



Име: Илко
Група: Потребител
Ранг: Редовен член

Мнения: 309
Регистриран на: 30.11.04



Хубава статия icon_smile.gif
ясно ми е използването на фоновете, но не ми е qсно как се прави фон с gradient . Всмисъл , не разбирам как точно се прилага, мисля си можеби трqбва да направя накакво огромно изображени на photoshop, да му сложа градиент и да го направя фон , но ако сайтът е прекалено дълъг и съм задал no-repeat няма ли да остане бяло поле надолу ?
Можеш ли да ми обясниш точно как се прави gradient на сайт ?
PMEmail PosterUsers WebsiteICQ
Top
Joro
Публикувано на: 29-01-2005, 12:00
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 576
Регистриран на: 19.10.04



QUOTE (prank @ 29-01-2005, 11:26)
...Можеш ли да ми обясниш точно как се прави gradient на сайт ?

има лесен начин с филтри, но май работи само при IE
PMEmail Poster
Top
iDesign-er
Публикувано на: 29-01-2005, 13:46
Quote Post


Group Icon
Име:
Група: BG Dev модератори
Ранг: Почетен член

Мнения: 2208
Регистриран на: 01.02.04



QUOTE (prank @ 29-01-2005, 11:26)
Хубава статия icon_smile.gif
ясно ми е използването на фоновете, но не ми е qсно как се прави фон с gradient . Всмисъл , не разбирам как точно се прилага, мисля си можеби трqбва да направя накакво огромно изображени на photoshop, да му сложа градиент и да го направя фон , но ако сайтът е прекалено дълъг и съм задал no-repeat няма ли да остане бяло поле надолу ?
Можеш ли да ми обясниш точно как се прави gradient на сайт ?

Това би трябвало да работи навсякъде.

CODE
<body bgcolor="#8DC73F" background="images/background.jpg" topmargin="108"  style="background-repeat: repeat-x">


Така преливката ще се повтаря настрани, но не и надолу.

П.С. Радвам се, че има интерес към статията. Дано имам време да напиша и по други теми нещо. icon_smile.gif
PM
Top
L3WD
Публикувано на: 29-01-2005, 13:58
Quote Post



Име: Тони Начев
Група: Потребител
Ранг: Редовен член

Мнения: 373
Регистриран на: 10.07.04



Малко пояснение за кода. Например преливката започва с бял цвят и завършва с черен. Селектираш си ивица от преливката с width=1 и height= на колкото си искаш например 600 и тази ивица си я запазваш като background.jpg . Клед това за фон на страницата (bgcolor="") си слагаш черен цвят.


--------------------
Results Matter
PMUsers Website
Top
prank
Публикувано на: 29-01-2005, 18:40
Quote Post



Име: Илко
Група: Потребител
Ранг: Редовен член

Мнения: 309
Регистриран на: 30.11.04



А какво точно трябва да представлява картинката ( background="images/background.jpg" ) ?
PMEmail PosterUsers WebsiteICQ
Top
iDesign-er
Публикувано на: 29-01-2005, 21:30
Quote Post


Group Icon
Име:
Група: BG Dev модератори
Ранг: Почетен член

Мнения: 2208
Регистриран на: 01.02.04



QUOTE (prank @ 29-01-2005, 18:40)
А какво точно трябва да представлява картинката ( background="images/background.jpg" ) ?

Това е само пример.

Нека не разводняваме повече темата, защото основно е статията и може да има малко пояснения, но да не става чат, защото никой няма да иска да чете тема от 3 страници.
PM
Top
mavruda
Публикувано на: 12-08-2005, 15:07
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 9
Регистриран на: 12.08.05



QUOTE (prank @ 29-01-2005, 18:40)
А какво точно трябва да представлява картинката ( background="images/background.jpg" ) ?

В случая със сайта на Нова ТВ направена е преливката , изрязан е gif по вертикална линия, за да се повтори на ширина (настрани), кръстил е тая картинка някак си и я е повторил - за предпочитане чрез CSS .
Аз лично бих сложил тая дължина на gif-a в <div></div>
самия bground (основния) ще го дам с цвета на най-долния цвят от преливката.
За целта ползвам ColorMasterPicker - препоръчвам Ви я , спестява време и нерви и не е нужно да зазубряте някви кодове за цветове . И Voila ! Ето го приятния Bground на Нова ТВ!
PMEmail Poster
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (2) [1] 2  Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0