Archyvas 'Web dizainas'
Animuotas mygtukas (2 dalis)
Posted on 13. Bal, 2010 by PSD+.
Pirmoje dalyje parodžiau, kaip nusipieštį pačia mygtuko išvaizdą. Dabar koduosime XHTML, CSS ir jQuery pagalba. Visų pirma pradėkime nuo CSS. .otherbutton { clear: both; position:relative; display:block; height: 84px; width: 570px; background:url(button.png) no-repeat; background-position:0 0; cursor: pointer; } .otherbutton span.hover { position: absolute; display: block; height: 84px; width: 570px; background: url(button.png) no-repeat; background-position: bottom; } Pirmas [...]
Skaityti viską
Animuotas mygtukas (1 dalis)
Posted on 13. Bal, 2010 by PSD+.
Sveiki, Šį kartą parodysiu, kaip padaryti animuotą mygtuką panaudojant Photoshop’ą, CSS, XHTML bei jQuery. Pirmoje dalyje tik nusipiešime mygtuką, antroje viską užkoduosime. Taigi, pradedame! Visų pirmą, susikurkite norimo dydžio failą, koks bus mygtukas. Mano atveju plotis 570 px, aukštis 170 px. Aukštį dalinsime į dvi dalis, nes piešime du mygtukus, kaip jis atrodys paprastai ir [...]
Skaityti viską
PSD + CSS. Darome Meniu juostą
Posted on 04. Bal, 2010 by PSD+.
Daugelis Photoshop naudoja vien webdizainui. Žinoma jie išmano ir CSS. Nuo šiol psdplius.lt atsiras daugiau pamokų apie kodavimą. Šį kartą darysime menubar’ą. Viską nusipiešime su Photoshop ir užkoduosime su CSS. Pradedame. Pirmiausia mums reikia dviejų failų. Kaip atrodys meniu juosta paprastai ir užėjus ant jos. Kaip ji turėtu atrodyti leisiu jums pasireikšti, todėl nieko neaiškindamas [...]
Skaityti viską
Keičiame WordPress login išvaizdą
Posted on 02. Bal, 2010 by PSD+.
Sveiki, šį kartą papasakosiu, kaip galima pasikeisti savo WordPress TVS login išvaizdą. Tam mums prireiks žinoma ir Photoshop :)
Skaityti viską
Micro mygtukas
Posted on 12. Lap, 2009 by PSD+.
Ši pamoka man ypač patinka ir smagu buvo piešti :) Susikuriame nauja dokumentą. 165x115px(pamokoje). Pasirenkame Rectangle Marquee Tool bei nubrėžiame norimo dydžio būsimo mygtuko formą. Sukuriame naują sluoksnį bei nuspalviname pažymėtą dalį spalva #E3E3E3. Viskas, turime mygtuko kontūrus. Galima atžymėti figūrą: CTRL+D. Padidiname paveiklą iki 800%, tai padaryti galite laikydami CTRL ir spaudinėdami + Pasirenkame [...]
Skaityti viską
Dar vienas gražus, blizgantis mygtukas
Posted on 11. Lap, 2009 by PSD+.
Be didelės įžangos tiesiog pradėkime :) Visų pirma, susikuriame dokumentą 250 x 150 px dydžio. Nuspalviname #252a38 spalva. Pasirinkite Rounded Rectangle Tool ir nupieškite figūrą panašią į šią: Paspauskite dešinį pelės klavišą ant figūros sluoksnio ir pažymėkite Rasterize layer. Dabar kairiu pelės klavišu, laikydami CTRL klavišą paspauskite ant sluoksnio paveikslėlio, taip pažymėdami figūrą. Su Gradient [...]
Skaityti viską
Apple meniu
Posted on 11. Rgs, 2009 by PSD+.
Lengva pamoka, kaip sukurti meniu Apple stiliaus. Susikuriame 75px dydžio dokumentą, plotis priklausis nuo jūsų poreikio. Nustatykite spalvas juoda/balta(paspauskite klavišą X). Pasirinkite Rounded Rectangle Tool. Radius nustatome 8px. Spaudžiame trikampelį ęsantį viršuje, šalia visų figūrų bei nurodome “fixed size”. Nubrėžiame figūrą. Naujai figūrai padarome tokius nustatymus: Pasirenkame Line Tool ir ant figūros iš viršaus į [...]
Skaityti viską
Web 2.0 Logo
Posted on 07. Rgs, 2009 by PSD+.
Šį kartą parodysime, kaip neturint daug įgudžių susikurti WEB 2.0 standarto logotipą. Svarbiausią ką jums reikia padaryti, tai parsisiųsti Photoshop stilius iš čia: Siųskite Spaudžiate Window > Styles. Prie stilių langelio dešinėj viršuje spauskite ęsantį trikampėlį ir tada Load Styles… Susiraskite parsisiųstą web20.asl failą. Jūsų stilių laukelis turi atrodyti panašiai: Viskas! Lengvai galite pradėti kurti [...]
Skaityti viską
Įstrigęs žemėje…
Posted on 05. Rgs, 2009 by PSD+.
Šį kartą piešime kvadratą įstrigusį žemėje. Efektus kursime patys :) Susikurkite naują dokumentą. Mes sukūrėme 400 x 400 px dydžio dokumentą. Paspauskite D klavišą, kad nustatytumėte pagrindines spalvas Juoda/Balta. Pasirinkite Rounded Rectangle Tool bei nubrėžkite figurą: Pasukite figurą apie 35 laipsnius į kairę. Tai galite padaryti pažymėję figūros sluoksnį ir paspaudė CTRL+T. Dabar reikia sukurti [...]
Loading ...