Как да нарисувате шаблон за уебсайт

Съдържание:

Как да нарисувате шаблон за уебсайт
Как да нарисувате шаблон за уебсайт

Видео: Как да нарисувате шаблон за уебсайт

Видео: Как да нарисувате шаблон за уебсайт
Видео: Как да нарисувате Смърфа Футболист • Смърфовете 2024, Декември
Anonim

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

Как да нарисувате шаблон за уебсайт
Как да нарисувате шаблон за уебсайт

Необходимо е

Програма Adobe Photoshop

Инструкции

Етап 1

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

Стъпка 2

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

Стъпка 3

Стартирайте Photoshop, създайте нов проект 1200x1600, задайте прозрачен фон. Включете инструмента Ruler, ако вече не е включен, за да направите това, натиснете комбинацията от клавиши Ctrl + R. Активиране на щракване: Изглед - Прихващане.

Стъпка 4

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

Стъпка 5

Намерете фон за вашия шаблон, той трябва да бъде малък, повтарящ се шаблон. Отворете го в Photoshop, изберете, копирайте. След това поставете в шаблона толкова пъти, колкото е необходимо, за да го запълните с фона. Поставянето се извършва по следния начин: „Редактиране“- „Поставяне“и след това плъзнете областта на фона до желаното място. Още по-бързо е да вмъкнете изображение, като използвате командата Ctrl + V. По същия начин добавете фон за заглавката на сайта. Можете да използвате различни градиентни запълвания, за да създадете фон.

Стъпка 6

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

Стъпка 7

Шаблонът е създаден, сега трябва да го нарежете на парчета, за да ги вмъкнете в HTML страницата. Използвайте Slice Tool за изрязване. За да го намерите, щракнете с десния бутон на мишката върху инструмента Frame и изберете Cutout от менюто, което се отваря. Сега можете да вложите шаблона по желание, след което да запазите: „Файл“- „Запазване за мрежата“. В прозореца, който се отваря, изберете типа на файла: HTML & images, посочете името на файла: index.htm и го запазете. Ще имате файл index.htm и папка с изображения с нарязани изображения.

Препоръчано: