Създаване на чиста оформление на уебсайт в Photoshop - Проектирането на оформление на уебсайт е повече от подреждане на цветни изображения и попълване на текст в текстовите рамки. Това е подход, който говори много за бизнеса на вашия клиент. Цветовете и графиките на уебсайта определят естеството на бизнеса, докато качеството на дизайна и лесният навигационен поток на уебсайта трябва да обвържат потребителя с организацията и да го превърнат в потенциален клиент.
Проектирането на добре изглеждащ и лесно достъпен дизайн на уебсайт е задължително за всеки уеб дизайнер на wannabe. Този урок е предназначен да ви преведе през процеса на създаване на оформление на уебсайт прост и чист уебсайт от нулата. По време на процеса ще научите важни точки, които ще ви помогнат по-нататък в натрупването на повече знания относно уеб дизайна. 
Напишете вашите изисквания преди да проектирате оформление на уебсайт
Преди да започнете да проектирате оформление на уебсайт, трябва да знаете как ще изглежда уебсайтът ви и какви са темите, които трябва да включите в уебсайта. Важно е да направите списък с елементите на оформлението на уебсайта, от които се нуждае вашият клиент на неговия уебсайт. Заедно с това, качеството на добрия дизайнер е да подготви макет на целия уебсайт, преди да започне работа по окончателния шаблон.
Различни дизайнерски компании адаптират различни нива на стратегии за предварително проектиране, които могат да съдържат телена рамка, прототипиране, макет, бета версии и много други. В този урок ще създадем макетна версия, преди да започнем оригиналния дизайн на шаблон. Използвам сивите нюанси, които позволяват идентифициране на макетния блок
Платно
Преди години, докато имаше много малко ОС и ограничени устройства за достъп до уебсайтове, размерите на страницата бяха фиксирани на един или два размера. Днес сценарият е съвсем различен. Крайните потребители имат достъп до сайтове на настолни компютри с различни размери, мобилни телефони, iPad и таблети. В тази разнообразна ситуация няма шанс да коригирате уеб страницата си до определен размер. Но има някои стандартни размери за индустрията, приложени за всяко устройство. Бавно ще намерите любимия си размер или клиентът ви може да ви насочи към уебсайт, който да имитира размерите.
В този случай работим върху следните измерения. Не се притеснявайте за височината, тъй като тя ще се промени с течение на времето. Колкото повече съдържание добавяте към уебсайта си, толкова повече ще бъде височината.
Не забравяйте, че е обичайно да превъртате страницата вертикално, така че може да не се фиксирате до определена височина за вашата уеб страница, освен ако не искате потребителят да се превърта на началната ви страница като Google. Но е необходимо да не се превърта хоризонтално. Така че, ограничете ширината си според стандартите на индустрията и не проявявайте творчество с хоризонталното превъртане.
За мрежата разделителната способност е ограничена до 72. Напоследък има изображения и страници с по-висока разделителна способност, намерени на iPad и няколко таблета. Но това е рядко и е по-добре да се придържате към 72, като се има предвид скоростта на интернет по целия свят.
Изберете файловете с помощта на Ctrl + A команда и нарисувайте водачи еднакво по целия шаблон. Уебсайтът трябва да бъде добре организиран, като всеки елемент е подреден съгласувано един с друг. И указанията за оформление на уебсайтове ви помагат лесно да го получите.
Пригответе макета си
Поставянето на вашия макет на файла в оригиналния ви шаблон ви помага да спестите достатъчно време. Проектирането на уебсайта ви става толкова лесно, че в крайна сметка ще завършите рамката в рамките на няколко минути. Въпреки това, макетът ще ви помогне само да проектирате кадрите. Завършването на елементите на дизайна с детайли, подреждането на типа и подравняването ще отнеме повече време, отколкото да рисувате оформлението на уеб сайта.
Цветова схема и други възможности за избор
Следващото нещо, след като подготвите рамката си, е да изберете цветова схема. Но, по-добре е да подготвите цветовете си, преди да започнете да работите върху дизайна.
Цялото нещо се свежда до посланието, че, подгответе оръжията си, преди да започнете дизайна. Всичко, включително икони, изображения и избор на цветове, трябва да е готово, преди да започнете работа. Организирането и планирането на вашата работа ще спести повече време и ще се съсредоточи върху дизайна без препятствия между тях.
Изборът на цветове може да бъде избор на дизайнер, ако компанията е нова и няма корпоративна идентичност преди. В някои случаи клиентите дават представа какви нюанси искат да бъде логото или фона. Що се отнася до съществуващите компании, при които може да се наложи да преработите цял уебсайт, може да се наложи да изберете същите цветове според нуждите на клиента.
Има много уебсайтове, които могат да ви помогнат да изберете милиони цветни схеми от архивите. Изпробвайте следните уебсайтове, за да се насладите на богат избор от цветови комбинации.
Color.adobe.com
Colourlovers.com
Тук избрах няколко нюанса на синьото, които да използвам за уебсайта. Целият уебсайт ще бъде планиран в рамките на следната цветова схема. Не забравяйте да изберете три или четири различни цветови комбинации, тъй като не знаем кой цветен клиент ще предпочете. След като клиентът финализира цветова схема, запазете стойностите на сенките и се уверете, че цветовете играят жизненоважна роля във всяка вертикала на организацията. Особено в корпоративната идентичност.
Процес на проектиране
Има много начини да се заемете с дизайнерите си. Няма твърди и бързи правила за оформление на уебсайтове, които да определят или следват процеса на проектиране, това е най-вече процес, който дизайнерът ще избере за негово удобство.
Някои дизайнери искат да построят цели блокове и рамки и да започнат да работят върху детайли на втория етап, последвани от типа и накрая подравненията и настройките. Някои искат да завършат една част от страницата наведнъж и да я пренесат в следващата част. Следваме втория стил.
Ще завършим уебсайта в следните стъпки
- Заглавие и долен колонтитул
- Какво правим
- Услуги
- форма
- Новини
- Footer
Заглавие и долен колонтитул
Правилото за определяне на размерите на заглавката или банера ви е оставено на вашето творчество. Според най-новите тенденции, уебсайтовете се появяват с огромно изображение, което обхваща целия ви компютър. Стилът е посочен като образ на героя, който стана доста популярен наскоро.
В този случай започнахме със заглавка със 120 пиксела височина и височина от 550 пиксела за банера. Ширината трябва да съвпада с размера на документа.
Дизайните с плътен цвят имат плосък вид, който не върви добре с по-големи рамки или изображения. За да избегна плоския външен вид, нанесох слоя с наклонен градиент отгоре на банера. Придава на банера дълбочина, която бавно се трансформира от един нюанс в друг.
След това започнахме да импортираме Логото и да го поставим в горния ляв ъгъл на заглавката и още едно по-голямо лого в центъра на банера. Можете също да наблюдавате формите на вектора на оформлението на уебсайта в горния десен ъгъл, които се използват за споделяне на връзки в социалните медии.
На този етап завърших добавянето на типа в частта Header & Banner. Името на компанията, съобщението на марката с връзки и услуги се добавят в текста. Можете също така да наблюдавате прозрачен бутон на Банера.
Обикновен текст или твърде много тип без специални функции ще развалят външния вид и усещането на вашата уеб страница; страницата скоро ще роди потребителя, което може да му позволи да напусне бързо вашия сайт. Вижте векторната форма, която добавих към връзките към услугите горе вдясно на банера. Стилът е прост, но въпреки това запълва празнотата, избягвайки светския вид.
Изберете изображение, подходящо за бизнеса. В интернет има милиони изображения за запаси и няма да отнеме много време, за да намерите изображение, което да отговаря на вашите изисквания.
В моя случай намерих висококачествено изображение, което мисля, че ще се справи добре с моя уебсайт. Нямам бизнес тема за уебсайта, така че съм свободен да избера всяко изображение, което да изглежда добре на публикацията на банера.
Опитайте да изтеглите някои HD изображения от сайтове за безплатни изображения, дадени по-долу
www.pixabay.com
Смесването е изкуство, което трябва да овладеете, за да създадете красиви банери. Тук смесих три слоя, за да постигна ефекта, показан на горното изображение. Ето какво направих
- Поставете слоя на изображението върху банера със син цвят
- Поставете градиента над изображението
- Променете непрозрачността на изображението 40 процента и променете режима на смесване на разликата.
- Вижте палитрата на слоевете в изображението по-горе, за да разберете как слоевете са подредени един върху друг.
Ето как ще изглежда Header & Banner, докато току-що завършихме работа по него. Работим по една част наведнъж и е време да преминем към следващото ниво.
Подравняване в решаващо значение, когато става въпрос за тип; има идея как трябва да изглежда вашият сайт и текстът трябва да бъде подравнен, преди да го стартирате. На това ниво използвах две различни текстови рамки, и двете подравнени вляво.
Следващата стъпка е проектирането на частта за услуги на уеб страницата. Проектирах метална звезда в сиви нюанси, за да демонстрирам различни услуги на компанията. Намерението да се използва символа на звездата е 5 Star Services.
Когато става въпрос за подравняване на текста, водачите са най-добрите ви приятели. Кохерентността в рамките на типа и предметите може да се постигне, като се използва добре бялото пространство и равни пропуски между елементите на дизайна. Използвах много Указания за оформление на уебсайтове, за да видя, че всички обекти в кадъра трябва да поддържат правилни пролуки и разстояния, които извеждат доста голямо количество бяло пространство.
Следващата стъпка от нашия дизайн е да създадем полето за формуляр. В случая работя обратно на метода, който използвахме при проектирането на банера. Ще поставим слоя на изображението под плътния цветен слой и ще приложим градиентен слой върху двата слоя, за да постигнем по-добър вид. Играта с режимите на смесване винаги е от съществено значение, докато поставяте по-големи изображения.
Изборът на изображенията за този сайт няма конкретна тема, свързана с него. Мисля, че това изображение ще помогне на сайта да изглежда по-добре.
Поставете изображението под цветния слой на фона. За да фиксирате изображението точно до размера на цветния слой, използвайте опции за маскиране на слоя.
Разгледайте палитрата на слоевете в горното изображение. Плътният син цвят е в горната част на изображението, режимът на смесване се преобразува в наслагване и непрозрачността се намалява до 65 процента.
Използвах градиентната карта върху двата слоя. Режимът на смесване се променя на оттенък и непрозрачността остава същата.
Формата за формуляри е готова, което ни довежда до края на четвъртото ниво в дизайна на нашия уебсайт.
Следващото ни ниво се състои от две прости текстови рамки. Прилича на второто ниво на уеб страницата и аз използвах двете полета, подобни на горната. Поддържането на кохерентност при изравняване е добър начин за използване на бялото пространство.
Когато стигнахме до финалната част на страницата, време е да разгледаме още веднъж размерите на долния колонтитул. Дизайнерът трябва да планира височината на футера въз основа на връзките, които трябва да използва там. В този случай дадох височина от 170 пиксела на долния си колонтитул. Ширината остава същата като уебсайта.
Поставете връзките и изображенията според вашите изисквания.
С това завършихме дизайнерската част на нашия уебсайт. Цветовите комбинации, които използваме, са минимални, използваме много бяло пространство в нашия дизайн и добавихме прост текст с минимални шрифтове. Намерението е да се изработи чиста уеб страница, която се надяваме да бъде изпълнена.
Моля, погледнете отново дизайна на цялата страница по-долу
