Web dizaino ir logotipų skiltis Web dizaino pamokos lietuvių kalba

 Stilingas dizainas panaudojant tekstūras

Įvairios lietuvių kurtos arba išverstos web dizaino pamokos

Standartinė f5.Tommy » 2009 Gru 20, 01:02

Pamoka versta iš anglų kalbos. Originali pamoka. Leidimas gautas.
* pamoką redagavo ir sutvarkė {-X-e-e-d-a-s-}.

Galutinis rezultatas: images/pamokos/textures_design/47-500x468.jpg



Atsidarykime reikiamą darbo dydį: šiuo atveju 960 x 900 pikselių.



Atsisiųskite ši paveiksliuką, kurį naudosite savo dizaino fonui:
Paveikslėlis


Atsidarome ši paveiksliuką savo Photoshop'e, tada eikite Edit > Define Pattern.
Pasirinkite pavadinimą šiam pattern'ui ir spauskite OK.
Pasirinkite Paint Bucket Tool, ir ten pasirinkite ši pattern'ą.

Paveikslėlis

Žinoma galite naudoti ir kitokį pattern'ą, jeigu norite improvizuoti.

Štai kaip dabar atrodo visas darbo laukas:
Paveikslėlis


Pasirenkam Rectangle Tool, ir nubraižome porą formų viršuje, kaip pavaizduota paveiksliuke. Dėl spalvų dabar nesukit galvos.

Paveikslėlis


Dabar ant viršutinio layer'io spaudžiam dešinį pelės klavišą ir spaudžiam Blending Options
Ir viską darom pagal tokius nustatymus:

Paveikslėlis

Paveikslėlis

Paveikslėlis

Paveikslėlis

Rezultatas:

Paveikslėlis



Ant antrojo layer'io darome tokius nustatymus:

Paveikslėlis

Paveikslėlis

Paveikslėlis

Rezultatas:

Paveikslėlis



Po šia pilka forma nubraižome oranžinę juostą:

Paveikslėlis

Šiai oranžinei juostai darau tokius nustatymus:

Paveikslėlis

Paveikslėlis

Rezultatas:

Paveikslėlis



Tada pasirenkame pradinį fono layer'į (tą su pattern'u), ir einam į Filter > Render > Lightning effects.

Paveikslėlis

Ir nustatau tokius nustatymus:

Paveikslėlis

Štai rezultatas:

Paveikslėlis



Pasirinkite Rounded Rectangle Tool, ir nubraižykite 3 tokias formas:

Paveikslėlis


Juodai formai padarome tokius nustatymus:

Paveikslėlis

Paveikslėlis

Paveikslėlis

Paveikslėlis

Paveikslėlis



Kitom dviem formom pasirenkame spalva: #cbc5b5
Mano rezultatas:

Paveikslėlis



Vėl pasirenku Rounded Rectangle Tool, ir pridedu papildomų formų:

Paveikslėlis


Juodai formai padarom tokius nustatymus:

Paveikslėlis

Paveikslėlis

Rezultatas:

Paveikslėlis


Dizaino header'yje patalpinsiu keletą tekstinių mygtukų ir paprastą logotipą:

Paveikslėlis


Šriftai, kuriuos naudojau:

Dizaino header'iui: Dilenia UPC, Bold, 24 pixels, Crisp

Logotipui: Dilenia UPC, Bold Italic, 52 pixels, Crisp



Dešinėje pusėje sukursiu kelias formas su Rounded Rectangle Tool.

Paveikslėlis


Jūs matote kraštus (borders) aplink visas formas. Jūs galite jį pridėti su paprastu stroke. Kad jį išgautume einame į Layer > Layer Style > Stroke, ir nustatome taip:

Paveikslėlis


Pridedame porą paveiksliukų formose:

Paveikslėlis


Kairėje pusėje tarkim pridedam didelį paveikslą:

Paveikslėlis


Užpildom tuščias vietas tekstu su Horizontal Type Tool.

Paveikslėlis


Kitoje pusėje sukursiu dar vieną formą:

Paveikslėlis


Po šia formą pridedam dar vieną tokią pačią identišką formą, tik juodos spalvos.
Tada eisiu Edit > Transform > Perspective, ir su pelyte pakoreguosiu viršutinę formos dalį, tempdamas kraštus į kairę ir dešinę.

Paveikslėlis


Tada eisiu į Filter > Blur > Gaussian blur, ir nustatau tokius nustatymus:

Paveikslėlis


Su Move Tool pajudinsiu layer'į truputėlį į viršu. Kol kas mano rezultatas toks:

Paveikslėlis

Tai yra neblogas metodas objektui pridėti šėšėlį. Taip pat galima naudoti drop shadow, bet rezultatas bus ne tas pats.


Ant šios formos pridedam gražių ikonų.

Paveikslėlis

Ikonas tinklapių kūrybai, galima rasti čia:
ikonu-kolekcija-tinklapiu-kurybai-t16740.html



Pasirenkame Line Tool, ir brėžiam tris linijas. Šios linijos turėtų būti labai plonos (1 pikselio). Labai svarbu nustatyti reikiamas spalvas. Vidurinė linija turi būti juoda, o kitos iš kraštų baltos. Priartinsiu, kad matytumėt geriau:

Paveikslėlis


Pasirinkite visus šiuos layer'ius laikydami Shift ir tada spaudžiam Ctrl+E.
Taip jūs sujungsite viską į vieną layer'į.

Dabar pasirenkame Eraser Tool, ir būkite tikri, kad pasirinkote Soft round brush.

Paveikslėlis

Ištriname dalį kairiosios ir dešiniosios linijos pusės.

Paveikslėlis

Ta patį padarome ir su header'iu.

Paveikslėlis



Galutinis rezultatas:

Paveikslėlis
Vartotojo avataras
f5.Tommy
finger5™
finger5™
 
Pranešimai: 6089
Miestas: ಠ_ಠ
Medaliai: 14
Taškai: 2176

Reputacija: 95 Pridėti reputacijos tašką

Standartinė vie » 2009 Gru 24, 02:30

tikrai grazu. Daug darbo.
Vartotojo avataras
vie
Art Drops™
Art Drops™
 
Pranešimai: 625
Miestas: Kaunas
Medaliai: 3
Taškai: 335

Kovų lygis: B

Reputacija: 18 Pridėti reputacijos tašką

Standartinė theASK » 2010 Sau 07, 16:50

Labai gera pamoka, gal netaip jau gerai blending optionuose padariau, nes identiskai nesinorejo bet neuzilgo kai pabaigsiu idesiu outcome, pamoka nuostabi, aciu. + rep
Vartotojo avataras
theASK
Įsijaučiantis
 
Pranešimai: 52
Miestas: Vilnius
Taškai: 42

Kovų lygis: N

Reputacija: 0 Pridėti reputacijos tašką

Standartinė Keil » 2010 Sau 08, 09:01

Dariau, dariau, dariau , dariau :D
IR špyga pamačiau :|
Vartotojo avataras
Keil
Pradedantis
 
Pranešimai: 26
Taškai: 16

Reputacija: 0 Pridėti reputacijos tašką

Standartinė zipex » 2010 Sau 18, 20:06

Gerbiu ta kuris viska sutvarke ir idejo. :) Nurodomas teisingas kelias naujokams.
Vartotojo avataras
zipex
Dalyvis
 
Pranešimai: 183
Taškai: 153

Kovų lygis: A

Reputacija: 3 Pridėti reputacijos tašką

Standartinė Colourful » 2010 Sau 18, 20:09

Malacius Tommy! Tutorial aisku isverstas, bet isversti ir viska sudeti i savo vietas iš tikrųjų nera lengva! +REP.
Vartotojo avataras
Colourful
Dalyvis
 
Pranešimai: 188
Miestas: Up in the sky
Medaliai: 1
Taškai: 275

Reputacija: 6 Pridėti reputacijos tašką

Standartinė Tačkis » 2010 Vas 20, 20:42

Man problema su kampų apvalinimu... nustatau feather sakykim 20, apobrėžiu vietą, darai fill ir nuspalvina tą vietą ir už jos kraštų kaip su kokiu blur išlindę.. :///
Vartotojo avataras
Tačkis
Forumo gyventojas
 
Pranešimai: 777
Miestas: Kaunas
Medaliai: 3
Taškai: 298

Kovų lygis: B

Reputacija: 12 Pridėti reputacijos tašką

Standartinė f5.Tommy » 2010 Vas 21, 00:14

Patariu naudoti is karto "Rounded Rectangle Tool"

Paveikslėlis


:)
Vartotojo avataras
f5.Tommy
finger5™
finger5™
 
Pranešimai: 6089
Miestas: ಠ_ಠ
Medaliai: 14
Taškai: 2176

Reputacija: 95 Pridėti reputacijos tašką

Standartinė Murkis » 2010 Kov 13, 23:44

Geras darbas :!:
Murkis
Moderatorius
 
Pranešimai: 5726
Medaliai: 27
Taškai: 3056

Reputacija: 141 Pridėti reputacijos tašką

Standartinė DaruX » 2010 Kov 13, 23:46

Pravers.
Vartotojo avataras
DaruX
Forumo gyventojas
 
Pranešimai: 766
Miestas: Šiauliai
Medaliai: 1
Taškai: 172

Kovų lygis: N

Reputacija: 3 Pridėti reputacijos tašką

Standartinė DoK' » 2010 Rgs 28, 18:34

Sweet,reikės išbandyti.
Vartotojo avataras
DoK'
Profesionalus dalyvis
 
Pranešimai: 1192
Miestas: Kaunas
Medaliai: 4
Taškai: 382

Kovų lygis: N

Reputacija: 24 Pridėti reputacijos tašką

Standartinė Pressure » 2010 Spa 10, 17:41

Vartotojo avataras
Pressure
Pradedantis
 
Pranešimai: 39
Miestas: Klaipėda
Taškai: 35

Kovų lygis: N

Reputacija: 0 Pridėti reputacijos tašką

Standartinė l3dazz » 2010 Spa 29, 19:48

kur man ta jieskot kur reikia ivesti kur tu ten rasei kažką grafiti.com kur ji rast? kur cia rasyt?
Vartotojo avataras
l3dazz
Naujokas
 
Pranešimai: 6
Taškai: 6

Reputacija: 0 Pridėti reputacijos tašką

Standartinė DainiusL » 2011 Vas 19, 22:19

Mano darbas :

Paveikslėlis
Vartotojo avataras
DainiusL
Naujokas
 
Pranešimai: 5
Taškai: 5

Reputacija: 0 Pridėti reputacijos tašką

Standartinė Kaupiukas1 » 2011 Kov 02, 21:17

Labai gera pamoka, kuriu tik pirmą kartą dizainą, bet suprantu iš dalies apie ką eina kalba, ne kaip kituose pamokose, tik rodo ką spaust.. :) Beje galėtum dar paaiškint išsamiau, kaip tuos paveiksliukus įdėt, nemoku pvz. :) Tai, tiek, super.
Kaupiukas1
Naujokas
 
Pranešimai: 2
Taškai: 2

Reputacija: 0 Pridėti reputacijos tašką



Web dizaino ir logotipų skiltis Web dizaino pamokos lietuvių kalba

cron

Prisijungti

Forumo stilius

Pasirinkimas:

free tattoo Designs mezoterapija