Създаване на сайт с Photoshop,ImageReady и други

Сега ще ви покажа как с помоща на няколко програмки можете да си направите добър сайт (Това което се вижда на картинките е само примерен изглед на сайта който правите, вие можете да си го променяте както искате, принципа е един и същ)

Какво ще ни трябва:
1.Photoshop (аз ползвам CS2)
2.ImageReady
3.Microsoft FrontPage или Dreamweaver ( или който решите друг редактор)
4.Хостинг, но това се предполага че го имате вече.

И така щом сме се снабдили с гореизброените неща почваме работа

1) Стартираме Adobe PhotoshopCS2
2) Кликаме горе в менюто на File > New и задавеме на новия ни документ размерите (в урока аз съм задал размери 1024×768) и за фон бял.
3) На леяра Background с инструмента Кофичка си го боядисваме , да речем сиво, след което правим нов леяр.

4) После избираме инструмента за селектиране Rectangular marquee tool (пунктираното квадратче) на новия леяр ограждаме определена област и запълваме със син цвят да речем.

5) след това правим същото и от горната страна, за да му придадем малко вид ама със друг цвят и над леярите от режимите на смесване избираме Color Dodge – то е най- добре ако искате можете да го смените.

6) После с инструмента Ellipse Tool очертаваме в горния ъгъл едно кръгче или елипса както желаете. долу от леяр ефектите с десен бутон избирате Stroke и му задавете някъв цвят и размер-така става по яко. После избираме инструмента Horizontal Type Tool и на нов леяр пишем „WT“ както е показано.

7) После в другия ъгъл за да не седи така празно с Horizontal Type Tool пишем „Web-Tourist.net и му прилагаме от стиловете този ефект:

8) така до тук направихме дизайна. сега следва да направим бутоните. за целта си отвряме нов документ с размери 150×30 и го запълваме с някъв цвят. правим нов леяр и с Horizontal Type Tool пишем имената на бутоните и ги сейфаме като .gif или .jpg

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

10) идва ред на същинската част. Кликаме на Slice Tool и с него очертаваме всеки един от бутоните- ВНИМАНИЕ!!!! ВСЕКИ БУТОН СЕ НАМИРА НА ОТДЕЛЕН ЛЕЯР КОЕТО ЗНАЧИ ЧЕ КОГТО ОЧЕРТАВАТЕ СЪС Slice Tool ТРЯБВА ДА Е НА СЪОТВЕТНИЯ ЛЕЯР!

11) Сега взимаме инструмента Slice Select Tool и кликаме на всеки слайс, който сме направили такаче да излезне този прозорец в който попълваме следните неща – попълвате ги така в зависимост от това къде водят линковете.

12) Вече вървим към края. Следва чрез бутона „Jump to ImageReady“ да се прехвърлим в ImageReady където от менюто File > Save Optimized As… на „Запиши като тип:“ избираме: „HTML and Images“. Стова работата ни във Photoshopa приключи

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

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

Това е! Ако имате въпроси пишете на Лични съобщения!