{"id":21513,"date":"2023-04-24T00:00:00","date_gmt":"2023-04-24T00:00:00","guid":{"rendered":"https:\/\/megnyitasa.com\/tudas\/szemet-gyonyorkodteto-webgombok-tervezese-illustratorral\/"},"modified":"2023-04-24T00:00:00","modified_gmt":"2023-04-24T00:00:00","slug":"szemet-gyonyorkodteto-webgombok-tervezese-illustratorral","status":"publish","type":"post","link":"https:\/\/megnyitasa.com\/tudas\/szemet-gyonyorkodteto-webgombok-tervezese-illustratorral\/","title":{"rendered":"Szemet gy\u00f6ny\u00f6rk\u00f6dtet\u0151 webgombok tervez\u00e9se Illustratorral"},"content":{"rendered":"
\n
<\/div>\n

A webgombok minden weboldal tervez\u00e9s\u00e9nek l\u00e9nyeges elemei, mivel felkeltik a l\u00e1togat\u00f3k figyelm\u00e9t, \u00e9s seg\u00edtenek eligazodni a weboldal k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e9szei k\u00f6z\u00f6tt. A webgombok l\u00e9trehoz\u00e1sa kih\u00edv\u00e1st jelent\u0151 feladat lehet, de az Adobe Illustrator seg\u00edts\u00e9g\u00e9vel leny\u0171g\u00f6z\u0151 webgombokat hozhat l\u00e9tre, amelyek jav\u00edtj\u00e1k a webhely \u00e1ltal\u00e1nos diz\u00e1jnj\u00e1t. Ebben a cikkben eligaz\u00edtjuk, hogyan hozhat l\u00e9tre webes gombokat az Illustrator programmal. <\/p>\n

<\/div>\n
<\/div>\n

1. l\u00e9p\u00e9s: A munkater\u00fclet be\u00e1ll\u00edt\u00e1sa <\/p>\n

<\/div>\n

Miel\u0151tt elkezden\u00e9 a gombok l\u00e9trehoz\u00e1s\u00e1t, \u00e1ll\u00edtsa be a munkater\u00fclet\u00e9t az Adobe Illustrator elind\u00edt\u00e1s\u00e1val \u00e9s egy \u00faj dokumentum l\u00e9trehoz\u00e1s\u00e1val. \u00c1ll\u00edtsa be a dokumentum m\u00e9reteit a gomb m\u00e9ret\u00e9nek \u00e9s felbont\u00e1s\u00e1nak megfelel\u0151en. Webes grafik\u00e1khoz 72 k\u00e9ppont\/inch \u00e9rt\u00e9ket aj\u00e1nlunk. <\/p>\n

<\/div>\n

2. l\u00e9p\u00e9s: V\u00e1lassza ki az alakzat eszk\u00f6zt <\/p>\n

<\/div>\n

V\u00e1lassza ki az alakzat eszk\u00f6zt az eszk\u00f6zt\u00e1ron, \u00e9s v\u00e1lassza ki a gombj\u00e1hoz haszn\u00e1lni k\u00edv\u00e1nt alakzatot. Az Illustrator t\u00f6bbf\u00e9le alakzatot k\u00edn\u00e1l, t\u00f6bbek k\u00f6z\u00f6tt t\u00e9glalapot, lekerek\u00edtett t\u00e9glalapot, ellipszist \u00e9s soksz\u00f6get. B\u00e1rmelyik alakzatot kiv\u00e1laszthatja, amelyik megfelel a terv\u00e9nek. <\/p>\n

<\/div>\n

3. l\u00e9p\u00e9s: A gomb l\u00e9trehoz\u00e1sa <\/p>\n

<\/div>\n

Rajzolja meg a gomb alakj\u00e1t az alakzat eszk\u00f6zre val\u00f3 kattint\u00e1ssal \u00e9s h\u00faz\u00e1ssal a v\u00e1sznon. Miut\u00e1n l\u00e9trehozta az alakzatot, adjon egy kit\u00f6lt\u0151sz\u00ednt a gombj\u00e1hoz az eszk\u00f6zt\u00e1ron tal\u00e1lhat\u00f3 kit\u00f6lt\u0151sz\u00edn opci\u00f3ra kattintva. A gombhoz vonalk\u00e1z\u00e1si sz\u00ednt is hozz\u00e1adhat a vonalk\u00e1z\u00e1si sz\u00edn opci\u00f3 kiv\u00e1laszt\u00e1s\u00e1val. <\/p>\n

<\/div>\n

4. l\u00e9p\u00e9s: Sz\u00f6veg hozz\u00e1ad\u00e1sa a gombhoz <\/p>\n

<\/div>\n

Ha sz\u00f6veget szeretne hozz\u00e1adni a gombhoz, v\u00e1lassza ki az eszk\u00f6zt\u00e1rb\u00f3l a bet\u0171k\u00e9sz\u00edt\u0151 eszk\u00f6zt, \u00e9s kattintson a v\u00e1sznon arra a helyre, ahov\u00e1 a sz\u00f6veget szeretn\u00e9 hozz\u00e1adni. \u00cdrja be a sz\u00f6veget, \u00e9s v\u00e1lassza ki a bet\u0171t\u00edpus st\u00edlus\u00e1t, m\u00e9ret\u00e9t \u00e9s sz\u00edn\u00e9t az eszk\u00f6zt\u00e1ron el\u00e9rhet\u0151 lehet\u0151s\u00e9gek k\u00f6z\u00fcl. A sz\u00f6veg poz\u00edci\u00f3j\u00e1t is be\u00e1ll\u00edthatja, ha r\u00e1kattint, \u00e9s a k\u00edv\u00e1nt helyre h\u00fazza. <\/p>\n

<\/div>\n

5. l\u00e9p\u00e9s: A gomb export\u00e1l\u00e1sa <\/p>\n

<\/div>\n

Miut\u00e1n elk\u00e9sz\u00edtette a gombot, export\u00e1lja azt PNG- vagy JPEG-f\u00e1jlk\u00e9nt a F\u00e1jl>Export\u00e1l\u00e1s gombra kattintva. V\u00e1lassza ki a k\u00edv\u00e1nt f\u00e1jlform\u00e1tumot, nevezze el a f\u00e1jlt, v\u00e1lassza ki a ment\u00e9si helyet, \u00e9s kattintson az Export\u00e1l\u00e1s gombra. <\/p>\n

<\/div>\n

\u00d6sszefoglalva, a webgombok k\u00e9sz\u00edt\u00e9se az Illustrator programmal egyszer\u0171 folyamat, amely jav\u00edthatja webhelye \u00e1ltal\u00e1nos megjelen\u00e9s\u00e9t \u00e9s hangulat\u00e1t. A fent eml\u00edtett l\u00e9p\u00e9seket k\u00f6vetve leny\u0171g\u00f6z\u0151 gombokat hozhat l\u00e9tre, amelyek felkeltik a l\u00e1togat\u00f3k figyelm\u00e9t, \u00e9s jav\u00edtj\u00e1k a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Legyen teh\u00e1t kreat\u00edv, \u00e9s tervezze meg webes gombjait az Illustrator seg\u00edts\u00e9g\u00e9vel m\u00e9g ma!<\/p><\/div>\n

\n
FAQ<\/div>\n
\n
Lehet hiperhivatkoz\u00e1sokat k\u00e9sz\u00edteni Illustratorban?<\/div>\n

Igen, lehets\u00e9ges hiperhivatkoz\u00e1sokat l\u00e9trehozni az Adobe Illustratorban. Fontos azonban megjegyezni, hogy az Illustratorban a hiperhivatkoz\u00e1sokat els\u0151sorban interakt\u00edv PDF-ek l\u00e9trehoz\u00e1s\u00e1ra haszn\u00e1lj\u00e1k, amelyek hasznosak lehetnek digit\u00e1lis portf\u00f3li\u00f3k, bros\u00far\u00e1k vagy m\u00e1s t\u00edpus\u00fa dokumentumok bemutat\u00e1s\u00e1ra. <\/p>\n

<\/div>\n

Hiperhivatkoz\u00e1s l\u00e9trehoz\u00e1s\u00e1hoz az Illustratorban k\u00f6vesse az al\u00e1bbi l\u00e9p\u00e9seket: <\/p>\n

<\/div>\n

1. Jel\u00f6lje ki azt az objektumot vagy sz\u00f6veget, amelyet hiperhivatkoz\u00e1ss\u00e1 szeretne alak\u00edtani. <\/p>\n

<\/div>\n

2. Menjen az „Ablak” men\u00fcbe, \u00e9s v\u00e1lassza az „Attrib\u00fatumok” lehet\u0151s\u00e9get. <\/p>\n

<\/div>\n

3. Az „Attrib\u00fatumok” panelen kattintson az „\u00daj hiperhivatkoz\u00e1s” gombra. <\/p>\n

<\/div>\n

4. Az „\u00daj hiperhivatkoz\u00e1s” p\u00e1rbesz\u00e9dpanelen v\u00e1lassza ki a l\u00e9trehozand\u00f3 hiperhivatkoz\u00e1s t\u00edpus\u00e1t (pl. URL, e-mail, oldal). <\/p>\n

<\/div>\n

5. Adja meg azt az URL-c\u00edmet, e-mail c\u00edmet vagy oldalsz\u00e1mot, amelyre a hiperhivatkoz\u00e1s mutatni k\u00edv\u00e1n. <\/p>\n

<\/div>\n

6. Kattintson az „OK” gombra a hiperhivatkoz\u00e1s ment\u00e9s\u00e9hez. <\/p>\n

<\/div>\n

Miut\u00e1n l\u00e9trehozott egy hiperhivatkoz\u00e1st az Illustratorban, export\u00e1lhatja a dokumentumot interakt\u00edv PDF-k\u00e9nt, \u00e9s tesztelheti a hiperhivatkoz\u00e1st, hogy megbizonyosodjon a helyes m\u0171k\u00f6d\u00e9sr\u0151l. Fontos megjegyezni, hogy a hiperhivatkoz\u00e1sok nem minden PDF-megjelen\u00edt\u0151ben m\u0171k\u00f6dnek, ez\u00e9rt aj\u00e1nlott a dokumentumot t\u00f6bb megjelen\u00edt\u0151ben is tesztelni, miel\u0151tt megosztan\u00e1 m\u00e1sokkal. <\/p>\n<\/div>\n

\n
Hogyan hozhatok l\u00e9tre ICO f\u00e1jlt Illustratorban?<\/div>\n

Az ICO-f\u00e1jl l\u00e9trehoz\u00e1sa az Illustratorban n\u00e9h\u00e1ny egyszer\u0171 l\u00e9p\u00e9st foglal mag\u00e1ban. Az ICO-f\u00e1jlok a Windows oper\u00e1ci\u00f3s rendszerben ikonok megjelen\u00edt\u00e9s\u00e9re szolg\u00e1lnak, \u00e9s \u00e1ltal\u00e1ban szoftveralkalmaz\u00e1sok vagy f\u00e1jlok \u00e1br\u00e1zol\u00e1s\u00e1ra haszn\u00e1lj\u00e1k \u0151ket. Az al\u00e1bbiakban l\u00e9p\u00e9sr\u0151l l\u00e9p\u00e9sre bemutatjuk, hogyan hozhat l\u00e9tre ICO-f\u00e1jlt az Illustratorban: <\/p>\n

<\/div>\n

1. l\u00e9p\u00e9s: Nyissa meg az Illustratort \u00e9s hozzon l\u00e9tre egy \u00faj dokumentumot <\/p>\n

<\/div>\n

Nyissa meg az Adobe Illustratort a sz\u00e1m\u00edt\u00f3g\u00e9p\u00e9n, \u00e9s hozzon l\u00e9tre egy \u00faj dokumentumot. A dokumentum m\u00e9ret\u00e9t \u00e9s felbont\u00e1s\u00e1t ig\u00e9nyei szerint v\u00e1laszthatja ki. Aj\u00e1nlott n\u00e9gyzet alak\u00fa dokumentumm\u00e9retet haszn\u00e1lni, p\u00e9ld\u00e1ul 256 x 256 k\u00e9ppontot, mivel az ICO f\u00e1jlok n\u00e9gyzet alak\u00faak. <\/p>\n

<\/div>\n

2. l\u00e9p\u00e9s: Tervezze meg az ikonj\u00e1t <\/p>\n

<\/div>\n

Haszn\u00e1lja az Illustrator eszk\u00f6zeit \u00e9s funkci\u00f3it az ikontervez\u00e9shez. Haszn\u00e1lhat form\u00e1kat, vonalakat, sz\u00edneket \u00e9s egy\u00e9b tervez\u00e9si elemeket az ikon l\u00e9trehoz\u00e1s\u00e1hoz. Ne feledje, hogy az ICO f\u00e1jlok jellemz\u0151en kis m\u00e9ret\u0171ek, ez\u00e9rt fontos, hogy a design egyszer\u0171 \u00e9s k\u00f6nnyen felismerhet\u0151 legyen. <\/p>\n

<\/div>\n

3. l\u00e9p\u00e9s: Mentse el az ikonj\u00e1t PNG-f\u00e1jlk\u00e9nt <\/p>\n

<\/div>\n

Ha elk\u00e9sz\u00fclt az ikonterve, mentse el PNG-f\u00e1jlk\u00e9nt. Ehhez v\u00e1lassza a F\u00e1jl > Export\u00e1l\u00e1s men\u00fcpontot, majd v\u00e1lassza a PNG f\u00e1jlform\u00e1tumot. V\u00e1lasszon egy helyet a f\u00e1jl ment\u00e9s\u00e9hez, majd kattintson az Export\u00e1l\u00e1s gombra. <\/p>\n

<\/div>\n

4. l\u00e9p\u00e9s: A PNG-f\u00e1jl \u00e1talak\u00edt\u00e1sa ICO-f\u00e1jll\u00e1 <\/p>\n

<\/div>\n

Sz\u00e1mos online konverter l\u00e9tezik, amely k\u00e9pes a PNG-f\u00e1jlt ICO-f\u00e1jll\u00e1 alak\u00edtani. Az egyik n\u00e9pszer\u0171 lehet\u0151s\u00e9g az ICO Convert. Menjen az ICO Convert weboldal\u00e1ra, \u00e9s t\u00f6ltse fel a PNG-f\u00e1jlt. V\u00e1lassza ki az ICO form\u00e1tumot, \u00e9s kattintson a Convert gombra. A weboldal l\u00e9trehoz egy ICO-f\u00e1jlt, amelyet let\u00f6lthet a sz\u00e1m\u00edt\u00f3g\u00e9p\u00e9re. <\/p>\n

<\/div>\n

5. l\u00e9p\u00e9s: Az ICO f\u00e1jl felhaszn\u00e1l\u00e1sa <\/p>\n

<\/div>\n

Ha m\u00e1r megvan az ICO f\u00e1jl, akkor azt szoftveralkalmaz\u00e1sa vagy f\u00e1jlja megjelen\u00edt\u00e9s\u00e9re haszn\u00e1lhatja. ICO f\u00e1jlj\u00e1nak haszn\u00e1lat\u00e1hoz kattintson a jobb gombbal a f\u00e1jlra vagy az alkalmaz\u00e1sra, \u00e9s v\u00e1lassza a Tulajdons\u00e1gok men\u00fcpontot. Ezut\u00e1n kattintson a Testreszab\u00e1s f\u00fclre, \u00e9s kattintson az Ikon m\u00f3dos\u00edt\u00e1sa gombra. Tall\u00f3zzon az ICO f\u00e1jlja hely\u00e9re, \u00e9s v\u00e1lassza ki azt. Kattintson az OK gombra az \u00faj ikon alkalmaz\u00e1s\u00e1hoz. <\/p>\n<\/div>\n

\n
Hogyan adhatok hozz\u00e1 egy kattint\u00e1shat\u00e1s gombot?<\/div>\n

Kattint\u00e1shat\u00e1s\u00fa gomb hozz\u00e1ad\u00e1s\u00e1hoz el\u0151sz\u00f6r ki kell v\u00e1lasztania egy olyan tervez\u0151eszk\u00f6zt, amely lehet\u0151v\u00e9 teszi anim\u00e1ci\u00f3s hat\u00e1sokkal ell\u00e1tott gombok l\u00e9trehoz\u00e1s\u00e1t. N\u00e9h\u00e1ny n\u00e9pszer\u0171 tervez\u0151eszk\u00f6z, amely ezt a funkci\u00f3t k\u00edn\u00e1lja, az Adobe XD, a Figma \u00e9s a Sketch. <\/p>\n

<\/div>\n

Miut\u00e1n kiv\u00e1lasztotta a tervez\u0151eszk\u00f6zt, k\u00f6vesse az al\u00e1bbi l\u00e9p\u00e9seket: <\/p>\n

<\/div>\n

1. V\u00e1lasszon olyan gombform\u00e1t \u00e9s -m\u00e9retet, amely megfelel a tervez\u00e9si eszt\u00e9tik\u00e1nak \u00e9s a weboldal elrendez\u00e9s\u00e9nek. <\/p>\n

<\/div>\n

2. K\u00e9sz\u00edtse el a gomb alap\u00e1llapot\u00e1t, vagyis azt, hogy hogyan n\u00e9z ki a gomb, ha nem kattintanak r\u00e1. <\/p>\n

<\/div>\n

3. K\u00e9sz\u00edtsd el a gombod m\u00e1sodik \u00e1llapot\u00e1t, amely akkor n\u00e9z ki, amikor r\u00e1kattintanak. Ennek az \u00e1llapotnak tartalmaznia kell egy anim\u00e1ci\u00f3s effektet, amely a gombot \u00fagy t\u00fcnteti fel, mintha lenyomn\u00e1k. <\/p>\n

<\/div>\n

4. K\u00f6ss\u00fck \u00f6ssze a k\u00e9t \u00e1llapotot \u00fagy, hogy amikor a felhaszn\u00e1l\u00f3 r\u00e1kattint a gombra, az anim\u00e1ci\u00f3s effekt elinduljon. <\/p>\n

<\/div>\n

5. Teszteld a gombodat, hogy meggy\u0151z\u0151dj arr\u00f3l, hogy megfelel\u0151en m\u0171k\u00f6dik \u00e9s vizu\u00e1lisan is tetszet\u0151s. <\/p>\n

<\/div>\n

Fontos megjegyezni, hogy b\u00e1r egy kattint\u00e1shat\u00e1s\u00fa gomb hozz\u00e1ad\u00e1sa jav\u00edthatja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt \u00e9s vonz\u00f3bb\u00e1 teheti webhely\u00e9t, nem szabad, hogy elvonja a figyelmet webhelye \u00e1ltal\u00e1nos c\u00e9lj\u00e1t\u00f3l. Gy\u0151z\u0151dj\u00f6n meg r\u00f3la, hogy a gomb egy\u00e9rtelm\u0171 \u00e9s k\u00f6nnyen haszn\u00e1lhat\u00f3, \u00e9s hogy illeszkedik a webhelye \u00e1ltal\u00e1nos diz\u00e1jnj\u00e1ba.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

A webgombok minden weboldal tervez\u00e9s\u00e9nek l\u00e9nyeges elemei, mivel felkeltik a l\u00e1togat\u00f3k figyelm\u00e9t, \u00e9s seg\u00edtenek eligazodni a weboldal k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e9szei k\u00f6z\u00f6tt. A webgombok l\u00e9trehoz\u00e1sa kih\u00edv\u00e1st jelent\u0151 feladat lehet, de az Adobe Illustrator seg\u00edts\u00e9g\u00e9vel leny\u0171g\u00f6z\u0151 webgombokat hozhat l\u00e9tre, amelyek jav\u00edtj\u00e1k a webhely \u00e1ltal\u00e1nos diz\u00e1jnj\u00e1t. Ebben a cikkben eligaz\u00edtjuk, hogyan hozhat l\u00e9tre webes gombokat az Illustrator programmal. 1. … Read more<\/a><\/p>\n","protected":false},"author":264,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-21513","post","type-post","status-publish","format-standard","hentry","category-uzleti-tervezes-es-strategia"],"_links":{"self":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts\/21513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/users\/264"}],"replies":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/comments?post=21513"}],"version-history":[{"count":0,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts\/21513\/revisions"}],"wp:attachment":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/media?parent=21513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/categories?post=21513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/tags?post=21513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}