Rheinwerk Design Adobe Photoshop CS4 - Разширени техники - 11
11.2 Процедури и техники за сглобяване
В областта на уеб дизайна Photoshop може да използва огромния обхват на своите творчески възможности. Тук, по-специално, отделните области на приложение се свързват по много начини. Използваните процедури и методи могат до голяма степен да бъдат прехвърлени към подобни задачи при проектирането на екрана, независимо дали това е потребителски интерфейс за CD-ROM или дизайн на меню за видео DVD. Има само разлики във форматите на изображенията за изхода (вж. Раздел 11.3).
11.2.1 Подготовка за работа: Определете размера на изображението
Таблица 11.1 Разпределение на размерите на екрана и най-важните браузъри (статус 04/2009, източник: marketshare.hitslink.com)
Що се отнася до печата, това е относително лесно: лист А4 е 297 х 210 мм и това е всичко. Когато се проектира екран за CD-ROM, обикновено има размери на изображението 1024 x 768 или 800 x 600 пиксела. Въпросът е ясен и при дизайна на DVD меню: 720 x 576 пиксела за европейската система PAL или 720 x 480 пиксела за американската телевизионна система NTSC.
В уеб дизайна тази тема далеч не е ясна. Разбира се, обичайните в момента размери на монитора първо определят какво е възможно и полезно изобщо. Разпределението на тези размери също е важно (вж. Таблица 11.1).
Въпреки това е много по-трудно да се изчисли действителната „използваема площ“ на уебсайт. Почти всички браузъри имат различни стойности тук, защото лентите за превъртане, лентите на състоянието, лентите с менюта и заглавията се нуждаят от своето място. Този размер също зависи от конфигурацията на потребителя, както и от инсталираните допълнителни ленти с инструменти или „Теми“ (собствени шаблони на потребителския интерфейс, например за Firefox). Ако това трябваше да бъде събрано за почти дузината текущи браузъри за Mac и Windows и различните размери на екрана, ще е необходима по-голяма таблица.
Фигура 11.1 Стандартни размери на уебсайтове от Adobe Dreamweaver (по-горе) и персонализирани размери на файлове в Photoshop за файл • Ново (отдолу)
Adobe любезно включи някои стандартни размери на уебсайтове за предварителен преглед на документа в подножието на прозореца на редактора на Dream-weaver, което опитът се оказа много полезен. Въз основа на тези числа можете да създадете свои собствени размери по подразбиране в Photoshop за диалоговия прозорец за избор на командата File • New.
11.2.2 Работа със скрийншот
Екранна снимка на този прозорец е полезна, за да получите реалистично впечатление не само за наличния размер, но и за това как уебсайтът ще изглежда по-късно в прозорците на браузъра на повечето зрители.
Екранна снимка (ключ) се приземява в клипборда и се освобождава от съдържанието на прозореца му в Photoshop, така че да може да осигури рамката за по-късна работа във файл за дизайн на екрана на най-горното ниво (коригирайте с „заключване“!) Тъй като все още е широко разпространен, Internet Explorer 6.0 може да служи като насока за по-късна работа, особено защото е "най-лошият случай" в почти всички отношения, когато става въпрос за размерите на повърхностните елементи. Понастоящем никой браузър не оставя по-малко място за уебсайтове в стандартната конфигурация.
Фигура 11.2 Снимка на екрана на Microsoft Internet Explorer 6.0 под Windows XP без съдържание на прозорец (1 024 768 пиксела)
Прозорецът на браузъра като част от дизайна на екрана също има предимството за презентации, че клиентът може по-добре да си представи бъдещата страница с този кадър, стига да няма реални уеб страници, които да се виждат. Когато става въпрос за окончателно производство, можете да премахнете рамката на браузъра с инструмента за изрязване.
11.2.3 Инструментите за сглобяване във Photoshop
Междувременно кутията с инструменти, която е достъпна за дизайнерите на екрани като цяло и по-специално за уеб дизайнерите за монтажа им във Photoshop, е много привлекателна. Това не улеснява точно общия преглед, но отваря широка гама от възможности.
С въвеждането на слоевете на изображението имаше само тези слоеве и техните режими, сега можете да използвате слоеве за настройка и запълване като елементи на изображението, които остават за редактиране. Те вече не са значителни по отношение на размера на файла, тъй като не съдържат никакви пиксели на изображението. Използването на маскиране под формата на маски на слоеве, вектори и отрязвания разширява възможностите, без да се изтриват оригинални произведения на изкуството. Освен това групите и не на последно място интелигентните обекти и интелигентните филтри са други важни средства.
Умни обекти | Интелигентните обекти, въведени в Photoshop CS2, се превърнаха в много важен инструмент за монтажни задачи и особено за дизайн на екрана. Неразрушителното интегриране на разнообразен образен материал води до много по-голяма творческа свобода от преди. Има много тънкости, които трябва да се имат предвид при използването на този тип слой, тъй като те не винаги се държат така, както бихме очаквали от подобни функции в други програми (включително тези от Adobe). Тези странности и няколко трика как да се справим с тях са обобщени по-долу:
С Photoshop CS4 можете най-накрая да решите дали искате да свържете маска на слой със слоя на изображението и да го преместите заедно с него или не.
Векторните фигури, било то равнини на фигури, векторни маски или пътеки, имат по-висока точност на позициониране от пиксела. Същото се отнася и за насоките. Това може да бъде много досадно, особено когато става въпрос за задачи за уеб дизайн, тъй като по-късно там ще бъдат изрязани по направляващите линии с точност на пикселите. Следователно при уеб дизайна трябва винаги да държите натиснат клавиша, когато позиционирате направляващи линии, така че те да щракнат на място само с цели пиксели.
Като много ефективна визуална помощ за позициониране, Adobe представи така наречените „Интелигентни водачи“ (магнитни водачи) от версия CS2, които се появяват само при преместване на нещо и които ви позволяват да се съсредоточите върху няколко, наистина важни статични Може да ограничава спомагателни линии.
11.2.4 Изображения и HTML
Дълго време изходът се базираше на структура, базирана на таблица. Таблиците обаче са доста ненадеждни за показване и никога не са наистина стабилни, просто защото никога не са били предназначени за тази цел. Междувременно каскадните таблици със стилове (CSS) най-накрая играят все по-важна роля в уеб дизайна. Тук са възможни точно пикселно позициониране на кадрите и едновременно много по-добра типография с по-лек код. Междувременно - след тежки технологични и политически битки между различните софтуерни компании и едновременно с W3C - има нещо като определена надеждност в дисплея в множество браузъри и операционни системи. Photoshop отчита това, като предлага изход както на базата на таблици, така и на базата на CSS. Това е особено интересно за потребителите на Photoshop, защото много от тях са полезни и за следващите стъпки в уеб дизайна, напр. Б. с редактори на уебсайтове като Dreamweaver са компетентни. С по-малко и по-ясен код те и, разбира се, и тези, които пишат кода (все още или отново) на ръка, са значително облекчени.
За извеждането на проектиран графичен материал в мрежата, човек трябва да напусне света на чистите формати на изображения отчасти и да се справи със смесени технологии като включването на изображения в език за описание на страници. Въпреки че много потребители на Photoshop ще знаят основите на мрежата и HTML, ето кратко резюме.
Специалистите в областта на графичните изкуства са първите, които „злоупотребяват“ със синтактичните елементи, предоставени от HTML „уеб езика“ за творчески цели. HTML е език за маркиране, който трябва да картографира йерархиите на съдържанието. В допълнение, той предлага минимални дизайнерски ресурси, които трябва да гарантират само възможно най-малко ограничената четливост на много технически платформи. Има седем нива на заглавия, някои специални формати, получер, курсив, подчертан текст, прости таблици, възможност за интегриране на изображения и медии чрез препратки и още няколко функции. Но това беше всичко: HTML не е съвместим с оформлението език за описание на страници като PostScript с неговата ориентация към прецизна рамкова архитектура.
Само таблиците в HTML са наполовина полезен начин да се получи вид рамково оформление. Първите уеб дизайнери започнаха с тези оскъдни ресурси. Дълго време не се е променило много на тази основа на уеб дизайна, който съставлява най-голямата част от дизайна на екрана. По време на това развитие от инструмент за обработка на изображения, Photoshop все повече се превръща в инструмент за дизайн на тази млада дисциплина. С течение на времето това се отразява много в характеристиките на програмата.
11.2.5 Шрифтове за мрежата
Фигура 11.3 Избор на пикселни шрифтове за мрежата
Почти няма дизайн на екрана, който да не съдържа поне минимални типографски елементи. Почти нищо не работи без писане. За разлика от печата, при който шрифтът може да изведе всички свои графични детайли, когато шрифтът дойде на печатащата плоча с обикновено най-малко 2400 dpi на устройство за настройка на изображения, ние винаги имаме работа с разделителната способност на екрана в дизайна на екрана, т.е. сравнително мизерни 72 ppi. Очевидно е, че тук по-деликатните шрифтове губят своите особености.
Що се отнася до дизайна на екрана, се изискват ясни, безсмислени шрифтове, по-скоро такива без серифи, отколкото с. Особено когато става въпрос за по-малки размери на шрифта, не само качеството на шрифтовете бързо намалява, но и четливостта. Останалото се извършва чрез изглаждане на шрифта, сгъстяването, което при малки шрифтове води до нещо измито вместо буква. Като лек за това има така наречените пикселни шрифтове. Всички тези обстоятелства са разгледани по-подробно в раздел 9.7 и илюстрирани с примери.
11.2.6 Цветове за мрежата
За приложенията за дизайн на екрана има и различни правила за цветовете от напр. Б. в печата. Това важи особено за мрежата, тъй като създаденото съдържание се показва на понякога огромен брой различни екрани, чието цветно поведение обикновено е толкова жестоко, колкото и непредсказуемо. Стратегии като управление на цветовете са само в зародиш в уеб сектора и не се наблюдава истинско подобрение. Тези рамкови условия налагат работа с ясни, добре разделени цветови схеми за дизайн на екрана. Фините нюанси и контрасти са по-скоро неуместни в сектора на тъкачеството, когато става въпрос за ясна разпознаваемост. Информация за разработването на цветови схеми и свързаните с тях инструменти, включително по отношение на уеб дизайна, може да бъде намерена в раздел 5.8.
Фигура 11.4 Преглед на цветова схема като уеб оформление в Color Schemer