Дизајн на Рајнверк Adobe Photoshop CS4 - Напредни техники - 11
11.2 Постапки и техники на склопување
Во областа на веб-дизајн, Photoshop може да го искористи огромниот обем на своите креативни можности. Овде, особено, нејзините индивидуални области на примена се мешаат на многу начини. Користените процедури и методи во голема мера се пренесуваат на слични задачи при дизајнирање на екранот, без оглед дали станува збор за кориснички интерфејс за CD-ROM или дизајн за мени за видео ДВД. Постојат само разлики во форматите на слики за излезот (видете дел 11.3).
11.2.1 Подготовка на работа: Одреди ја големината на сликата
Табела 11.1 Дистрибуција на големината на екранот и најважните прелистувачи (статус 04/2009, извор: marketshare.hitslink.com)
Кога станува збор за печатење, тоа е релативно лесно: Лист DIN A4 е 297 x 210 mm и тоа е тоа. Кога дизајнирате екран за CD-ROM, обично има големини на слики 1.024 x 768 или 800 x 600 пиксели. Работата е јасна и за дизајнот на менито ДВД: 720 x 576 пиксели за европскиот PAL систем или 720 x 480 пиксели за американскиот ТВ систем NTSC.
Во веб-дизајнот, оваа тема е далеку од јасна. Се разбира, моментално вообичаените големини на мониторот прво наведуваат што е можно и корисно воопшто. Распределбата на овие големини е исто така важна (види Табела 11.1).
Сепак, многу е потешко да се процени вистинската „корисна површина“ на веб-страница. Практично, сите прелистувачи имаат различни вредности тука бидејќи лентите за движење, статусните ленти, менито и насловните ленти имаат потреба од своето место. Оваа големина зависи и од конфигурацијата на корисникот, како и од сите дополнителни инсталирани ленти со алатки или „Теми“ (сопствени обрасци за кориснички интерфејс, на пр. За Firefox). Ако ова се собере за скоро десетина тековни прелистувачи за Mac и Windows и различните големини на екранот, ќе биде потребна поголема табела.
Слика 11.1 Стандардни димензии на веб-страници од Adobe Dreamweaver (горе) и прилагодени големини на датотеки во Фотошоп за датотека • Ново (подолу)
Adobe kindубезно вклучи неколку стандардни големини на веб-страници за преглед на документот во подножјето на прозорецот на уредникот Dream-weaver, што искуството се покажа како многу корисно. Врз основа на овие броеви, можете да креирате свои стандардни големини во Фотошоп за дијалог за избор на командата File • New.
11.2.2 Работа со слика на екранот
Снимката на екранот од овој прозорец е корисна со цел да се добие реален впечаток не само за достапната големина, туку и за тоа како веб-страницата ќе изгледа подоцна во прозорецот на прелистувачот кај повеќето гледачи.
Снимката на екранот (клуч) се наоѓа на клипбордот и се ослободува од содржината на нејзиниот прозорец во Фотошоп, така што може да обезбеди рамка за подоцнежна работа во датотека за дизајн на екран на највисоко ниво (поправете со «заклучување«!). Бидејќи сè уште е доста распространет, Internet Explorer 6.0 може да послужи како упатство за подоцнежна работа, особено затоа што е „најлош случај“ во скоро сите погледи кога станува збор за димензиите на површинските елементи. Тешко дека кој било прелистувач во моментов остава помалку простор за веб-страниците во стандардната конфигурација.
Слика 11.2 Слика од екранот на Microsoft Internet Explorer 6.0 на Windows XP без содржина на прозорец (1 024 768 пиксели)
Прозорецот на прелистувачот, како дел од дизајнот на екранот, исто така има предност за презентации што клиентот може подобро да ја замисли идната страница со оваа рамка, сè додека нема вистински веб-страници што може да се видат. Кога станува збор за финалното производство, можете да ја отстраните рамката на прелистувачот со алатката за отсекување.
11.2.3 Алатките за склопување во Фотошоп
Во меѓувреме, кутијата со алатки што е достапна на дизајнерот на екранот воопшто и на веб-дизајнерот особено за неговата монтажна работа во Фотошоп е многу привлечна. Ова точно не го олеснува прегледот, но отвора различни можности.
Со воведувањето на нивоата на слика, ги имаше само овие нивоа и нивните режими, сега можете да користите нивоа за поставување и пополнување како елементи на сликата што остануваат за уредување. Овие веќе не се значајни во однос на големината на датотеката, бидејќи не содржат никакви пиксели на слики. Употребата на маскирање во форма на слоеви на маски, вектори и маски за сечење ги проширува можностите без бришење на оригинални уметнички дела. Покрај тоа, тука се и групите и, последно, но не и најмалку важно, паметните објекти и паметните филтри.
Паметни објекти | Паметните објекти воведени во Photoshop CS2 се развија во многу важна алатка за монтажни задачи, особено за дизајнот на екранот. Неуништувачката интеграција на разновидниот материјал за слика резултира со многу поголема креативна слобода отколку порано. Постојат многу суптилности што треба да се земат предвид кога се користи овој тип на слој, бидејќи тие не се однесуваат секогаш како што би се очекувало од слични одлики во другите програми (вклучувајќи ги и оние од Adobe). Овие чудаци и неколку трикови за тоа како да се справите се сумирани подолу:
Со Photoshop CS4 конечно можете да одлучите дали сакате да поврзете маска на слој со слојот на сликата и да ја преместите со неа или не.
Векторските форми, било да се рамнини на облици, векторски маски или патеки, имаат поголема точност на позиционирање отколку пиксел. Истото важи и за упатствата. Ова може да биде многу вознемирувачко, особено кога станува збор за задачи за веб дизајн, бидејќи подоцна ќе се сечат по линиите на водичот со точност на пикселот. Во веб-дизајнот, секогаш треба да го држите копчето кога ги позиционирате линиите за водење, така што тие ќе се прицврстат само на цели пиксели.
Како многу ефикасно визуелно помагало за позиционирање, Adobe ги воведе т.н. „Паметни водичи“ (магнетни водичи) уште од верзијата CS2, кои се појавуваат само кога нешто е поместено и ви овозможуваат да се фокусирате на неколку, навистина важни статички Може да ограничи помошни линии.
11.2.4 Слики и HTML
Долго време излезот се засноваше на структура заснована на табели. Меѓутоа, табелите се прилично несигурни за прикажување и никогаш не се навистина стабилни, едноставно затоа што никогаш не биле наменети за таа цел. Во меѓувреме, каскадните листови со стил (CSS) конечно играат сè поважна улога во веб-дизајнот. Тука е можно прецизно пикселно позиционирање на рамките и многу подобра типографија со послаб код. Во меѓувреме - по тешките технолошки и политички битки меѓу различните софтверски компании и истовремено со W3C - има нешто како одредена сигурност на дисплејот низ мноштвото прелистувачи и оперативни системи. Фотошоп го зема предвид ова, нудејќи и табеларен и CSS-базиран излез. Ова е особено интересно за корисниците на Фотошоп бидејќи многу од нив се исто така корисни за следните чекори во веб-дизајнот, на пр. Б. со уредници на веб-страници како Dreamweaver се компетентни. Со помалку и појасен код, тие и секако и оние кои го пишуваат кодот (сè уште или повторно) рачно се олеснуваат.
За излез на дизајниран материјал за слика на мрежата, треба делумно да се напушти светот на чисти формати на слики и да се справи со мешани технологии, како што се вградување на слики во јазик за опис на страница. Иако многу корисници на Фотошоп ќе ги знаат основите на мрежата и HTML, еве брзо резиме.
Графички уметници со паметна технологија први ги „злоупотребија“ синтаксичките елементи обезбедени од HTML „веб-јазик“ за креативни цели. HTML е јазик за обележување што треба да ги мапира хиерархиите на содржините. Покрај тоа, тој нуди минимални ресурси за дизајн, што треба да гарантира само најмала можна ограничена читливост на многу технички платформи. Постојат седум нивоа на наслови, некои специјални формати, задебелен, закосен, подвлечен текст, едноставни табели, можност за интегрирање на слики и медиуми преку препораки и уште неколку одлики. Но, тоа беше сè: HTML не е јазик за опис на страница што е компатибилен со распоред како PostScript со својата ориентација кон прецизна рамковна архитектура.
Само табелите во HTML се корисен начин на половина пат за да се добие еден вид распоред базиран на рамки. Првите веб-дизајнери започнаа со овие скудни ресурси. Долго време, многу не се сменија врз основа на веб-дизајн, што го сочинува најголемиот дел од дизајнот на екранот. За време на овој развој од алатка за обработка на слики, Фотошоп сè повеќе станува алатка за дизајнирање на оваа млада дисциплина. Со текот на времето, ова многу се рефлектираше во карактеристиките на програмата.
11.2.5 фонтови за мрежа
Слика 11.3 Избор на пиксел фонтови за веб
Скоро и да нема дизајн на екран кој не содржи барем минимални типографски елементи. Скоро ништо не работи без пишување. За разлика од печатењето, каде што еден тип напис може да ги изнесе сите свои графички детали кога текстуалната форма доаѓа до плочата за печатење со обично најмалку 2.400 dpi на сликир, во дизајнот на екранот секогаш имаме врска со резолуцијата на екранот, компаративно слабо 72 ppi. Очигледно е дека поделикатните фонтови тука ги губат своите особености.
Кога станува збор за дизајнот на екранот, потребни се јасни, бесмислени фонтови, наместо оние без серии отколку со. Особено кога станува збор за помали големини на фонтови, не само што квалитетот на фонтовите се намалува брзо, туку и читливоста. Останатото се прави со измазнување на фонтот, антиализацијата, што во мали фонтови доведува до нешто измиено наместо буква. Како лек за ова постојат таканаречените пиксел фонтови. За сите овие околности подетално се дискутирани во Дел 9.7 и илустрирани со примери.
11.2.6 Бои за веб
За апликации за дизајн на екран, постојат и различни правила за боите отколку на пр. B. при печатење. Ова е особено точно за мрежата, бидејќи креираната содржина се прикажува на понекогаш огромен број на различни екрани, чие однесување во боја е обично исто толку сурово, колку што е и непредвидливо. Стратегиите како управувањето со боите се само во почетна фаза во веб-секторот и не се гледа вистинско подобрување. Овие рамковни услови ја прават неопходната работа со јасни, добро одделени шеми на бои за дизајн на екранот. Фините нијанси и контрасти не се на место во секторот за ткаење кога станува збор за јасна препознатливост. Информации за развој на шеми на бои и сродни алатки, исто така во врска со веб-дизајн, може да се најдат во Дел 5.8.
Слика 11.4 Преглед на шема на бои како распоред на веб во шема на бои