Урок: Как да подреждате уеб страница с Adobe Photoshop

Има огромно разнообразие от инструменти за проектиране на уеб страници и работа по напълно прост и функционален начин, без да въвеждате или докосвате код. Те са безброй, предложени от приложения (Adobe Dreamweaver е пример) или директно от онлайн платформи като Wix. За уеб дизайнера обаче познаването на ръчните процедури е от съществено значение. HTML5 и CSS са основните стълбове за оформлението на уебсайтове и целеви страници.

Въпреки това, по-често, отколкото бихте очаквали, ще трябва да се обърнете към приложения като Indesign или Adobe Photoshop за да допълнят вашата работа по оформление и да им осигурят перфектен завършек. Днес ще видим в този обширен урок как можем да разположим уеб страница с помощта на Adobe Photoshop. В тази първа част ще останем в работата, която ще бъде разработена от Photoshop, въпреки че в бъдещи вноски ще видим как можем да приложим тази работа вече директно в HTML код, за да я направим функционална.

Започвайки с дизайна на нашата каркасна рамка

За да започнем с оформлението и дизайна на уеб страница, е изключително важно да започнем, като дефинираме кои ще бъдат основните елементи, това е скелетът. Тази структура ще служи като опора за съхранение на цялото съдържание (независимо дали е текстово или мултимедийно). Чрез дефинирането на всеки от разделите, съставляващи нашата страница, ще можем да работим по тях с пълна точност и да осигурим максимално точен визуален дизайн.

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

За да създадем нашата каркасна рамка, първото нещо, което трябва да направим, е да влезем в приложението Adobe Photoshop и да включим размерите, които искаме да има нашата страница. В този пример нашата страница ще бъде широка 1280 пиксела. Проблемът с размера обаче може да варира в зависимост от крайната дестинация или устройството, на което искаме да възпроизведем нашата страница. Няма съмнение, че за да бъде уеб дизайнът функционален и ефективен, той трябва да бъде отзивчив и трябва да се адаптира към всички устройства на пазара. В този случай обаче ще работим, за да създадем прототип, който ще възпроизведем на настолен компютър. Дори и така, отзивчивият проблем ще бъде обсъден по-късно, засега тук има йерархия на размерите на екрана, с които да работите в този пример. Имайте предвид, че в този случай ще направим оформление на целевата страница в Adobe Photoshop и след това ще я мигрираме към HTML5 И CSS3. Целта на тази малка практика е да превърне дизайн, създаден в Photoshop, в използваем и интерактивен уеб дизайн, който отговаря на движенията на потребителя.

Измервания за мобилни телефони

iPhone 4 и 4S: 320 x 480

iPhone 5 и 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Измервания на таблетки

iPad всички модели, както и iPad Mini: 1024 x 768

Galaxy Tab 2 и 3 (7.0 инча): 600 x 1024

Galaxy Tab 2 и 3 (10.1 инча): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Измервания за настолни компютри

Малки екрани (използвани например в нетбуци): 1024 x 600

Средни екрани: 1280 x 720/1280 x 800

Големи екрани: ширина по-голяма от 1400 пиксела, например 1400 x 900 или 1600 x 1200.

За да започнете да разпространявате елементите и да задавате раздели в нашия уеб макет, е много важно да вземем предвид пропорциите, за да осигурим четлив и мелодичен завършек. От съществено значение е да използвате опциите за правила и ръководства, които можете да намерите в горното меню Изглед. За да работим пропорционално и точно, най-добре е да работим от проценти. Ще щракнем върху менюто за изглед и след това върху опцията «Ново ръководство», за да изберем модалността на разделянето. В този случай ще направим четири вертикални разделения на 25% и ще ги вземем за ориентир, за да поставим нашите изображения в долния колонтитул и изображението на нашето лого в горната част.

Има код за обозначаване на всяка от областите, които ще заемат нашата модел и функцията, която всеки от тях ще има. Например, за да посочим площта, която ще заема дадено изображение, ще създадем правоъгълници с един вид кръст. За да посочим, че искаме да включим видеоклипове в определена област, ще включим символа за възпроизвеждане вътре в нашия контейнер. В този първи пример ще работим само с изображения, в горния заснемане можете да видите областта, която ще заема logotipo от нашия уебсайт.

Това би бил крайният резултат от нашите Рамкова. Както виждаме, той е разделен на заглавна част, съставена от изображението, в което ще бъде намерено логото и който ще служи като връзка към началната страница, придружена от два раздела, търсачка и четири бутона в полето за търсене. В допълнение, вече в тялото, ние включихме странична лента, съставена от разделителна лента и поредица от категории, които категоризират типа съдържание, което ще бъде на нашия уебсайт. Друг раздел с номерация, който включва записите, които ще съществуват на нашия сайт, и накрая списък с най-представителните мета тагове на нашия сайт.

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

Като долен колонтитул сме включили четири изображения, които ще служат като връзка към други области на нашата страница. Тук можем да включим лога или други интересни раздели. Въпреки че в действителност тази област ще действа по-скоро като преднича, тъй като самият долен колонтитул ще отиде малко по-надолу с политиката за използване, правното известие и авторските права.

След като дефинираме основната структура или скелет на нашата страница, ще трябва да преминем към следващото ниво. Това ще се състои от правилния дизайн на всяка от областите на нашия уебсайт. С други думи, ще започнем да „попълваме“ всяка от тези области със съдържанието, което най-накрая ще бъде вмъкнато в нашия уебсайт. Препоръчително е да не започваме да проектираме тези елементи, преди да работим върху каркаса, защото е много вероятно, ако го правим в този ред, по-късно ще трябва да променим пропорциите им. Рискуваме да изкривим изображенията си и да се наложи да преработите дизайна на всеки от елементите, което ще стане или загуба на време, или резултат с по-ниско качество.

В този случай дизайнът на нашия уебсайт ще бъде изключително лесен. Ще използваме предписания за материалния дизайн, тъй като ще използваме логото на Google, за да илюстрираме тази практика. Трябва да поясня, че целта на този урок е да илюстрира техническите познания, така че естетическият резултат в този случай е без значение. Както можете да видите, малко по малко запълвахме пространството с всички области, които предварително сме определили в нашата схема. Въпреки това направихме малка модификация в последния момент. Както може би сте забелязали, ние значително намалихме размера на нашето лого и включихме разделителна линия в долната част на заглавката, която се свързва перфектно с горното меню. В този случай сме използвали бутони и материали от ресурсна банка. Като дизайнери можем да ги проектираме сами, (особено тази опция се препоръчва, ако искаме да представя много подобен тоник на този, представен от изображението на марката или логото).

Важно е да имаме предвид, че за да изложим този пример, ще работим на две различни нива. От една страна, ще работим върху обектите, а от друга страна външния вид на уебсайта. Тоест, от една страна в скелета на нашия уебсайт и от друга страна във всички плаващи елементи, които този скелет ще поддържа. Ще разберете, че има области, които изобщо няма да се носят, като площта, която ще заема страничната ни лента, предния крак или разделителната лента, която разделя заглавката от тялото.

Структури 1, 2, 3 и 4 ще бъдат част от фон на нашата уеб страница, така че в действителност няма да е необходимо да експортирате като такива от Adobe Photoshop, въпреки че можем да го направим, не е необходимо. Когато става въпрос за Плоски цветове (една от основните характеристики на плоския дизайн и дизайна на материалите, те могат да бъдат приложени перфектно чрез код, използвайки CSS таблица със стилове). Останалите елементи обаче трябва да бъдат запазени за по-късно вмъкване в нашия HTML код. В тази малка диаграма сме възпроизвели и областите, които принадлежат на фона на страницата, така че да имаме ясна представа какъв ще бъде окончателният вид на нашия сайт.

Както ще можете да осъзнаете, смисълът на създаването на тази схема в Adobe Photoshop е да се получи реалното измерение на всеки елемент и да се изясни подредбата и структурата на всеки елемент. Разбира се, текстовото съдържание няма място в тази фаза на процеса, тъй като трябва да бъде доставя се от нашия редактор на код. Трябва също да отбележим, че в тази практика ще работим с бутони и статични елементи, въпреки че обикновено те се прилагат от рамки като Bootstrap или директно от Jquery.

След като сме създали всеки от елементите, които ще съставят нашата уеб страница, е време да започнем да ги експортираме и запазваме в папката с изображения, намираща се в папката на HTML проекта. Важно е да свикнете да експортирате от вашата рамка, защото е много вероятно да се наложи да модифицирате някои от оригиналните елементи въз основа на конфигурацията на скелета. (Например, в този случай сме променили размера на оригиналните бутони, логото и повечето елементи, които са част от композицията, включително изображенията в долната област).

Важно е да се научим да запазваме всеки елемент независимо, за да го запишем с размерите, които имат и по точен начин. Всяка грешка, колкото и малка да е, може да повлияе на всички елементи, които са част от вашата уеб страница. Имайте предвид, че те ще бъдат свързани помежду си и трябва да имат идеални размери, така че да могат да бъдат въведени от HTML в крайната мрежа. В този случай ще трябва самостоятелно да изрежем и запазим следните елементи:

• Нашето лого.
• Всички бутони (тези, които са част от главното меню и останалите).
• Всички изображения.

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

• Първо, трябва да отидете в папката, където се намира PSD файлът, който съдържа нашия каркас, и да го дублирате толкова пъти, колкото елементите, които ще експортирате. В този случай сме създали 12 копия от оригинала и сме ги запазили в същата папка. След това ще преименувате всяко от копията и ще присвоите на всяко от тях името на елемента, който съдържа. Нашите 12 копия ще бъдат преименувани: Лого, бутон от меню 1, бутон за меню 2, лента за търсене, горен бутон 1, горен бутон 2, горен бутон 3 и горен бутон 4. Останалите четири ще бъдат преименувани като: Изображение 1, Изображение 2, Изображение 3 и Изображение 4.
• След като това стане, ще отворим файла с името на логото.
• Ще отидем до нашата палитра от слоеве и ще намерим слоя, който съдържа нашето лого. След това ще натиснем Ctrl / Cmd докато кликваме върху миниизображението на споменатия слой. По този начин логото ще бъде избрано автоматично.
• Следващата стъпка ще бъде да кажем на Photoshop, че искаме да изреже точно това лого. За това ще трябва само да извикаме инструмента за изрязване от клавиша или командата C.
• След като направим това, ще кликнете върху нашия бутон Enter, за да потвърдите изрязването.
• Сега ще отидем в горното меню "Файл", за да щракнем върху запазване как. Ще изберем името, което в този случай ще бъде «Лого» и ще му присвоим формат PNG, за това, че е файлът, който предлага най-високото качество в мрежата.
• Ще повторим процеса с всички копия и елементи. Когато сте подрязали, уверете се, че останалите слоеве в нашата палитра са невидим или елиминирани. По този начин можем да запазим всеки елемент с прозрачен фон.

В този случай избираме нашия бутон от меню 2 от палитрата от слоеве. На екранната снимка можете да видите как лимитите на нашия бутон са избрани автоматично.

След като изберем инструмента за изрязване от клавиша C, нашето платно се намалява само до размерите на нашия бутон.

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

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

Обобщение:

1. Проектирайте структура на уебсайта, като обръщате специално внимание на съдържанието, което искате да предадете, и секциите, които трябва да създадете на вашия уебсайт.
2. Работете върху скелета си или Рамкова от Adobe Photoshop, посочвайки в кои области ще се показва съдържанието и техния формат.
3. Разчитайки на мерките и марките, които сте разработили преди това, започнете дизайн повърхността на мрежата. Включва всички елементи (както плаващи, така и фиксирани). Не забравяйте да включите съответните бутони, лого и изображения.
4. Изрежете един по един всички елементи, които са част от проекта. Уверете се, че имат правилните мерки и че няма да ви създадат проблеми по-късно.
5. Запазете всички елементи във формат PNG в папката с изображения в папката на проекта HTML.
6. Имайте предвид, че този проект ще има изход към уеб прозореца, така че е много важно да вземете предвид цветовия режим и да приложите RGB.
7. Вдъхновете се от други уебсайтове, на които се възхищавате, преди да се захванете за работа и не забравяйте да обсъдите това с членовете на вашия екип. В случай, че това е проект за клиент, опитайте се да се придържате към инструктаж възможно най-далече.