Основи на уеб-дизайн. Скици. Развитие на скица
- Предишен материал - Основи на уеб-дизайн. Скици. Какво трябва да знаете, преди да започнем да работим по сайта?
Откъде да започнем скициране?
Да започнем с допускането, че клиентът може да отхвърли рисунката си, без да има причина. Е, не ми харесва, това е всичко! Най-общо казано, според статистиката, само 6% от възрастното население в състояние ясно и убедително да обясни своите интереси и предпочитания. Клиентът не може да прехвърля само на зеления цвят, а с него и не може да се помогне. По-добре е, обаче, ако знаете, че за него по-рано.
Ето защо скицата може да бъде единственият, само ако работите за себе си, любим човек. Най-добре е да се направи всеки от трите варианта, които се различават, подреждането на материали и цветове. По този начин ви дава възможност клиента да избирате: "цвят като първата скица, текст малко по-голям от втория, но в същия шрифт, и трябва някъде да се придържаме тук, че красивата kartinochku третия." Събирането само една скица, вие рискувате да работи в "не, че нещо не е наред. Аз не знам какво, но не ми харесва! "И всичко може да започне отново.
Да предположим, че един уеб сайт, който да изгради, трябва да съдържа много текстова информация. На първата страница на клиента желае да пусне "нещо специално." Какво ни дава?
Както показва опитът, който имаме с вас достатъчно дълго, за да се закълне, че се опитват да поемат по пътя на най-малкото съпротивление. Вижте снимката по-долу.
Нищо оригинала, нали? И все пак на тези скици също може да бъде правят бонбони. Нека да разгледаме по-подробно по-долу: представете си, че това са реални проекти, намалява до такава степен, че просто не всички детайли видими.
Сега е ред от страна на «б», прототип на страниците на второ ниво. Тъй като текстът е основната част от съдържанието на тези страници, бандата заедно с него, за да бъде в центъра на композицията. На лявата лента за навигация могат да бъдат настанени, горната и долната част, например, банери. Дясната част остава неизползвана, тя ще се виждат само от собствениците на монитори с висока разделителна способност. И пак - дори и ако останем в рамките на веригата е показано - има избор: цветове на бутоните, дизайн илюстрации, ако има такива, сепаратори блокове текст и нищо друго.
След като започна да скицира, не завлече подробно: нека първо скица (за предпочитане на хартия, но не и в Photoshop) ще бъде не повече от тези, които са ме изготвен. Това е изключително важно, за да видите цялата композиция като цяло, а след това идва разбирането на какъв цвят е най-добре да изберете какво да се направи контур елемент ако симетрията и геометрични необходимо.
Няма да скрия, описанието на един от възможните подходи дойде доста занемарено, но в противен случай не може да бъде: един човек може да бъде обучен да се дестилира от място на място пиксели в Photoshop, но дори и най-първата стъпка в проектирането, той само може да направи себе си, а първите самостоятелно направени скица ще ви даде чувство на увереност в своите способности. Но не се отпуснете: няма гаранция, че първата си шедьовър ще бъде в състояние да се превърнат в HTML. ;-)
скица техника производителност
Създаване на нов файл в Photoshop за скица, изберете правилните настройки за файла, да го промените по-късно ще бъде много по-трудно или просто невъзможно при запазване на качеството на изображението.
Преди започване на работа се провери елемент от менюто Файл | Предпочитания. В секцията Display Бърз задават четка тип Размер на курсора за курсори за боядисване и точно за Други курсори. Ако това не бъде направено, с функции като Crop ще бъде трудно да се работи.
Задайте разделителна способност от 72 точки на инч, този параметър е стандарт за уеб графика. Ако искате да създадете картинка с резолюция от 600-800 DPI (този подход е често срещан в дизайнери свикнали да работят с пресата) и преди да се съхранява в подходящ формат за намаляване на резолюцията на желаното, имайте предвид, че това няма да работи: качество снимки ще бъдат безвъзвратно загубени. Фотографски изображения след тази процедура могат да запазят приемливо качество, но конструкции на базата на графични примитиви умират.
Няколко думи за графиките файлови формати. Изображение, състояща се от Ърл. примитиви и използва ограничена палитра, от които се нуждаете, за да запазите в GIF формат. Позволява ви ръчно да се определи броя на цветовете. Същото се отнася и за ясни снимки: меню File | Износ ви позволява да се постигне желания ефект, когато се използват GIF89A формат. Фотографските изображения обикновено се съхраняват във формат JPEG (за това, че е подходящо да се използва функцията File | Запиши за Web). Ако вашата скица включва и двата вида графики, картина, винаги могат да се режат на няколко части и да ги запишете в различни формати, а след това се комбинира в едно изображение към HTML файлове с помощта на табличен оформление.
Остава да кажа няколко думи за текста.
За съжаление, много малко обещаващ дизайнери в процеса на скица внимание дизайн заплащането на текста, който ще бъде разположен на симулиран уеб страница. Текстът обаче - най-важната част от дизайна. Не забравяйте четирите правила на работа с текста:
Правило едно:
Черни букви на бял фон - това е нормално. Тъмните букви върху светъл фон - това е приемливо. Ярки букви на тъмен фон - вашата концепция за дизайн трябва да са много ценни за да поиска такава комбинация от цветове! Бели / сини / зелени / червени букви на черен фон - опитайте да не брои, а след това опитайте отново.
Правило две:
Правило три:
Всяка точка на текста трябва да бъдат отделени от другите елементи на цветните полета на фона на страницата. Текст, "бум" на границите на колоните, в която се намират, не се чете.
Член Четири:
Може да бъдат разочаровани, но аз не ще ви обясни как да работят в Photoshop, или как да се постигне по-специално визуален ефект. Всичко това трябва да се научат сами. Интернет достатъчно подходящи ресурси, както и хартиени книги, посветени на тази тема много. Давайте!
Ако все още не може дори да си представя как си дизайн ще изглежда в Интернет, да направите екранна снимка на прозореца на браузъра, нарязани от страницата си и запишете файла на диск. Вече можете да "място" в него някой от вашата eskizov.nuzhno просто попълнете района снимка на страницата, която дава под повтарят хоризонтални сиви ивици
Съответно, напротив, ако искате да видите нещо, което приличаше скици или че сте харесали на сайта, то на екрана се направи, отрежете краищата и да видим какво ще стане. Много полезно упражнение, мога да ви уверя!
Как се роди този сайт
сини линии показват как е бил отрязан скицата за производство на HTML-страници. Грей площ - празно пространство, тук е текстът на действителната страница. Скица се състои от два слоя: на върха има само синя точка, за да се придвижват в таблицата със съдържанието след курсора на мишката върху дъното - всички останали.
Между другото, графичната част на обекта се организира малко по различен начин: вместо "рязани" таблица на съдържанието на много малки снимки, аз го запазва като GIF-файл, като се използва технология за поставяне sylok карта с изображение. за което ще говорим в един от уроците, посветени на HTML.
Но миниатюрите на второ ниво:
Веригата е същият: синият цвят показва линията на рязане, двата слоя, единият от които съдържа само синята точка. Засега не е ясно защо всички по този начин, а не по друг начин, нали? Това не е нищо: всичко ще си дойде на мястото, когато ние ще се развие една маса vorstku. или, когато се опитате да си, за да "събере" повече или по-малко сложен страница.
Последната стъпка - раирана фон. За да се постигне желания ефект, просто трябва да попълните съответната област снимка на страницата, която дава под повтарят сиви хоризонтални ивици. Ето как изглежда, когато увеличение shestnadtsatikratny (GIF два цвята, 536 байта, застроена площ - 10h9 пиксела.):
В този момент искам да завърши обсъждането на Photoshop, скици и различни графики. Следващия път ще се напише код за проста уеб страница, и се опитайте да го разберете и да упражнява графики за уеб върна малко по-късно и на друго ниво. На добър час!
- Предишен материал - Основи на уеб-дизайн. Скици. Какво трябва да знаете, преди да започнем да работим по сайта?
Свързани статии