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

В Photoshop да се направи просто дизайн на сайта дори новак може

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

Малко за създаването на сайтове

Декодиране на някои термини.

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

Направете зашеметяващ сайт от нулата само професионално. За да направите това, трябва да разберете уеб дизайна и да знаете HTML. Тъй като завършеното оформление трябва все още компетентно да наложи.

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

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

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

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

оформление

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

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

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

Пример за модерен дизайн на сайта

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

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

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

• Нов слой ще се появи в списъка в долния десен ъгъл. Кликнете с него с десния бутон на мишката, за да видите възможните действия. В менюто "Layer Options" можете да промените името му. В "Настройки за наслагване" са основните настройки на изображението. Можете да я накарате да свети, релеф, блясък, удар, наклон. Ако изберете опция, промените ще се появят незабавно в Photoshop. Има набор от готови стилове. Така от стандартната текстура се създават оригинални дизайнерски решения. И не правете нищо допълнително.
• Бутонът "Филтри" е в лентата с менюта. Там ще намерите разнообразие от имитации (пастелни, акварелни, моливи), стайлинг, текстури, скици, акценти, размазване.
• Можете да изберете обикновен фон. Цветът зависи от вашите лични предпочитания. Но е по-добре да не я правят черна или отровна. Подходящи легла и меки тонове или прозрачен студ (например светло сиво, бледо синьо).
• След текстурите можете да съберете самия сайт. Тук имате свободата да създавате.
• За да добавите някаква форма (линия, квадрат, овал), кликнете върху съответния бутон вдясно. Той ще има вида и името на обекта, който е избран за чертеж. Например „Инструмент за елипса“, „Инструмент за многоъгълници“. В Photoshop броят на формите е ограничен. Но те могат да бъдат намерени в Интернет, изтеглени и инсталирани чрез менюто Edit - Set Management. В полето Type задайте коя колекция от обекти, които зареждате.
• В различните версии на програмата тези цифри се наричат ​​по различен начин. Или чрез бутон под формата на малък черен триъгълник (той е отдясно), или с икона на зъбно колело, или с елемент „Форма на точка” (той е под лентата на менюто). Обектите могат да се комбинират, групират, правят композиции от тях.
• За да създадете текстова рамка, кликнете върху бутона под формата на главна буква "T". След това изберете мястото, където трябва да се намират символите, щракнете там и напишете това, което ви трябва.
• Всеки елемент е по-добре да се постави на отделен слой. Така че ще бъде по-удобно да се движат и редактират, без да "докосвате" целия сайт. За да добавите този обект, отворете Layers - New.

• За да проектирате изображение в предварително избрана област, първо го изберете и отворете Edit - Paste Special. Ще има опции „Вмъкни вместо“ и „Вмъкни отвън“.
• Можете да прехвърлите част от една картина на нов слой. За да направите това, изберете го, щракнете с десния бутон върху него и изберете "Изрежи на нов слой".
• С форми, надписи и изображения са достъпни същите опции, както при фона: ефекти, филтри и т.н.
• В Photoshop все още има много инструменти за рисуване: четки, химикалки, моливи.

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

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

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

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

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

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

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

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

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