Как да създадете оформление на страница. Широки опции за персонализиране. Предложете опции, от които да избирате

Оставете коментар 6,950

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

Ресурси за урока:

Набор икони (wefunction.com)
Набор от алтернативни икони
Икона на Twitter (iconeden.com)
Bebas шрифт (dafont.com)

Стъпка 1. Макет

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

Стъпка 2. Създайте документ.

Ще създадем оформление с ширина 960 пиксела за сайта. За да направите това, създайте нов документразмер 1200x1500 пиксела. Резолюция 72 пиксела.

Тъй като оформлението на сайта ще бъде широко 960 пиксела, трябва да дефинираме тази област, като добавим насоки. Изберете целия документ ( Ctrl + A).

Отидете в менюто Selection - Transform Selection(Избор> Трансформиране на селекцията). В лентата със свойства в горната част на екрана задайте ширината на 960 пиксела. Това ще бъде работната зона на оформлението.

Задайте водачите точно до полетата на селекцията.

Трябва да създадем подплънка между ръбовете на монтажната област и областта на съдържанието, която ще добавим по-късно. С активния избор на документа отидете отново в менюто Избор - Трансформиране на селекцията(Избор> Трансформиране на селекцията). Намалете селекцията до ширина от 920 пиксела. Това означава, че ще има по 20 пиксела запълване от всяка страна на оформлението, за общо 40 пиксела.

Задайте водачите към новата селекция:

Стъпка 3. Създайте заглавка на уебсайт.

Нека да преминем към създаване на заглавка на уебсайт. Създайте селекция от 465 пиксела в горната част на оформлението.

Попълнете селекцията в сивои след това използвайте стилове на слоя, за да приложите цветове и градиенти.

Добавете градиентно запълване към заглавката чрез стила на слоя Градиентно наслагване(Градиентно наслагване). Създайте градиент с два цвята.

Сега заглавката ще изглежда така:

Сега трябва да добавите подчертаване към заглавката. Създайте нов слой (Ctrl + Alt + Shift + N)и изберете мека четка 600px. Изберете цвят # 19535a и използвайте четката, за да щракнете веднъж в горния център на заглавката.

Създайте селекция от 110 px в заглавката.

Натиснете клавиша Изтрийза да премахнете селекцията.

Свийте вертикално осветения слой (Ctrl + T) .

Трябва да се уверите, че светлото петно на капачката е точно в центъра. За да направите това, активирайте слоевете със заглавката и маркирайте и изберете инструмента Движещ се(Инструмент за преместване) (V). В лентата със свойства в горната част на екрана щракнете върху бутона Подравняване на хоризонтални центрове.

Създайте нов слой (Shift + Ctrl + N)и рисувайте с инструмента молив(Инструмент Молив) 1 пиксел точка. Използвайте # 01bfd2 за боядисване.

Изгладете ръбовете на този слой с помощта на градиентна маска. Изберете инструмент Градиент(Инструмент за градиент) и създайте градиент, както е показано по-долу:

Приложете нов слой с маска и го запълнете с градиента, който току-що създадохме.

Стъпка 4. Създайте шаблон

Сега нека създадем прост шаблон, който ще добавим към заглавката. Инструмент молив(Инструмент Молив) 2px и нарисувайте две точки, както е показано. Изключете видимостта на фоновия слой за известно време (щракнете върху иконата на окото до фоновия слой) и създайте шаблон (Редактиране - Определяне на шаблон)(Редактиране> Дефиниране на модел):

Създайте нов слой (Shift +Ctrl +Н)и го поставете под слоя за подчертаване. Изберете областта, към която искате да приложите шаблона, и отворете прозореца Напълнете(Попълване) (Shift + F5). Щракнете върху OK.

След добавяне на текстурата, заглавката изглежда така:

Направете плавен преход от шаблон към шапка: добавете маска и мека четка към слоя с шаблон бяло(#ffffff) с 60% непрозрачност преминете през маската.

Резултат:

Стъпка 5. Добавете логото

Нека да преминем към добавяне на лого. Изберете мека четка с цвят # 19535a и рисувайте в размазване.

Напишете текста:

Добавете стил на слоя към слоя с лого. Сянка(Капваща сянка).

Стъпка 6. Навигация

Добавете текст за навигация.

Начертайте бутон за навигация с помощта на (Правоъгълна Инструмент за маркировка). Попълнете селекцията с произволен цвят и намалете опцията Запълване до нула.

Добавете стил към слоя с бутони Градиентно наслагване(Градиентно наслагване).

Стъпка 7. Плъзгач за съдържание

Създайте селекция от 580x295 пиксела.

Попълнете селекцията с всеки нюанс на сивото.

Поставете изображението. Закрепете го със слоя, който сте създали по-рано.

Сега нека добавим ефект към плъзгача. Създайте нов слой (Shift + Ctrl + N), изберете Четка(Brush Tool) с диаметър 400 пиксела. Отворете палитрата Brush (F5) и задайте параметрите, показани на екранната снимка:

Изберете черно (# 000000) и нарисувайте петно:

Нанесете филтър, за да омекотите краищата. Гаусово размазване(Гаусово размазване).

Изберете долната половина на сянката и изтрийте (Изтрий).

Поставете слоя сянка над плъзгача:

Компресирайте слоя с сянка със средния маркер (Ctrl + T)и след това центрирайте отново слоя със сянката: изберете двата слоя и в панела със свойства щракнете върху бутона Хоризонтално централно подравняване(Подравнете хоризонталните центрове).

Дублирайте слоя сянка (Ctrl +J)и поставете дубликата в долния край на плъзгача.

Начертайте бутони на плъзгача с помощта на инструмента Правоъгълна площекскреции(Правоъгълен инструмент Marqee ) ... Напълнете бутоните с черно (# 000000).

Намалете непрозрачността на слоя с бутони до 50%.

Добавете форма на стрелка към бутоните на плъзгача:

В долната част на плъзгача нарисувайте ивица и я запълнете с черно (# 000000).

Намалете непрозрачността на слоя с ивици до 50%.

Добавете описание на вашия проект към тази лента:

Стъпка 8. Добавете поздравителния текст

Напишете поздравителен текст:

Стъпка 9. Завършване на работата по хедъра на сайта

Почти приключихме с хедъра на сайта. Добавете фина сянка с помощта на инструмента Четка(Четка).

Оставете 1 пиксел празнина между сянката и заглавието.

Създайте нов слой под заглавния слой (Shift +Ctrl +Н)и приложете градиент към него.

Стъпка 10. Добавете бутони за плъзгача

Начертайте бутоните за смяна на слайдове.

Добавете стил на слой към един бутон Вътрешна сянка(Вътрешна сянка) и след това дублирайте слоя с бутони толкова пъти, колкото е необходимо (Ctrl + J).

Стъпка 12. Създайте разделител на съдържанието

Използвайте инструмента Pencil Tool и нарисувайте светлосива (#aaaaaa) линия с ширина 1 пиксел.

Добавете маска към линейния слой и използвайте градиент, за да направите плавен преход в краищата.

Ако искате сами да създадете уеб страница, разберете как да направите уебсайт във Photoshop. - това е графичен редактор... В него можете да рисувате оформления и техните отделни елементи. Достатъчно дълъг е и труден процес... От години уеб дизайнерите се учат как да проектират шаблони и да създават уеб страници въз основа на тях. Но простото оформление може да бъде сглобено от всеки. Трябват ни само основни знанияФотошоп и фантазия.

Дори начинаещ може да нарисува прост дизайн на уебсайт във Photoshop

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

Обяснение на някои термини.

CSS (каскадни стилови таблици) и HTML (език за маркиране на хипертекст) - компютърни езицикоито се използват за създаване на уеб ресурси. Ако отворите източниквсяка страница в Интернет ще има HTML тагове.
Оформление - подреждане и инсталиране на материали от оформление, превръщайки го в html шаблон. Зависи от това как са разположени обектите, дали изглеждат красиво в цялостната композиция, дали е удобно да се чете текста и други подобни.
Слоевете са части от оформление. Заедно те изграждат голямата картина. Но те могат да се редактират и преместват отделно един от друг.
Тялото е там, където е съдържанието. Може да има фон около него.
Рамка (Frame) - елемент на страница. Блок с някаква информация, снимка, формуляр.

Само професионалист може да изгради зашеметяващ уебсайт от нулата. За да направите това, трябва да разбирате уеб дизайна и да знаете HTML. Защото готово оформлениевсе още е необходимо да се напише правилно.

Но има още прости начини... Има онлайн услуги и програми, които автоматично конвертират .psd (формат Photoshop файлове) в HTML и CSS. Просто трябва да сглобите шаблона правилно.

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

Общата информация за мрежовите услуги също е полезна. Сайтът може да се характеризира със следните критерии:

Една страница. Всички елементи, съдържание, цялото съдържание на ресурса е на едно място. На една страница. За да видите съдържанието на услугата, не е необходимо да следвате връзки или да отваряте нови раздели. Освен това самият сайт може да бъде толкова голям, колкото искате. Ще се побере както за малка рекламна брошура, така и за огромен роман от 600 листа.
Много страници. Съответно включва много страници. Това може да бъде например "Начало", "Форум", "Книга за гости", "Отговори на често задавани въпроси", "Контакти". За всеки от тях трябва да направите оформление. Ще ви трябва също навигация и карта на сайта: отделен раздел с връзки към всички части на услугата. Така че потребителят може бързо да намери отметката, от която се нуждае.
"Каучук". Преоразмерява се въз основа на разделителната способност на екрана. Разтяга се заедно с прозореца на браузъра. Необходимо е предварително да се изчисли как ще изглежда сайтът. Ако всичко се показва нормално на ширина 1300, тогава при 900 пиксела част от статията може да "напусне" рамката, изображенията няма да стоят както трябва и флаш анимацията ще затвори формата за въвеждане.
Фиксирана. Тялото на сайта не променя размера си. Най-лесният и практичен вариант. За да направите страницата да изглежда солидна и при разширяване на прозореца нямаше "празно" пространство около краищата, можете да направите фона гумен.

Оформление

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

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

Създайте нов документ (Файл - Нов). Размерите се избират, като се вземат предвид малки монитори или ниска разделителна способност: 1024 × 720 пиксела. Това е ширината на "информационната" част, а не на цялата картина. Ако искате страница от 1100 пиксела, тогава трябва да направите документ с ширина от 1300 пиксела или повече. Дължината всъщност не е фиксирана - зависи от това колко съдържание искате да поставите в ресурса. Това са насоки, а не правила. Можете да съставите голямо оформление, ако желаете.
Включете линийките. Натиснете Ctrl + R или отидете на View - Rulers. Това е измервателна скала. Тя се появява извън чертежа. Без него ще трябва да разберете размерите и разстоянията "на око", което няма да има много добър ефект върху крайния резултат. Можете да конфигурирате тази функция в менюто Редактиране - Настройки - Единици и линийки. Там е по-добре да промените сантиметрите в пиксели, за да работите с един параметър, а не да изчислявате колко точки са в един инч.
Трябва също да активирате мрежата. Изглед - Покажи - Решетка или Ctrl + E (можете също да го изключите). Това е един вид аналог на тетрадка в клетка. Photoshop ще покаже вертикални и хоризонтални линии... Те няма да се появят на самия чертеж. Те могат да се видят само при редактиране. Тази функция е необходима за равномерно подреждане на елементите на шаблона. Някои хора намират за по-удобно да работят с решетка, други без нея. Най-добре е да го активирате, ако правите уебсайт за първи път.
За да го персонализирате, отидете на Edit - Preferences - Guides, Grid & Slices. Там можете да изберете размера на клетките, както и цвета и вида на линиите (плътни, пунктирани, пунктирани).

Инсталирайте водачите. Между тях ще бъде основният ресурс за съдържание - фиксираното тяло на сайта. А зад тях е гумен фон. За да направите това, щракнете върху Преглед - Ново ръководство. В блока "Ориентация" отметнете елемента "Вертикален". В полето "Позиция" напишете колко далеч от левия ръб ще бъде обектът. Използвайте линийката, за да ви напътства.
Нуждаем се от два водача - отдясно и отляво на тялото на страницата. Разстоянието между тях трябва да бъде максимум 1003 пиксела за дисплеи с резолюция 1024 × 720. Можете да посочите различна ширина. Но големите ресурси са неудобни за гледане на малки монитори.
Защо 1003, а не 1024? Ако сайтът трябва да превърта („превъртане“) надолу, браузърът ще има вертикален плъзгач за превъртане. Този плъзгач е с размер приблизително 21 пиксела. Ако не го вземете под внимание, ще се появи хоризонтално превъртане... И посетителят на ресурса ще трябва да премести страницата наляво и надясно, за да види цялата информация.
Тялото трябва да е в центъра на платното.

Това са подготвителните етапи на работа. Как да проектирате оформление във Photoshop зависи от вашето въображение и вкус. Следователно по-нататък ще има само общи препоръки от техническо естество.

Първо, вашето оформление се нуждае от фон. Можете да го направите сами или да го изтеглите от нета. Има много ресурси за безплатни текстури. Не публикувайте изображения, които са обект на авторски права на сайта. Не вземайте ярък или контрастен фон. По-добре е да не използвате текстури с много малки детайли, които се открояват. Те ще отклонят вниманието на посетителя от тялото на страницата.
Ако просто отворите снимката във Photoshop, тя ще се появи в нов раздел и няма да бъде добавена към оформлението. Изберете целия фон. За да направите това, имате нужда от клавишната комбинация Ctrl + A или инструмента "Избор" (разположен в левия панел). Копирайте го и го поставете в шаблона.
Тази опция е достъпна и като щракнете върху Редактиране - Вмъкване.

Нов слой ще се появи в списъка долу вдясно. Кликнете върху него с десния бутон на мишката, за да видите възможните действия. Можете да промените името на слой в менюто Опции на слоя. Опциите за смесване съдържат основните настройки за изображението. Можете да го направите светещ, релеф, блясък, щрих, градиент. Ако изберете опция, промените веднага ще се появят във Photoshop. Има набор от готови стилове. Така се създават оригинални дизайнерски решения от стандартната текстура. И не е нужно да рисувате нищо допълнително.
Бутонът Филтри е в лентата с менюта. Там ще намерите разнообразие от имитации (пастели, акварели, моливи), стилизации, текстури, скици, акценти, размазване.
Може да избира обикновен фон... Цветът зависи от личните ви предпочитания. Но най-добре е да не го правите черен или отровен. Легло и меки цветове или прозрачни студени (например светло сиво, бледо синьо) ще направят.
След текстурите можете да съберете самия сайт. Тук ви се дава свободата да творите.
За да добавите фигура (сегмент, квадрат, овал), кликнете върху съответния бутон вдясно. Той ще има формата и името на обекта, който е в този моментизбрани за рисуване. Например "Инструмент за елипса", "Инструмент за многоъгълник". Във Photoshop броят на формите е ограничен. Но те могат да бъдат намерени в Интернет, изтеглени и инсталирани чрез менюто Edit - Manage Sets. В полето "Тип" посочете колекцията от обекти, които зареждате.
V различни версиипрограмите наричат тези форми по различни начини. Или бутон под формата на малък черен триъгълник (той е вдясно), или икона под формата на зъбно колело, или елемент "Форма на растерна точка" (той е под лентата с менюта). Обектите могат да бъдат комбинирани, групирани и съставени в композиции.
За да създадете текстова рамка, щракнете върху бутона във формуляра Главна буква"T". След това изберете мястото, където трябва да се намират символите, щракнете там и въведете това, от което се нуждаете.
По-добре е да поставите всеки елемент на отделен слой. Това ще направи по-удобно преместването и редактирането без „докосване“ на целия сайт. За да добавите този обект, отидете на Слоеве - Нов.

За да проектирате изображение в предварително избрана област, първо го изберете и след това отворете Редактиране - Залепете специално... Ще има опции „Постави вместо“ и „Постави отвън“.
Можете да прехвърлите част от една картина на нов слой. За да направите това, изберете го, щракнете с десния бутон върху него и изберете "Cut to New Layer".
Формите, текстовите полета и изображенията имат същите опции като фоновете: ефекти, филтри и т.н.
Във Photoshop има много повече инструменти за рисуване: четки, химикалки, моливи.

Можете да направите качествен ресурс дори от прости геометрични обекти.

Ресурсите съществуват с безплатни оформления... Заредете ги във Photoshop и редактирайте, ако е необходимо. Това е по-лесно и по-бързо, отколкото да рисувате от нулата.

Как да превърна оформлението в html файл?

Разбрахте как да създадете уебсайт във Photoshop и проектирате първото си оформление. Какво да правя с него по-нататък? В крайна сметка не може просто да се качи на хостинга.

Можете да го дадете на дизайнер на оформление, който ще създаде висококачествен html шаблон. Но има и друг вариант. Използвайте услуги за конвертиране на PSD файл в HTML и CSS.

Psd2Html конвертор. Платена онлайн услуга. Преобразува бързо Photoshop форматв шаблон на уеб страница. С този ресурс, дори и от нискокачествено оформление, можете да създадете приличен сайт.
PSDCenter
Надценка от 40 долара.

Конструктори

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

В този урок ще научим как да създадем минимално оформление на блог с помощта на new Технология Photoshop... Новите възможности за създаване и запазване на стилове ще ни помогнат в това.Стилове на символи и стилове на абзаци.

Нека видим какво ще създадем в този урок.

За да завършите този урок, ще ви трябват следните ресурси:

Безплатен шрифт Безплатен шрифт Sansation.
Текстура 26 Повтарящ се пикселен модел
Набор безплатни икони за социални медии
Икона на курсора за ръка
Сток изображение Сток-фото: Harvest 1
Сток изображение Сток-фото: New York Streets 3
Стокова снимка Сток-фото: Daisy Age
Сток изображение Сток-фото: A tree on the horizon
Сток изображение Сток-фото: Sales figures
Стоковое изображение Сток-фото: Time is Money!

Подготовка на платното

Етап 1

В този урок ще използваме рамката 960 GS ... Необходимо с изтеглете шаблона от главната му страница и намерете файла в архива„Решетка с 12 колони“.

Щракнете върху миниатюрата на окото до слоя 12 Col Grid, за да го скриете - докато не се нуждаем от него.

Стъпка 2

Засега размерът на нашето платно е достатъчно малък. Натиснете Изображение> Размер на платното(или Ctrl + Alt + C), за да направите размера малко по-голям и да зададете точката на закрепване в центъра.

Стъпка 3

Кликнете върху Ctrl + Рда покажа владетеля.Кликнете върхуПреглед> НовРъководство за създаване на нова насока.Моля изберете Вертикалнаи позиция: 185 пиксела за да създадете вертикален водач, който ще бъде изместен на 185 px от левия ръб.

Стъпка 4

Създайте повече вертикални водачи на разстояние от150 , 1095 и 1130 ppi .

Подготовка на цветна тема

Стъпка 5

В нашия дизайн ще използваме следната цветова комбинация - Colorlouver ... Щракнете върху изображението, за да отворите цветовата комбинация и да запишете като JPEG.

Поставете цветовата схема във файла на Photoshop.Поставяйки изображения директно в нашия шаблон, ще бъде много по-бърз и по-лесен достъп до него.

Подготовка на фона

Стъпка 6

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

Използвайте капкомер, за да изберете втория цвят от нашия цветова схема (# 948371) .

Стъпка 7

Начертайте правоъгълна форма в горната част на платното.Това ще бъде вторият фон.

Стъпка 8

Изберете създадената форма и отидете на лентата с опции. отвори Напълнете Цвяти щракнете върху иконата за избор на цвят. Когато се появи диалоговият прозорец Color Picker, изберете първия цвят. В полето Ударизбирам Нито един

Стъпка 9

Създайте нов слой и използвайте инструмента Rectangular Marquee Tool, за да изберете горния правоъгълник. Активирайте инструмента градиентно запълванеи попълнете селекцията радиален градиентот бяло до черно.

Променете го режим Смесете режимНа Екрани намалете непрозрачността Непрозрачностпреди 37% .

Стъпка 10

Създайте нов слой и го наречете "сянка".

Начертайте правоъгълна селекция в долната част на втория фон, както е показано на изображението по-долу. Кликнете върху Редактиране: Попълнете ... Инсталирай Използвайте - Черен ... Кликнете върху Добреза да запълни селекцията с черно.

Стъпка 11

Размийте го с Gaussian Blur.Кликнете върхуFilter> Blur> Gaussian Blur .

Стъпка 12

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

Стъпка 13

Променете непрозрачността на сянкатаНепрозрачностпреди 50% . По-долу можете да видите резултата при 100% увеличение.

Стъпка 14

Време е да поставите всички слоеве в една група. За да направите това, изберете всички слоеве и натиснете Ctrl + G.

Заглавие

Стъпка 15

Начертайте правоъгълник в горната част на платното, както е показано.

Стъпка 16

В панела Лента с опции, задайте цвят Удар - # af9f8e .

Стъпка 17

За пълнене изберете следните цветове на линеен градиент - от# d0c4b9Да се # a89c91.

Име на сайта

Стъпка 18

От лявата страна на шаблона добавете името на нашия сайт. Моля, имайте предвид, че разположението съответства на снимката по-долу. Щракнете двукратно върху текста и добаветеКапка сянка... Шрифтът е използван в урока.Сансация.

Активирайте инструмента Полигон и задайте броя на страните на 3 . Начертайте триъгълник с цвят на запълванеПопълване: # 3d3123и стойността на ходаУдар: Нито един. Добавете сянка към слоя -Стил на слоя> Падаща сянка .

Стъпка 22

Да подчертаем активен бутонменю.АктивиратеИнструмент за линия и задайте размера му на тегло -5 пиксела... Изберете цвят# f76b6aи линията не трябва да е без щрих.

Поставете линия под активно менюи добавете 1 пиксел разстояния между линията и правоъгълника.

Използване на стилове на знаци

Стъпка 23

Нека запазим настройките за стил за текста. Това е нещо подобно на опростена версия на стиловете на знаците в InDesign. За да ги запазите, трябва да активирате текста и след това да кликнете върху иконата "Нов стил на символа".

Кликнете два пъти върху нов стили изберете следните настройки.

Стъпка 24

Изберете следващия елемент от менюто и след това натиснете бутона Character Style, за да приложите настройките за стил.Ако намерите знак плюс до стиловете, това означава, че имат различни настройки.

Стъпка 25

Повторете предишна стъпказа да приложите създадения стил към активното меню.

Стъпка 26

И така, какво е предимството от използването на стилове на герои? Те ще ни помогнат да централизираме текстовите настройки. Можем просто да променим стила на знаците, за да редактираме всеки текст. Например, ако промените стила Горно меню - НормалноНа Корбел,всички елементи от менюто автоматично ще се променят на Corbel.

Стъпка 27

Създайте нов слой и го поставете под елементите от менюто. Кликнете върхуCtrl и щракнете върхуменю, за да направите следващия избор.Напълни гочерен.

Стъпка 28

Премахнете селекцията, като натиснетеCtrl + Д.Замъглявайте черната зона, като приложите филтърFilter> Blur> Gaussian Blur .

Плъзгач

Стъпка 29

Начертайте правоъгълна форма, всяка колона широка (вижте по-долу).

За цвят на запълване изберете # dfd1c2... Цвят Удар - # c8baac,размерът 10 т. Щракнете върху малката стрелка до реда, за да се уверите, че опцията е избрана Подравнете отвътре.

Стъпка 30

Поставете изображението, както е показано на снимката по-долу. Преобразувайте го вИзрязваща маска чрез щракване Ctrl + Alt + Г . Изображението автоматично ще бъде поставено в блока на плъзгача. Ако е необходимо, можете да преоразмерите и да го преместите, без да засягате по никакъв начин рамката му.

Стъпка 31

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

Създаване на оформления на сайта: забавление за елита Разработване на оформление на сайта: етапи Метод номер 1. Изрязване на оформление от шаблон на сайт Метод № 2. Създаване на оформление на уебсайт в почти Photoshop Метод #3. Онлайн инструмент за оформление

Първо, помислете за защо решихте сами да създадете оформление на уебсайт... Тази работа изисква многостранни познания от човек. в IT и дизайн, аналитично и творческо мислене едновременно. А също и част от вашето време. Добре, има 4 причини, поради които може да се нуждаете от това. Ако вашият е различен - пишете в коментарите, ще добавя.

Създаване на оформление на уебсайт: забавление за елита

Причина №1. Интерес към разработване на оформления на сайтове

Много ли са специфични интересите ви? Ние сме тук ние не обвиняваме никого... Едно време стана интересно за нас и те започнаха да го правят! Освен това жаждата за знания е наш отличителен белег. Възхвалявам вашето любопитство.

Причина № 2. Изработка на оформление на уебсайт като вид печалба

Ако искате да станете уеб дизайнер в бъдеще, трябва да започнеш отнякъде, а именно от елементарното оформление на страницата на сайта. Бързият резултат от вашата работа мотивира като нищо друго. За щастие в статията само предлагам блиц начини за създаване на оформление.

Между другото, работата на уеб дизайнер не е шега. Тук по-долу просто ще оставя графика на заплатите в зависимост от трудовия стаж (по данни на DOU за май-юни 2016 г.). Нищо не намеквам. Просто скрит лов.

Причина №3. Изготвяне на техническо задание за изработка на оформление на уеб сайт за дизайнер

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

Също така е удобно да използвате приложението Coggleкоито можете да свържете Да сеGoogleКарай.

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

На първия етап от проектиране на оформлението се създава мисловна карта на сайта.

Етап 2: Създаване на прототип на уебсайт

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

Изморен ли си? Улеснете живота и поръчайте изработка на уеб сайт в КОЛОРО.Ние ще вземем предвид вашите желания и ще получите точно това, което сте искали.

Прототипи на уебсайтове онлайн

Обикновено използвам два от най-популярните онлайн инструменти за прототипиране на сайтове: Moqups и Mockflow. И в двата случая има възможността за създаване на прототипи безплатно, но с ограничена функционалност. Цените на първия сайт започват от $ 13 / месец. (10 проекта, 1 GB), а за втория - от $ 14 / месец. (неограничен брой проекти + 25 GB в облака). Всички останали препоръчват Mockingbird. И аз ще препоръчам, но само от уважение към Еминем, защото тук 3 проекта ще ви струват 12 $ / месец, а има по-малко безплатни инструменти.

Сега за личното впечатление. Мокупидори по-удобен и интуитивен от първото посещение... Тук има много готови блокове и икони - точно това, от което се нуждаете, за да преминете бързо през етапа на прототипиране. Освен това артикулите са удобни центърспрямо средата на страницата или други елементи. Това пречи ограничениев 300 обекта за страница в безплатен режим- може да не е достатъчно за едностранно оформление на уебсайт. Възможно е вмъкване на елементи от работната рамка на Bootstrap. Mockflowви позволява да правите малко по-малко и трябва да го разберете за няколко минути и свиквам сна него обаче голямо количество дисково пространствоможе да привлече някого.

Прототипи на сайтове в Moqups и Mockflow

Как да направите прототип на бъдещ сайт?

Нека да разгледаме примера на Moqups как да направите прототип на страницас текст за блог.

Стъпка 1. Добавете шапка(текстът може да бъде променен).

Стъпка 2. Добавете блокза картината и надписа (заглавие на статията). Стиловете ви позволяват удобно да променяте размера, шрифта и друго форматиране на текст.

Стъпка 3. Добавете тексти задайте ширинаколони. Всички блокове са удобно центрирани спрямо средата на страницата.

Стъпка 4. Текстът трябва да бъде разделен картина... И ширината на колоната е твърде голяма, 500px би било по-добре. За щастие можете бързо да го промените. Голям плюс: избраните елементи се свиват един спрямо друг и моят блок с картината също се сви.

Стъпка 5. Добавете странична лента(странична лента), тук ще бъде лесно. Нека поставим полето за Търсенеи блокирайте за абонаментикъм бюлетина (с атрактивна картинка и ярък бутон).

Стъпка 6. Да кажем, че нашата статия е толкова малка. Можете също да добавите изследванеи рейтингстатии. Резултатът е чист прототип за страница в блог. Добавете други елементи по ваш вкус.

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

Прототип на приложение за смартфон

Етап 3: Създаване на красиво оформление на уебсайт: избор на цвят

Изборът на цветове зависи от възприятие на сайтаи марка потребители... Не ви съветвам да разчитате на себе си – изборът на правилния нюанс може да отнеме часове. Затова препоръчвам да използвате готови цветови палитри за мрежата... Google наскоро пусна подробно ръководство за добри цветове за материален дизайн(тенденция в уеб дизайна). Тези цветове се съчетават хармонично и можете да сте сигурни в тяхната привлекателност. Използвайки Materialpalette, можете успешно да изберете два цвята - основния и акцента, както и да видите как ще изглеждат в интерфейса. Малко повече цветове в Material Design Colors.

Изпратете вашия сайт? Направихте ли прототип? Избрахте ли цветове? Сега можете да преминете към създаването на самото оформление. Предлагам ви няколко начина.

Внимание! Няма да има съвети как да направите оформление на уебсайт във Photoshop - това е тема за отделна статия, ето по-прости начини.

Метод номер 1. Изрязване на оформление от шаблон на уебсайт

или съществуващи сайтове

Този метод ще ви подхожда, ако искате:

подреди основни инструменти Photoshop;
намерете различни препраткиза вашия бъдещ сайт и ги съберете заедно;
усеща се като дизайнер за няколко часа;
да демонстрира на уеб дизайнер или агенция (например на нас :) най подробна визия на сайта;
подсилват TKда разработи сайт не само "тук има бутони за повикване, но тук има разделител и лидомагнит."

Предимствата на този подход за разработване на оформление:

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

минуси:

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

Как се прави

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

Ако го направиш "Яхния" от различни сайтове, не забравяйте да пишете с молив някъде в тетрадката изходни кодове... Това ще опрости по-нататъшното развитие на дизайна и оформлението.

Оформление на уебсайтове за Wordpress

Повечето популярен CMSе Wordpress. Например, ще намерите много съвременни шаблони за тази CMS. За какво? Уебсайт по шаблон ускорява стартирането на проекта в пътиобаче няма да е уникално. Въпреки че, ако използвате оригинални илюстрации, изображения и творчески подход - дори оформлението на шаблона може да бъде променено до неузнаваемост... Основното предимство е, че вашият сайт е гарантирано отзивчив и като цяло красив по отношение на показване на различни устройства.

Преглед различни шаблонии изберете този, който ви харесва най-много. Потърсих още малко в Envato Market и намерих шаблона Dalton, който ми хареса най-много. Като отидете на демо версияшаблон, веднага ще видите концепцията на корпоративния уебсайт. Като щракнете върху менюто, можете да видите повече подробно какви функции има шаблонъткак ще изглеждат различни страници... Най-добре е да отделите половин час на това и как да разберете какво има в шаблона.

Какво следва? Избираме размера на оформлението на сайта, изрязваме и залепваме

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

Ще имаш нужда:

удобно инструмент за правене на моментна снимка на избрана област(инструмент за заснемане на екрана) Използвам Lightshot - предлага да запазя изображението в отделен файлили го копира в клипборда;
Photoshop- за залепване на изрязани части от изображения.

Стъпки за създаване на оформление за сайт на базата на шаблон

Стъпка 1. Избор на ширината на оформлението на сайта

Решете коя страница искате да направите първа. Не започвайте с основния - по-добре го оставите най-накрая, т.к това е най-много важна страницасайт и първо малко по-добре напълнете ръката си... В примера ще направя страница "За нас" - тук ще бъде интересна информацияза компанията и нейните служители. вече го имам прототип на сайтатака че знам какво правя. Между другото, как върви вашият прототип?

Отворете Photoshop и задайте ширината на оформлението на сайта 1920 пиксела. Ще е достатъчно да се види как ще изглежда сайтът в браузъра.Ако имате по-ниска разделителна способност, задайте ширината, която мониторът позволява. Все още не се притеснявайте за височината - трудно е да се отгатне и все пак трябва да разтегнете/стеснете зоната.

Стъпка 2. Продължаваме да създаваме оформление на уебсайт във Photoshop

Вземете в шаблона такива шапкакоито харесвате. Отрязвамнея с помощта удобен инструмент, отворете документа във Photoshop и вмъкнететам (Ctrl + V). Използвайте Move Tool (V), за да поставите капачката отгоре. Харесва ми заглавието с горната лента, където има Информация за връзказа компанията.

Стъпка 2.A. Направете веднага правилното оформление на уебсайта

Сега имате два начина - променете текста в изображението или пишете придружаващ текст v текстов файл... Кое е по-удобно? Всичко зависи от вашите цели. От личен опит мога да кажа, че е по-добре да направите това в оформление, веднага избор на шрифт и размери... По-безопасно е и WYSIWYG в действие (това, което виждате, е това, което получавате).

Стъпка 3. Вървим към успеха

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

Какво стана

След няколко минути мислене, изрязване и залепване на парчетата, които ми харесаха най-много, получих структурирано оформление на страницата"За нас"

Какво не трябва да забравяте

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

Метод номер 2. Създаването на оформление на уебсайт във Photoshop е почти

За теб начинът е подходящ№ 2, ако:

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

Препоръчвам страхотния безплатен инструмент за оформление на ара. За да работите с програмата, трябва изтеглете и инсталирайте- въпрос на няколко минути. Програмата може да бъде в визуален режим практически настройте оформлението, защото можете веднага да го публикувате и да видите HTML и CSS. Малко по-подробно как работи програмата. Ара има значителен недостатък - създава неадаптивна уеб страница.Как да се справим с това? Тук са необходими умения дизайнер на оформлениеза да свържете рамката (например, ако направите оформление на сайт за Bootstrap). Въпреки това, ако просто трябва да покажете работно оформлениеколеги - Ара е перфектен.

Ето как изглежда неотзивчив шаблон на различни устройства. Аз искам да плача

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

Можете самостоятелно да зададете ширината на колоните, техния брой и разстоянието между тях. Ако искаш елементите "залепнали" един за друг, задайте ширината на колоната на 100% и премахнете подпълването между тях. Защо имате нужда от тази мрежа? В HTML оформлениеоформлението на сайта ще бъде по-лесно да направите адаптивен шаблонот модерните рамки използват точно 12-колонната мрежа.

Можете да промените ширината на сцената, като я плъзнете отдясно или като зададете размера сами

Какво следва? Ние се макетираме

Персонализирайте работна средакакто ви е удобно и да се захващаме за работа. Ще създам същата страница, която изрязах от шаблона на Dalton.

Етап 1.

Първо трябва да създадете шапка... Това ще контейнерс височина 100 px и долна граница, с дебелина 1 px.

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

Стъпка 2

С готова шапкаможете да продължите към останалите блокове. В следващия блок ще имам заден планкоето е необходимо изтеглете отделно.

Стъпка 3. Създайте интерактивно оформление на уебсайт

Продължавам да плъзгам блоковете и да поставям текста в тях. Създавам бутон с помощта на специален инструмент « Бутон"(Логика!). Ара ви позволява да създадете интерактивно оформление с различни държавибутони и възможност за превключване между страници.

Обърнете внимание на следните подчертани елементи. Те ви помагат да превключвате между различни блокове и да ги организирате. Например, текстът трябва да е в конкретен контейнер, а не просто да се мотаете.

Ако натиснете Файл ->Публикувайте, ще получите готова страница, в която можете да видите HTML-код и CSS различни раздели... Това е страхотно, ако искате да видите как изглежда маркировката.

Какво стана

Оказа се нещо подобно. Ето за сравнение, налявозалепени парчета от редактирания шаблон, на дясно- оформление, създадено в Macaw. Голям плюс на програмата е, че можете да вмъквате бутони, да добавяте връзки към тях, да създавате различни страници и да навигирате между тях. Просто не забравяйте за йерархии на контейнерии не се губете в тях.

Характеристики на този метод за създаване на оформление на уебсайт:

да разбера тънкости на работапрограми, трябва да отделите допълнително време;
дори когато вече съм се задълбочил в програмата, пак понякога не е ясно защо се държи така, а не иначе;
можете да забравите за адаптивността, ако не го завършите сами;
наистина ли удобно за създаване на оформлениеи дори да разберете малко оформлението - можете да видите как взаимодействат елементите и като цяло каква структура;
неща като "ширина: 16,6666666666%" може да се появят в стилове, които ще трябва да се коригира; просто трябва да разберете, че това е WYSIWG, не повече.

Метод номер 3. Онлайн инструмент за оформление

Ако търсите опция как да създадете оформление на сайтав приложение с най-простият и интуитивен интерфейс, подготвих този метод специално за вас.

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

Все още тук удобен за редактиране на елементи, добавете текст (и дори направете бутони с връзки!). Като цяло, само за няколко минути вече получих същото като в Ара, само по-точно... Такова оформление обаче не може да се направи силно интерактивно. Няма да има стъпки към този метод, защото услугата е много интуитивна. На екрана се опитах да покажа колкото е възможно повече възможности за обслужване.

Характеристики на услугата Creately

Това е всичко. Това бяха пътищата, до които стигнах на един или друг етап от моето творческо развитие. Ако намерите полезни в този материал - ние се радваме.

P.S. Тази статия е само за насоки и няма да ви позволи да станете уеб дизайнер. За сериозни познания ще трябва да се ровите много в интернет.