ПредишенСледващото

Имате ли уеб сайт, но само бутоните с перлата? Не? Е, тогава ще се търсят. Не е да отида и да не се наложи да потърсите "износена" портал на мрежата, направи си сам "на шиене". Но първо трябва да се създаде оформление на сайта.

Какво оформлението на сайта си?

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

В повечето случаи, основните контроли, тяхната дизайн и стил са едни и същи за всички страници. Но в основата на целия стил дизайн е на главната страница на сайта. Ето защо, най-често се отнася до развитието на оформлението на началната страница. Беше й стил и дизайн елементи наследяват всички останали раздели на портала.

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

Големите студиа в създаването и одобряването на художника, като част от оформлението. Условия за възможности за развитие на миниатюрата и броя, определен от ръководителя на проекта с клиента в ранните етапи на развитие.

Готов и одобрена версия на оформлението е прехвърлено на печатар. На нейна основа, HTML -verstalschik "разфасовки" на скицата по оформлението и произвежда части с помощта на хипертекст езикови маркери.

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

Характеристики на оформлението на интернет портала за

Графичен скица на мрежовите ресурси трябва да притежава следните качества:

5) Не може да се използва като субстрат обемисти фонови изображения - те са много по-тежка от цялата страница, и увеличава времето, когато е зареден.
6) Изравнете позицията на всички слоеве трябва да се извършва само с помощта на специални водачи.
7) При прилагането на етикети в оформлението на сайта в Photoshop, ще трябва да използвате стандартните комплекти шрифтове. отделни изображения трябва да се използват за нарушаване на текстови ефекти.
8) Когато формулярът се показва елементи трябва да се опитате да се придържате към стандартните си размери.
9) Голям брой елементи на "хардуер" прозорец (бутони, икони) са поставени в отделен файл, прикачен към модела.
10) Плъзгащи се и падащи списъци и менюта трябва да бъдат представени в две състояния (затворена и разширени).

Сега, че сте прочели, така че трябва да изглежда като истински СДП оформление сайт, за да се прояви.

Пример за създаване на оформление сайт

Първо трябва да се определи разположението на един основни единици на страници. Те включват:

  • Cap - в горната част. Най-често се поставя върху него логото и името на обекта;
  • Меню - съдържа множество активни елементи или бутони за навигация чрез страниците на обекта;
  • високоговорителите на ляво и дясно;
  • Сутерен - в долната част на уебсайтът страница.

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

Важно е също така да се определи размера на оформлението на сайта в Photoshop.

Така например, в спецификацията се посочва, че той ще бъде един портал с фиксирана ширина и гумени страни средата. Въз основа на минималната резолюцията на индекс екран (1024 х 768 пиксела), направете оформлението на ширината 1003 на пиксела. Останалата част (21 пиксела) ще се използва за превъртане площ (превъртане). В гумени маргиналиите определен 100 пиксела. Височината зависи от оформлението на определен размерите на елементите на дизайна. Средната продължителност на 500-600 пиксела.

И сега започва забавно:

1. Създаване на нов файл и да зададете размера на бъдещата оформление. За да направите това, отидете в менюто "Файл" - "Нова". В прозореца, който се появява, задайте името на размер и файл:

2. След това се създаде сайт оформление фон. В лентата с инструменти изберете инструмента "Gradient". сет панел тип и цвят, и извършване на градиент по повърхността. Ето какво се случи:

3. Маркирайте оформление на повърхността чрез водачи. Първо, направете оформлението основния оформление елементи (шапки, мазе, менюта и страна):

4. Осъществяване PSD оформление уебсайт започне с капачки.

  • Изберете област под името на сайта с помощта на функцията "Rectangular Marquee";
  • След това направете зоната за пълнене граничи градиент;
  • Tool "Текст" ще се постави името на сайта:
  • След това се прилага за всеки текстов слой ефект "за увеличаване на височината". В горния десен ъгъл има снимка на логото на сайта, като копирате слоя от друго изображение.
  • Ето една снимка на готовата дизайн оформление капачки. За бързо редактиране на някой от елементите е важно да се спазва йерархията на вложени слоеве. Важно е също така да се даде смислени имена на всеки от слоевете.

    За да групирате слоеве, да създадете папка, за да ги приюти. дъното "Слоеве" панел, за да направите това, кликнете върху иконата на папка. Групиране елемент се осъществява чрез плъзгане слоевете на желаното място:

    5. Създаване на оформлението на сайта ще продължи да се изработи лентата с менюта, намиращ се точно под капачката.

    • Създаване на празен бутон меню в отделен файл. Съхранявайте го в PSD формат. Тя ще дойде по-удобно в бъдеще:

    И двете странични стени ще имат един и същи цвят и модел. Те се прилагат с инструмент "Правоъгълна селекция" и наклон. За всяка от страничните стени, както и за всеки елемент, създаване на слой:

    7. Сега за дъното на PSD уебсайтът. За разлика от страничните панели го правят чрез инструмента "Запълване" и след това трябва да завършат някоя от филтри (на елемент от менюто "Филтър"):

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

    Разбира се, този пример не претендира да бъде най-добрият.

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

    Какво се случва след това с оформлението на един сайт

    И тогава от това графично представяне на дизайна прави оформлението на програмист HTML сайт. В същото време запазва всички пропорции на елементи и части на сайта.

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

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

    Или може би просто HTML?

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

    Свързани статии

    Подкрепете проекта - споделете линка, благодаря!