Photoshop Web design from photoДа започнем нашият урок със снимка, която сме направили лично. Ще се опитам за по-голяма яснота да качвам всяка картинка или psd-файл, който ползвам. Като по-големите от разрешеното файлове ще ги архивирам и качвам на части. Вчера направих няколко снимки и си избирам една, която мисля съдържа подходящо цветове за Web:
Другото, което ще ни трябва е да си изработим проста схема на WEB-дизайна. В случая бих могъл да се базирам на един доста стар мой урок, но реших да използва по-съвременна концепция, която е леко в стил WEB 2.0. Ще трябва да се съобразим с няколко неща за изработване на схемата:
- да е SEO-оптимизирана. За това ще трябва да сложим основният текст максимално близо до началото. Най-добре след основното меню.
- хедър в който да имаме картинка - примерно с alt-информация
- оставим място за странично поле за странично допълнително меню, новини, реклама и т.н..
- долна част на сайта за допълнително SEO-оптимизиране с избрани (или на random-случайни) линкове, като и футър.
- определим точните размери на всяко поле, както и на цялата страница, включително с фона.
- да мислим мащабно, като се вглеждаме и в подробностите.
Важно е да имаме начална схема на дизайна. Моята е 1000x1000px, като просто съм поставил няколко гид-линии: 
Web_Design_01.psd
Сега е време да си изберем няколко цвята от снимката. Има доста Color Palette Generator-и в мрежата. И аз на случаен принцип си избирам този: http://www.cssdrive.com/imagepalette/index.php . Избора на цветове е строго специфичен. Някои харесват по-ярките, други по-пастелните и меки тонове. Важното е да не избираме повече от 4-5 цвята, но все пак можем да сме смели в този избор. Постваме нашата снимка, след това с кликане си избираме няколко цвята, които ще си запазим с един скрийншот и после ще извлечем с пипетката на Photoshop:
За да ползваме бързо и лесно нашите цветове е добре да поставим избраните цветове във секцията Swatches на Photoshop. За целта първо ще изтрием старите цветове от Swatches секцията. Най-бързо се прави с натиснат Alt и LMB (ляв бутон на мишката):
Следва поставянето на нашите цветове в Swatches, за да не ги търсим после:
Да оцветим схемата с избраните цветове. Важното е всеки цвят да е поставен в отделен слой!. Да видим какво се получи, според моя избор на цветове:
При изработването на дизайна трябва задължително да имаме в предвид полетата, които ще се разширяват! Обикновено имаме няколко фиксирани полета. Това са хедъра и основното хоризонтално меню. Всички останали полета трябва да са съобразени с динамичното разширяване на основното съдържание и страничните полета. Ако урока опре до момента на превръщане на Photoshop-дизайна в истинска WEB-страница ще покажа как се прави това, като се оптимизират максимално картинките и полетата. Има едно правило - колкото повече бакграунди (фонове) обединиш в една картинка, толкова по-бърз е сайта. Можеш да ги извличаш с CSS.
Да започнем нашият дизайн, който вече имаме базово оцветен. Трябва да знаем какво е характерно за WEB 2.0 дизайните. Изключително характерни са цветните градиенти, както и полета в стил етикети. Има доста неписани правила, като използване на изрязани картинки, който излизат от една секция и навлизат в друга, но ние ще се ограничим до семплия дизайн.
Да поставим малко градиенти във отделните секции на Photoshop-файла. Ще се придържаме към основният цвят и ще използваме Layer Style, за да можем да променяме всичко лесно и когато си пожелаем.
Да поставим малко градиенти на хедъра - горната част на сайта, content - основното изложение и footer - долната част. Грaдиентите ги поставямe като следваме ляв мисловен диагонал от палитрата - по-светъл и по-тъмен цвят от базовия:
gradient.psd
От фотографията съм разбрал, че за да засилиш формите е добре да се добави Sahrp-ефект при нешумните изображения. Ние нямаме никакъв шум в нашия дизайна, така, че спокойно можем да заложим на принудително ръчно шарпене. Какво по-контрастно от черното и бялото?!!! Нали!!! Та нека да пошарпим малко в края на всяко поле и в началото на следващото, като просто създадем един отделен слой в който да използваме селектиране с един пиксел и го запълним с черно или бяло. Ефекта би трябвало да се окаже много полезен за изпъкване на на нашия дизайн. Но за да не е прекалено ярко шарпенето нека намалим прозрачността на 60%, че иначе за уморените очи или за хората с проблеми тази яркост ще създава илюзии за двойни линии и ще дразни:
sharpen.psd.part1.rar , sharpen.psd.part2.rar
Би могло да се каже, че фона ни е готов! Много гот, а!
А сега да се погрижим за някои дизайнерски аспекти от съдържанието. На първо място няма да е лошо да поставим някоя картинка в хедъра и както по-горе споменахме да преминем от слой в слой. Аз ще използвам базовата картинка за нашият дизайн. Ще и задам и малко Layer Styles, като бордер 8px и Drop Shadow от 15px:
header_picture.part1.rar, header_picture.part2.rar
Можем вътре в нея да си напишем логото на фирмата или въобще на сайта. Но за това по-късно.
Сега да използваме и 5-ят цвят за основният текст, който е много близък до основния цвят на централният фон. Създаваме някакво поле с Rectangular (правоъгълник-а) в нов слой и му поставяме (изпълваме) с този цвят. Задаваме му и малко Layer Style - бордер, градиент, и външно осветяване от 1px.
Изтегляме вдясно пак с правоъгълника за селектиране и още един слой, който да ни служи за страничните полета. Копираме стиловете от основният текст и ги пействаме на този десен слой. Получи се нещо такова:
content.part1.rar, content.part2.rar
Мисля, че за днес стига толкова.
ПС: По молба на кака Таня прилагам и импровизирано видео на урока до тук:
http://www.4shared.com/get/HvM2A2vG/exported_video.html
-------------------------------------------------------------------------------
Да продължим нашият скромен дизайнерски урок. До тук със знанията, които получихме ще можем да създаваме полета, чиито цветове и градиенти да променяме когато си пожелаем.
Благодаря много за забележката на geny относно цветовото усещане на различните хора! Аз също доста съм чел по темата и разбрах, че далтонистите, към които включвам всякакви видове протономии и други зрителни аномалии, не могат да различават близки цветове от цветната гама, но различават със сигурност по-тъмно от по-светло. Ще наклоним нашият семпъл дизайн в тази насока и ще продължим по всички простички правила за изграждане на съвременен WEB 2.0 дизайн.
С леко променената концепция да създадем отново полетата за основното текстово съдържание като просто изберем по-тъмна гама от основния цвят, за да е различима от всяко око. Но този път ще добавим и един гъдел 
, за да не е толкова постно. Защо ли да не добавим един дефект, който често се използва като ефект - шума (Noise)! Като за начало ще вкарам малко шум във футера, За да тази цел ще копирам и пейстна слоя с футера (долната част на сайта) ще добавя един прозрачен слой и ще обединя двата слоя за да премахна наследените слоеви стилове. Естествено ще добавим нови стилове. Да видим какво се получи след всички промени с които трябваше да се съобразим:
psd-file: Sharpen_footer.rar
Не е особено зле, но някак си не се вписва в WEB 2 и SEO-зациклянето на търсещите краулери в сайта. Затова няма да е лошо да предвидим и малко секции за добавяне на вътрешно линкване. Тия секции могат да са някакви полета с интересна информация за потребителите на сайта - промоции, случайни (random) линкове към останалите страници и т.н. Добре ще е за тези поленца също да се възползваме от пипетката и да се съобразим с хората със изкривени зрителни цветоусещания. Ще направим тези поленца по-светли от основният цвят. Примерно:
sections.rar
===============================
И така да продължим. След като вече имаме базата е добре да наслагаме малко антураж - орнаменти и текст. Можем да си създадем сами разни форми, подходящи за нашият дизай, но можем да потърсим и в десетките сайтове за картинки и да си "кракнем" някоя готина картинка. С учебната цел, която сме си поставили, аз няма да се балтая, а директно ще потърся картинки в мрежата.... И след кратко търсене намерих тези 2 подходящи картинки:
Картинките са в png-формат и няма да има нужда да ги режем, за да ги ползваме. Директно ще ги лепнем някъде в централното съдържание.
Другото, което трябва да направим е, да създадем нещо като лого на сайта. Аз ще сложа примерно Download.bg, като добавя някакви текстови орнаменти от шрифта Wingdings, който е пълен с тарикатски дизайнерски благини.
Е остана да сложим и малко текст, като се съобразим със SEO оптимизирането. Което означава, че трябва да предвидим място за h1 и поне още h2 за заглавия на текстовите полета. Това е изключително важно!
Запълваме и дясното меню с някакви глупости, колкото да имаме ограничително поле и цветовете, които ще използваме по-късно при изграждането на истинската WEB страница. В това меню отново използвам форми от Wingdings шрифта, които по-късно мога да задам като стилове за li-таговете.
Поставяме и някакъв не особено контрастен текст във футъра.
Сега следва нещо мноооого важно. Надписването и групирането на всички слоеве, така че в по-късен етап да можем много лесно да работим само с това което ни е необходимо. Групирането става като създадем папки с този инструмент на слоевете:
След като напишем и групираме всички ще получим много проста схема на дизайна. Разделяй и владей :
Да видим и самия дизайн с поставените картинки и Wingdings шрифтови орнаменти:
И psd-файла: ornamenti_i_tekst.rar
СЛЕДВА ПРОДЪЛЖЕНИЕ...
Отговор
За печат
Коментар