Userbar készítése


Mostanság divatba jöttek a fórumokon látható un. userbar-ok, melyek keskeny kis képek mintegy aláírásként használva. Van aki másoktól másolja le és van, aki inkább maga készíti el. Utóbbi csoportnak szól a leírás.

Először is csináljunk egy 350×19 px-es "Transparent" (átlátszó) háttérrel ellátott dukomentumot.

Userbar készítése 1

Következő feladat hogy "gradient tool"-al csinálunk egy színátmentet.

Userbar készítése 2

Ha ez is megvan, csinálunk egy 6×6 px-es "Transparent" (átlátszó) hátteret.

Userbar készítése 3

Ezután megfogod a "Pencil Tool"-t (jobb klikk a "Brush tool"-on és átváltod) és négyzeteket rajzolsz rá átlós irányba.

Ezek után jelöld ki az egészet és "Edit->Define Pattern". Meg fogja kérdezni mi legyen a neve, találj ki vmit. :)

Userbar készítése 5

Következő lépésként visszamegyünk az eredeti dokumentumra és a "Pattern Stamp Tool"-lal becsíkozzátok a képet (gyakorlatilag az előbb készített 6×6 px-es képpel kitöltjük)

A layer "Opacity" tulajdonságán tetszőleges tetszőlegesen lehet módosítani, ha nem szeretnénk hogy a csíkozás nagyon erős legyen.

Userbar készítése 6

Illeszd be azt a képet amit eredetileg a userbar-ra gondoltál pl ezt:

Userbar készítése 7

Ird rá a szöveget ezzel a betűtípussal (célszerű vmelyik nem talpas betűtípust választani, mely kis méretben is jól néz ki. Ha nincs ilyen a gépeden, keress rá google-ben a "bitmap font" vagy "pixelfont" szavakra, lesz bőven találat) vagy bármelyikkel de én ezt használtam: Visitor TT1 BRK TTF

Userbar készítése 8

Most kattints a "Elliptical Marquee Tool"-ra és csinálj kört a képbe ami kicsit belelóg. Most "Paint Bucket"-tel színezd be fehérre és állíts kicsit az " opacity" értékén.

Userbar készítése 9

Utolsó lépés adj hozzá egy 1 pixeles bordert és kész is a “userbar”.

Ezt a tutorialt az egyik külföldi oldalon találtam szóval nem én csináltam csak fordítottam!

Fordította: cAs

Kapcsolódó bejegyzések:
  • Userbar készítése

    Nyisd meg a képet, melyet módosítani szeretnél. 2. Készíts egy másolatot róla (duplicate)3. Tedd fekete-fehérré a képet (Desaturate) 4. A FF layer-ről …

  • Userbar készítése

    Újabb remek tutoriallal bővült a lap Mercuriusnak köszönhetően, ezúttal egy esős kép elkészítésének módját kaptuk meg tőle. :)1.) Válassz ki egy képet, amit …

  • Userbar készítése

    Az alábbi "color dodge"effektet könnyű használni, látványos hatást érhetsz el vele, szóval érdemes e tutorialra pár perc figyelmet szentelni. :)1. …

  • Userbar készítése

    ÁLTALÁNOS INFORMÁCIÓ:Mire is jó a layer mask:- a layer egyes darabjainak kivágására- átlátszó területeket készítenianélkül, hogy a layer-ből (amivel épp dolgozun …

  • Userbar készítése

    A devpapers.com -on találtam egy hasznos leírást, amiben egy olyan kódot mutattak be, mely segítségével egy adott könyvtárból véletlenszerűen lehet képet választ …

A cikket beküldte: Harder (http://blog.harder.hu)

55 hozzászólás

  1. Kaszás says:

    hol van az a border vagy mi?

  2. Harder (http://blog.harder.hu) says:

    cAs a layer style/stroke-ra gondolt szerintem, mikor border-t írt. A layer style-t eléred a
    a.) layerre duplán kattintva, vagy
    b.) a layer-re jobbegérgombbal kattintva és a “blending options”-t választva.

  3. Rizsu says:

    Ezt milyen programmal lehet csinálni?

  4. Harder (http://blog.harder.hu) says:

    Photoshop a te barátod.

  5. Attila says:

    Hol van az a pAttern Stamp Tool

  6. Harder (http://blog.harder.hu) says:

    Az eszköztárban: pattern stamp tool

  7. Attila says:

    Köszönöm gyors válaszodat
    Szerintem majd még kell segítség de azért kösz…..

    Am eszköztár….Angol PS-em van….Szótárba néttem és azt írja Toolbox…Nem találom

    Jah hülye vok….Ott van oldalt…

  8. Attila says:

    Vki csinálna nekem az Userballról is egy jó tutort mert találtam egy csomót csak az magyar és nem megy + annyira nem vágom még jól…szal kéne részletesen..Pls vki írja le valahova pls

  9. Madd Dogg (http://sa-mp000.extra.hu/) says:

    Szia!
    Megtudod mondani hogy azt a részt hogy kell amikor ez van:
    Következő lépésként visszamegyünk az eredeti dokumentumra és a “Pattern Stamp Tool”-lal becsíkozzátok a képet (gyakorlatilag az előbb készített 6×6 px-es képpel kitöltjük)

    nem tudom hogy kell vissza menni :’(
    légyszi ird meg.
    ha nem akkor legalábba mail címre: madd.dogg13@hotmail.com

  10. RAMy (http://www.cascada.gportal.hu) says:

    A jobb felső sarokban vagy a nagy X, nem azzal zárod be, hanem ami alatta van X, és úgy mész vissza.
    (Ha angol a PS-od) Layer menü -> Layer Style -> Pattern Overlay, itt kiválasztod a csíkos mintádat.

  11. konyec says:

    letöltöttem a betűtípust azt hogyan lehet használni?
    Hova kell másolni h felismerje?

  12. Madd Dogg (http://www.fcr-samp.extra.hu) says:

    a letöltött fájlt ide:
    start\ vezérlőpult\ betűtípusok és beilleszted oda
    aztán pl bemész word-ba és a betűtípus nevét kikeresed.
    ennyi :)

  13. RAMy (http://djramy.extra.hu) says:

    Vagy pl. C:\Windows\Fonts mappába bemásolod.

  14. asam9 says:

    vagy vezérlőpult –> betütípusok: fájl –> új betükészlet telepítése(…)

  15. BonFire (http://bonfire.blog.hu/) says:

    Mondjuk, annak ellenére, hogy sokan leírták már- tehát egy kis kereséssel meg lehet találni a lapon – a betűkészletek telepítése nem kimondottan PS tutorial. Tessék már végre elolvasni az új felhasználóknak az oldal szabályzatát, mivel elsősorban nekik szól! Én már meguntam, hogy ilyesmikre válaszoljak, úgy látszik, vannak akiknek még van ehhez türelmük, de lassan mindenki meg fogja unni, hogy Ő adja a tippeket, mert a user lusta elolvasni a szabályzatot.

    Mellesleg a Windowsnak is van súgója (F1), és az elregéli, hogyan kell a fontokat telepíteni és használni. Ez pedig az oldalon található egyik témába sem vág! A számítógép alapszintű felhasználói kezelését nem itt kell elsajátítani. Vagy iratkozzon be valaki egy tanfolyamra, és tanulja meg ott, vagy használja a Windows súgót! Jó hogy azt meg nem kérdezitek már itt, hogy melyik konnektorba kell bedugni a tápkábelt!

  16. bubu001 says:

    BonFire: Van akinek hiába magyarázol… Bár azt tényleg nem értem, hogy ami nem ps téma, azt miért itt kell megvitatni.

  17. kléni says:

    Helló

    azt setném kérdezni, hogy hogy kell belleszteni egy másik képet?
    gondolom a nyomdóval ráteszem…
    de amit két választottam, mjad megpróbálom benyomdni, nem lesz átlátszó a hátér, pedig maga a kép átlátszó hátterű…
    ilyenkor mt kell ti? :S

  18. BonFire (http://bonfire.blog.hu/) says:

    Nem nyomdázni kell, hanem a képet “beilleszteni”. Ennek több módja is van.

    1. Kijelölöd, amit át szeretnél tenni, aztán Ctrl+C. Klikk a másik dokumentumra, és Ctrl+V. Ez egy sima vágólapra másolás és beillesztés. Ezeket a műveleteket az Edit menüben is meg lehet találni. Copy, és Paste (másolás; beillesztés).

    2. A másik módszer az egyszerűbb, a drag&drop, vagyis a vonszol és pottyant módszer. A mozgató eszközzel (V) egyszerűen csak átvonszolod a tartalmat az egyik ablakból a másikba. Ha rossz helyre kerülne, a layer palettádon ugyanezzel a módszerrel megcserélheted a rétegeket.

    Szóval nem kell itten ecsettel nyomdázgatni. Egyrészt, ha ecsettel csinálod, az egyszínű lesz. Másrészt nincs. Ha tényleg átlátszó a háttér, akkor annak a másik képen is átlátszónak kell lennie. Ezt is leellenőrizheted, ha a rétegre nyomsz egy Ctrl+Klikket. Amennyiben a kijelölés szaggatott vonala követi az alakzatot, akkor üres a háttér, ha a kép szélét keretezi körbe, akkor nem üres.

  19. MinetyX says:

    Hy! Először is köszi a leírást nagyon jó! Az lenne kérdésem, hogy hogyan lehet a szöveg szélének a vastagságát megnövelni?

  20. BonFire (http://bonfire.blog.hu/) says:

    A betűk körvonalára gondolsz? ;) A szöveget tartalmazó réteg tulajdonságainál állíthatod be. A layer palettán van egy “fx” gomb. Arra kattintva a Stroke-ot kell kiválasztani. (magyarul tán körvonal) A felugró panelen pedig értelemszerűen állíthatod a vastagságot pixelben, az elhelyezkedést (kívül; középen; belül), a vonal színét, a keverési módot és az áttetszőséget.

    Azt hiszem, a Stroke-ot kivégeztük ezzel. Több dolgot nemigen lehet állítani rajta.

  21. MinetyX says:

    Köszi. Pont erre gondoltam :D

  22. MinetyX says:

    Az eredeti angol leírásnak a címét le tudnád irni?

  23. Dave says:

    Nekem sikerült! xD
    nézd meg! :) http://img14.myimg.de/xmensorelvalasztoa6d92.png
    Amúgy ha valakinek nem megy, és szeretne annak csinálok ingyen!
    Küldj egy mailt, aztán megbeszéljük! :)

  24. Mage says:

    Üdv! Írnám rá a szöveget, erre előjön egy ablak, hogy “Could not complete your request because something prevented the text engine from being initialized”.
    És akkor most hogy írjak rá? A válaszokat előre is köszönöm.

  25. BonFire (http://bonfire.blog.hu/) says:

    Egyszer már valaki jelzett egy ilyen hibaüzenetet, de nem tudom, hogy végül is kiderült-e, hogy mi volt a baj, mert nem írt vissza. Én meg még ilyen üzenettel nem találkoztam, csak itt. A szöveg egyébként valami olyasmit akar jelenteni, hogy “A kérés nem teljesíthető maradéktalanul, mert valami megakadályozta a szövegmotor inicializálását – vagyis a kezdeti érték beállítását.” Na, most, hogy ez mire vonatkozik, azt nem tudom, de néhány javaslatom lenne.

    1. Próbáld meg az összes beállítást lenullázni az Edit menü Preferences menüpontja alatt.
    2. Ha ez megvan, indítsd újra az egész gépet, és próbáld ki, változott-e valami!
    3. Ha így sem jó, próbálkozz egy reinstallal, hátha egy kis agyserkentés megjavítja a programot!

    Ha sikerülne megoldani, légy szíves írd már meg itt, hogy megtudjuk végre, mi lehet ez! Akkor másoknak is tudnánk segíteni hasonló helyzetben.

  26. Mage says:

    Na szóval az Edit menü, Preferences menüpontja alatt General. Ott (és a többi almenüben) csak egy dolgot látok ami visszaállít valamit. “Reset all warning dialogs” Nem hiszem hogy ez bármit megoldana de mondom hátha. Rányomok, újraindítom, megpróbálom, ugyanez. Újratelepíteni nem lehet, mert Portable változat.

  27. BonFire (http://bonfire.blog.hu/) says:

    Kényelmetlen, mert én is ugyanarra a gombra gondoltam. Ha valami véletlenül állítódott el, akkor az általában segít. Ilyen esetekben nem is szoktam keresgélni hetekig a hiba okát, egyszerűen újrahúzom az egészet. Habár, azt mondod Portable változat, ezért nem lehet újratelepíteni, nem tudom, hogy ebben az esetben mit takar a szó, mert egyébként hordozható cuccot jelöl, mint pl egy laptop. Arra pedig – abban az esetben, ha a tiéd – azt és annyiszor telepítesz rá, amit és ahányszor akarsz. Tehát itt nem értem, hogy mit is takar a “portable”.

    Egyáltalán nem akar írni a szövegeszközzel?! Próbálj már meg egy ScreenShotot dobni, amikor a szövegeszköz van kiválasztva, úgy, hogy esetleg a hibaüzenet is látszik, a teljes képernyőn. Hátha csak valami apró de szemtelen dolog.

  28. MacGyver (http://www.zivatar.hu) says:

    A portable azt jelenti általában, hogy rajta van a program egy pendrive-on, és telepítés nélkül fut bármilyen számítógépen, amibe beledugják. De igazából nem hiszem, hogy a Photoshop esetén is erről lenne szó…

  29. BonFire (http://bonfire.blog.hu/) says:

    Akkor ezt úgy kell elképzelni, mint mondjuk egy játékkonzolt? Ezt én sem gondolnám. De mindenesetre jó lenne, ha ezt a szövegproblémát meg tudnánk oldani, mert határozottan emlékszem rá, hogy már másnál is előfordult. A gyógyírra sajnos nem. Ha nálam csinálná, biztosan nem hagynám annyiban.

  30. Mage says:

    A Portable azt jelenti amit MacGyver írt. Például pendrive-on van, és csak bedugod, ráböksz az exe-re és megy.
    Itt egy screenshot:
    http://kepfeltoltes.hu/080824/Photoshop_hiba_www.kepfeltoltes.hu_.jpg

  31. BonFire (http://bonfire.blog.hu/) says:

    Na, asszem megleltem a hiba okát. Az Adobe fórumon azt írják hogy

    Csomagold ki ezeket a következő könyvtárakat:
    C:Documents and SettingsA_RENDSZERED_ÉS_FELHASZNÁLÓI_NEVEDLocal SettingsApplication DataAdobe
    C:Documents and SettingsA_RENDSZERED_ÉS_FELHASZNÁLÓI_NEVEDApplication DataAdobe
    és újra:
    C:Program FilesCommon FilesAdobe

    Ez arra utal, hogy valami nem jó helyre került a telepítés során. De mivel neked nem kell telepíteni, nem biztos, hogy ez megoldja. Szétnéztem a problémával több oldalon is, az egyik lehetséges ok, hogy kevés a RAM, de ez a ritkábbik eset. A fő lehetséges ok, hogy vannak olyan fontok feltelepítve, amelyek ilyen gubancot okozhatnak. A tipp: letörölni, vagy kikapcsolni azokat a fontokat a Windows/Fonts mappában, amelyek nem tartoznak az alapértelmezett rendszerfontok közé. Itt a cikk és a teljes fontlista a win rendszerekhez:

    http://technobuff.wordpress.com/2007/11/14/adobe-photoshop-cs-text-tool-error/

    Na, remélem, ez segít valamelyest. Ha igen, jelezz!

  32. Mage says:

    Először is köszönöm az ötleteket!
    Másodszor: igen, fontok vannak rendesen telepítve, a mostanában telepítetteket letörlöm, az összes telepítettet felesleges, mert ez egy újkeletű probléma.

  33. zoleytaylor says:

    a font-os probléma nálam is előjött a light verzióban, de azt hittem azért problémázik mert azt a részét kiütötték belőle. szóval nem is próbálkoztam vele :D de szerintem nem voltak extra betűtípusaim, szóval más okozta a hibát. (mondjuk ettől nem dőlt össze a világ, a ps-t csak a brushok randomos szórása miatt – nemtom mi a szakszav erre :D – használom néha, minden másra ott egy nem adobe termék.)

    amúgy online userbar maker: http://userbarmaker.com/ (teljesen jó, egységes userbarokat lehet vele csinálni…)

    ui – egy olyan tutorialban megbízni, aminek a készítője nem tudja pontosan kivágni a képet… szerintem felelőtlenség. (lásd a föntit…) mondjuk nem értem miért kellett kivágni a képet screenshotról, miért nem lehetett menteni az egyes fázisokat… mindegy

  34. BonFire (http://bonfire.blog.hu/) says:

    Igazság szerint nálam soha nem volt ilyen hiba, és az egész hibaüzenetet begépeltem a Gugliba. Na, erre kihajított egy kazal hivatkozást, főként fórumokét, és jobb híján azok közt néztem szét.

    Namármost, attól hogy egy fórum angol nyelvű, még nem biztos, hogy okosabbak is rajta a felhasználók. Ott is jobbára csak tippeket tudnak egymásnak adni. Emellett pedig – mivel nem vagyok perfekt angol – sokszor elég nehéz megfejteni az ottani mondanivalót, gondolva a szlengre, a fogalmazásra és a helyesírásra, ami nem sokkal különb, mint a magyar nyelvű fórumokon.

    Az viszont már elgondolkodtató, hogy miért nem találtam egy hivatalos hibaelhárítót, ami az ilyesmikkel foglalkozik. Próbálgattam “Adobe troubleshooting”, vagy “Photoshop troubleshooting”, “error messages”, meg hasonló keresőkifejezésekkel, de csak fórumokat találtam, hivatalos oldalt nem. Mert ugye az csak egy dolog, hogy valamelyik fonttal összeakad a cucc. De mi van akkor, ha valakinek éppen az a kedvence, és azt szeretné használni? Mivel ez a progi képes szebbnél szebb dekoratív kiadványok szerkesztésére is, nem hiszem, hogy arra kéne törekedni, hogy a “meztelen” dísztelen és egyszerű betűkön kívül semmi mást ne használjunk. Hiszen akkor mivégre az egész, nem igaz?

  35. greganka says:

    áhh ez nekem nem megy. magyar ps cs3-at használok és semmit nem találok:S vki pls irja már le a magyar tool-okat mert semit nem találok igy :(

  36. BonFire (http://bonfire.blog.hu/) says:

    1. Használj angol PS-t, és minden gondod megoldódik!
    2. Használj szótárt, a munka során!
    3. Használj külön erre a célra írt Photoshop szótárt, ami megtalálható az oldalon!

    Mert azt ugye mégsem várod el, hogy amikor a felhasználók 99%-a az angol nyelvű felületet használja, majd direkt a te kedvedért le fogja bárki is fordítani. Már csak azért sem, mert aki angolt használ, az meg a magyar felületet nem ismeri.

  37. Pesi says:

    Üdv nekem help kéne mit csináljak AP CS3 van és textre errort dob ki mindent probáltam már de nem akar jo lenni :P

  38. BonFire (http://bonfire.blog.hu/) says:

    Nekünk meg a hibaüzenet kéne, mert anélkül hogy segítsen bárki is? :(

  39. Mage says:

    A szöveges problémát nem sikerült megoldani, de azért köszönöm szépen BonFire!

  40. BonFire (http://bonfire.blog.hu/) says:

    Nagy kár érte, mondom, bizony, mivel a külföldi fórumokon is ezt a gyógymódot javasolják, amit leírtam. Mivel nálam ilyesmi még nem fordult elő, jobb ötletem nincs. Esetleg megkockáztatom, hogy a program gyári hibás. Ha jól emlékszem, van az Adobe-nál valami online help, ha más nem írni kell nekik. Ha nem megy az angol, valakit meg kell rá szépen kérni. Nem kell irodalmi alkotás, csak leírni, hogy mivel van gondod, hogyan oldhatnád meg, meg ilyesmi. Azt is leírtam már valahol, hogy ez a karakterkészlet, vagyis bizonyos fontok törölgetése nekem nem az igazi. Mert kérdem én, mi van akkor, ha épp az a betű okoz neki gondot, ami a kedvencünk? Lehet, hogy ott már a winben rosszul van valami telepítve, esetleg összeakad más szövegszerkesztővel, mint mondjuk a Word. Na, többek között ezért sincs ilyen a gépemen.

  41. Cubika says:

    Sziasztok.Meg tudna nekem valaki mondani hogyan illesszek ra kepet az elkeszult userbarra?

  42. BonFire (http://bonfire.blog.hu/) says:

    Már született rá válasz, csak el kéne olvasni a régebbi hozzászólásokat, mert lehet, hogy nem te kérdezted először. Azért sem teszem be a permalinket, tessék szépen átnyálazgatni a hozzászólásokat! Azé’ van.

  43. Cubika says:

    Koszi megtalaltam es bocs hogy nem olvastam vegig mar az elejen:)

  44. Dávidka says:

    Mage ezt neked írom azért nem engedi h módosítsd a képet mert még le van “zárolva”
    kattints duplán az eredeti kép layeren és bejön egy ablak és ott nyomj egy okot és kész
    jöhet a módosítás

  45. BeGaaa says:

    “Ezek után jelöld ki az egészet és “Edit->Define Pattern”. Meg fogja kérdezni mi legyen a neve, találj ki vmit. :)”

    Nekem sajnos az Edit menűben nincs olyan hogy “Define Pattern”. Hol találom még meg? Segítsen valaki kérem.

  46. BonFire (http://bonfire.blog.hu/) says:

    Az Edit menüben van, mint a kép is mutatja.
    hxxp://i42.tinypic.com/jiko6f.jpg

    Ha nincs benne, akkor nem Photoshoppal dolgozol :P

  47. BeGaaa says:

    Köszi, most már megtaláltam, és photoshoppal dolgozok, csak még nem megy annyira, 3 napja bolondítom :D

  48. BonFire (http://bonfire.blog.hu/) says:

    Gondoltam, hogy ott van, csak nem vetted észre, azért is tettem be a képet segítségnek.

  49. bubu001 says:

    “Ha nincs benne, akkor nem Photoshoppal dolgozol :P”

    Köszi Bon, ezen jót kacagtam :D

  50. OLE-3 says:

    A font-os probléma Portable CS3-nál nekem is előjött. Az oka az volt, hogy az egyik gépen olyan fontokkal írtam a képre ami a másikon nem volt fent. A legegyszerűbb megoldás ha az összes szöveges layer-t letörlöd a képről (mentés bezárás, újranyitás) és újra létrehozod. Nekem ezzel megszűnt ez a hiba.

  51. Cr0sMaN says:

    Nahm emberek :) Nekem ez így sikerült!

    http://j.imagehost.org/0821/userbar.jpg

    KB. negyed óra alatt 1. próbálkozásra: Adobe Photoshop CS3

  52. Dávid says:

    Mit szóltok hozzá? Picit eltértem meg kezdő is vagyok de ezt hoztam ki belőle :)

    http://noob.hu/2011/04/20/greenday.png

  53. BonFire (http://bonfire.blog.hu/) says:

    El is kell térni! Attól lesz egyedi.

  54. Dávid says:

    Tutorial alapján csak a csíkozást és a méretet csináltam a többit magamtól :)

  55. Harder (http://blog.harder.hu) says:

    Én is azt mondanám, hogy nem csak lehet, hanem el is kell térni ezektől a tutorial-októl, mert a céljuk legtöbb esetben annyi, hogy a módszert megmutassák és a többi – a lényeg – már rajtad múlik.

Szólj hozzá
a Userbar készítése c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>