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.

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

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

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. :)

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.

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

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

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.

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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

55 HOZZÁSZÓLÁS

  1. 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.

  2. 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…

  3. 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

  4. 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

  5. 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.

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

  7. 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 :)

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

  9. 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!

  10. 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.

  11. 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

  12. 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.

  13. 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?

  14. 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.

  15. Ü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.

  16. 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.

  17. 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.

  18. 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.

  19. 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ó…

  20. 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.

  21. 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!

  22. 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.

  23. 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

  24. 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?

  25. á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 :(

  26. 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.

  27. Ü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

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

  29. 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.

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

  31. 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.

  32. 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

  33. „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.

  34. 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

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

  36. „Ha nincs benne, akkor nem Photoshoppal dolgozol :P”

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

  37. 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.

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

  39. É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.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét