Преглед на урок

Дизайн на уеб страница ''White Notebook Style''

Дизайн на уеб страница ''White Notebook Style''




Създайте нов документ с размери 1152 х 729 рх и резолюция 72 dpi.
Първо ще създадем основния фон на документа, който се състои от два слоя. Първия ще запълним с вертикални черни райета върху прозрачна основа. За целта ви е необходим подходящ образец (pattern), какъвто можете да си изтеглите от тук. Отворете файла stripes_pattern.gif и изберете Edit > Define Pattern. Натиснете OK и затворете файла.
В основния документ запълнете най-долния слой с Layer > Layer Style > Pattern Overlay и избирате мострата, която току-що създадохте.



Към по-горния слой приложете Leaf Pattern и Gradient Overlay със следните стойности и променете Fill на 0%





Нарисувайте формата на вашата уеб страница, която наподобява лист от тетрадка, с инструмента Pen Tool (P). Задръжте Shift докато рисувате, за да чертаете линии под ъгъл 90°. За улеснение използвайте размерните линии на документа (View > Rulers). По-начинаещите могат да изтеглят готовата пътечка от тук.



На нов слой селектирайте пътечката, която създадохте и приложете следните ефекти:





Сега ще създадем сянка на белия лист с по-различна форма. За целта създайте нов слой и го поставете под слоя, съдържащ белия лист. Копирайте пътечката с форма на лист от тетрадка и я променете по следния начин: Edit > Transform Path > Warp. От падащото меню Warp изберете Inflate и за Bend определете стойност 15,4%.



Запълнете новата форма с черен цвят. Променете Blending Mode за този слой на Multiply и Opacity на 70%.
Приложете последователно Filter > Blur > Gaussian Blur (25-35) и Filter > Noise > Add Noise (12,5%, Uniform, Monochromatic).



Използвайте Rectangle Tool (U), за да нарисувате дълъг тънък правоъгълник. Поставете го на нов слой, зад слоя с белия лист.



Запълнете го с градиент със следните стойности:





Сега ще нарисуваме бутони за основното меню вляво. С Pen Tool (P) нарисувайте форма, подобна на флагче.



Копирайте я. Към всяка една от пътечките приложете поотделно Edit > Transform Path > Warp и променете формата й като теглите контролните точки и линии.



За флагчетата използвайте следния стил:







Активирайте селекцията с формата на белия лист (Ctrl + Click). На нов слой изберете Filter > Render > Clouds. Върху същия слой приложете филтъра Craquelure (Filter > Texture > Craquelure) със следните настройки:



Променете Blending Mode за този слой на Overlay.



За да оформите заоблените краища на страницата в долния ляв ъгъл, използвайте Rounded Rectangle Tool (U) с Radius 15 px



Превърнете я в селекция и с Eraser Tool (E) изтрийте площта от белия лист, заградена от селекцията.



Преместете селекцията над изрязания участък, изберете Select > Inverse (Shift+Ctrl+I) и с Eraser Tool изтрийте долния ляв ъгъл. Резултатът ви трябва да изглежда така:



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



Изтрийте излишните участъци



Направете още едно копие по същия начин



Отворете във Photoshop някакво изображение по ваш избор. Авторът е използвал снимка с водни лилии, подобна на тази:



Поставете изображението в работния си документ и му направете копие. Към горното копие приложете последователно следните трансформации:
1. Image > Adjustments > Channel Mixer, поставете отметка на Monochrome.
2. Image > Adjustments > Auto Levels.
3. Filter > Stylize > Glowing Edges със стойности съответно 1; 4; 2.
4. Image > Adjustments > Invert.
Променете Blending Mode за този слой на Multiply и Opacity на 80%.



Към долното копие приложете Filter > Artistic > Watercolor със стойности 14; 0; 1 и намалете Opacity на 65%.



Активирайте селекцията на изображението с лилиите. Създайте нов слой и го поставете между двете копия. Изсветлете краищата с градиент (White to Transparent) като изтегляте от всеки от четирите краища на селекцията навътре. Намалете Opacity на 50%.



Без да деактивирате селекцията създайте още един нов слой. Запълнете го със същия градиент, но този път по диагонал отгоре-надолу.



Маркирайте някой от слоевете, на които е приложен филтъра Craquelure и активирайте селекцията на изображението с лилиите. Изберете Layer > New > Layer via Copy. Преместете новополучения слой под най-горното копие с лилиите, променете Blending Mode на Overlay, Opacity на 26%.



Към най-горния слой с лилиите приложете Stroke от менюто Layer Style с тези настройки



С Pen Tool (P) нарисувайте форма, подобна на показаната.



Активирайте селекцията с лилиите и премахнете от нея формата, която нарисувахте.



Създайте нов слой и установете Fill на 0%. Запълнете селекцията с градиент със следните настройки:







Активирайте селекцията на формата, която нарисувахте. На нов слой с мека четка с черен цвят (Brush: 80-90, Opacity и Flow 45-50%) нарисувайте сянка.



С Pen Tool (P) нарисувайте форма, наподобяваща завит край на страница. Превърнете я в селекция.



Запълнете я с градиент





Използвайте мека прозрачна четка, за да нарисувате сянка



Селектирайте само горната част на изображението с форма на лист от тетрадка и на нов слой го запълнете с черно-бял градиент



Остана само да добавим текст. Авторът е използвал шрифт Pristina (можете да го изтеглите от тук). Към текстовете от основното меню приложете Filter > Noise > Add Noise.



Добавете още текст там, където смятате, че е необходимо.
Може да нарисувате няколко символа с Custom Shape Tool (U)



Нарисувайте полето за търсене като очертаете правоъгълник с Rectangle Tool (U) и приложете Layer Style > Stroke



С това моделът на вашата уеб страница е готов!



Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: mortisha
Източник: http://www.tutorialized.com/

Коментари

leo12

извинявай, тези патерн од каде да ги свала нещо не мога од това мeсто дето си написал.
мерси предварително :)

Sea_Of_Blood_f

Урокът е страхотен! Използвах го като идея да си направя новото сайтче http://loraval2.atspace.com
Благодаря много (:

pecko.f

ъмм... извинете ако въпроса ми е тъп амаа имам малък пробем :) как да си го сложа тва като вида на сайта ии като щракаш например на др да речем както е на картинката например на PORTFOLIO ии пак да се запази вида на сайта ПЛС някой ако може да ми помогне с проблема ии ако му се занимава да ми обясни ще съм мн благодарна :)

pecko.f

мейла ми е pecko.f@gmail.com мерси предварително :)

mortisha

Браво Лора, екстра ти се е получило :)

Sea_Of_Blood_f

Радвам се, че ви е харесал (:

devilhunter

zdraveita mn mi haresa uroka no ne moga da isteglq resursniq fail

Iv4etooo

Урокът е хубав, само дето на моменти сякаш е малко недообяснено.

Ето какво направих аз

http://img27.imageshack.us/img27/8271/firstdesign.jpg

aRmY_GirL

[url=http://a.imageshack.us/img801/2223/designweb1.jpg]

aRmY_GirL

http://a.imageshack.us/img801/2223/designweb1.jpg

zori0608

съгласна съм с Iv4etooo, обяснявай те всичко! аз съм напреднала с програмата ама тези който са наченаищи ще се лутат като мухи без глави!!! и между другото това не Вие първия случай в който урока Ви не е обяснен напълно!!!!!!!!!!!

mortisha

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

zori0608

Така 1 - Не критикувам никого, а споделих мнението на друг човек! 2 - Това, че съм сгрешила не означава, че съм неграмотна. Мисля, че всеки може да сгреши! 3 - Това, че съм казала "напреднала" не означава, че съм перфектна а на против затова съм тук и ще продължавам да съм в този сайт защото искам да науча нещо и го правя! Няма смисъл да ми казваш, че тези уроци са направени доброволно, ако не беше така нямаше да са тук нали!? 4 - Може и да не е лесно да се "превеждат" уроците аз не споря за това, но от "превеждане" до пълно обяснение има разлика! и 5 - Разбирам да съм казала лъжа за да ме нападаш, но не виждам къде съм сгрешила след като има и други хора с същото мнение! Освен правописа естествето :) :) :). Но ти благодаря и ще имам в предвид всичко което каза!

zori0608

Просто споделих чуждо мнение както казах вече, може би с по малко думи трябваше да го направя. Но ти го прие като лична обида и ме нападаш, което според мен не е правилно!

vesela_70

Много ми хареса този урок. Но незнам защо, след като следвам инструкциите Layer > Layer Style > Pattern Overlay и избера съответната мостра, се получава изцяло сиво запълване, а не на раета. Не съм пробвала само, ако сама си създам мострата, а не ползвам готовата.
Предварително благодаря, че ще ми помогнете!

mortisha

До vesela_70: провери, дали когато отвориш файла с мострата (stripes_pattern.gif) цветовата схема е Indexed Color. Това става като избереш Image>Mode. Ako e Indexed Color, промени я на RGB и чак след това избери Edit > Define Pattern. В превюто твоята мостра трябва да изглежда ето така
След това можеш да си запълниш слоя и като използваш Edit>Fill>Pattern (Mode: Normal; Opacity 7%)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.