Tvorba grafiky – tlačítka

Domov Diskusné Fóra Pomoc: software Tvorba grafiky – tlačítka

Zobrazuje sa 20 príspevkov - 1 až 20 (z celkového počtu 37 )
  • Autor
    Príspevky
  • #101521
    Lukáš Raynor Majer
    Účastník (Participant)

    Viem, že určite je takých programov veľa, preto sa pýtam na konkrétne skúsenosti:

    (uvediem príklad): chcem si spraviť tlačítko na použitie na webovej stránke. Dajme tomu, že mám 64×64 ikonku a chcem vytvoriť tlačítko o rozmere 300×64. Tá ikonka by bola úplne nalavo a zvyšok tlačítka by tvoril nápis (povedzme KONTAKT), ktorý by v rámci volnej časti tlačítka (236×64) presne v strede a ten nápis by mal nejaké to (jednofarebné) pozadie.

    Tlačítka chcem mať ako PNG

    THX

    #389418
    Anonymný
    Neaktívny

    CSS3, co viac k tomu dodat. :) Ikonu ako svg a mas to.

    #389419
    Jozef Remen
    Účastník (Participant)

    Od zaciatku zle. Predne, muselo by to byt nieco velmi specialne, aby si to neurobil cez CSS, cele.
    Ikona v tlacitku moze byt svg symbol umiestneny v jednom velikanskom svg “sprite”‘. So spajanim jednotlivych ikon do spritu pomoze gulp/grunt a prislusny plugin.

    Vyhoda – obrovska modularita riesenia, plna responzivnost bez ohladu na rozlisenie. Moznost kedykolvek zmenit vyzor, vratane ofarbenia svg ikony ako chces a s svg @media queries aj plne zjednodusovanie grafiky pre mensie velkosti (povedzme pri malej velkosti taky detail nepotrebujes).

    Ikony najdes tu:
    http://www.flaticon.com
    http://iconmelon.com

    Pripadne ako font icon (ie 8 a android 2.x compatible):
    fontello.com

    S automatickym prevodom svg do fontov pre fallback (pomocou modernizr) pomoze opat gulp/grunt.

    A takto nejak sa to robi. Koou navodov najdes trebars na css-tricks.com

    Zabudni na png a kadejake somariny. Neflexibilne, tazkopadne, nepouzitelne na responsive design.

    #389421
    Lukáš Raynor Majer
    Účastník (Participant)

    Dajú sa SVG súbory použiť ako klasika png/jpg/ico… alebo na vloženie treba niečo špeciálne?

    #389422
    Lukáš Raynor Majer
    Účastník (Participant)

    https://itunes.apple.com/sk/app/css3-buttonbuilder/id591485692?mt=12

    napr. toto je v AppStore, moje znalosti mi neumožnuju, aby som to komplet zvladol “z hlavy”

    #389425
    Lukáš Raynor Majer
    Účastník (Participant)
    #389426
    Jozef Remen
    Účastník (Participant)

    SVG `symbol` a Good Choice for Icons

    Icon System with SVG Sprites

    Na tlacitka potrebujes jedine element a don vnoreny svg symbol.
    Ako:

    Nastylovat jednou farbou, definovat ako display: inline-block, pripadne pridat zaoblene rohy cez border-radius.

    Brnkacka, responzivne, flat tlacidlo za par chvilok. Pri vyuziti cisto classov mas nieco, co mozes modifikovat do zblbnutia, opakovat na webe aby si sa neopakoval s kodenim atd.

    Na nejake gradienty sa vyprdni, flat.
    A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.
    K tomu css transitions a si vybaveny bez specialnych hovadin a software. Staci textovy editor a illustrator.

    #389430
    Lukáš Raynor Majer
    Účastník (Participant)

    mám sa čo učiť :-D

    ten Illustrator je moc drahý :-(

    stačí mi základ

    teraz mám ako ten textový editor Coda 2 a FTP klient mám tiež. Čo všetko by som si mal ešte zohnat?

    nič profesionálne, proste ako home hobby :-)

    zo mňa dobrý kóder nebude, som vizuálny (nie matematický) typ

    #389436
    Lukáš Raynor Majer
    Účastník (Participant)

    https://itunes.apple.com/sk/app/buttons/id466445819?mt=12

    to, čo viem, som sa učil čítaním zdrojákov. Stojí tento program za niečo?

    #389438
    Andrej Mikula
    Účastník (Participant)

    Nestojí. Netreba ti žiadny grafický program. V dnešnej dobe 90% tlačítok, ktoré na internete vidíš nie sú obrázky. Sú “nakreslené” cez tzv. kaskádové štýly – CSS.
    Ak CSS neovládaš, na internete je veľa generátorov toho kódu.
    Ja používam napríklad toto: http://buttonoptimizer.com/

    #389439
    Jozef Remen
    Účastník (Participant)

    Lukas, tiez som vizualny typ, tiez musim vidiet ako sa co robi aby mi to bolo uplne jasne. Skusim nieco pripravit a hodim Ti link.

    #389443
    hatto
    Účastník (Participant)

    Jozef: toto nemas pravdu “A bez png usetris kvantum http reuqestov na server, takze stranka sa bude nacitavat vyrazne rychlejsie.”

    porovnaj si ikonu v svg a png (napr 64×64) a zistis ze png ma menej bytov (zalezi aj od zlozitosti ikony – cim zlozitost ikonky je v neprospech svg). a este ak vytvoris sprite z viacerych tak budes mat jeden request a menej kb ako pri svg. a plus to co si pisal, ze automaticky prevod na font. to je sice pekne, len fonty sa nevykresluju vsade rovnako + musis stahovat font + k nemu prisluchajuce css.

    je to dobre riesenie, a urcite to zachvilu nahradi png-cka ale nie je je to dokonale a zalezi skor od konkretneho pripadu ze ci je lepsie svg alebo png. a hlavne kym este treba robit webky pre ie8 alebo nebodaj pre ie7.

    kazdopadne suhlasim s tym co tu bolo pisane – button sa nerobi ako obrazok, jedine ikonku do neho. takze viac ako Moj button nepotrebujes. a v css vlozis ikonku bud ako background alebo pomocou :before/:after

    #389451
    Jozef Remen
    Účastník (Participant)

    Hatto, samozrejme, ze narocnost vektorov stupa, ak vyrabas hovadiny s tienikmi, komplikovanymi (extremne) tvarmi atd., alev porovnani s png to ma obrovske vyhody. Sorry, SVG je tu od roku 98, snad by sa patrilo ho aj zacat pouzivat prave na tieto ucely.

    Vzdy je mozno pouzit icon font prednostne, hlavne po tom, ako sa Chrome pre Windows uz naucil pisma vykreslovat ako-tak pouzitelne. Icon font ma ale svoje limity. Inak stahujes tiez len 1 font subor (1 request) s malym objemom dat (pad desiatok kB), navyse velmi dobre gzipovatelne na serveri.
    Prisluchajuce Css mas vo svojom skomprimovanom min.css subore, pricom rozpis @font-face robis do parcialneho suboru cez mixin v Scss/Sass, Less alebo whatever.
    Samozrejme mas pravdu s moznym zlym vykreslovanim (hlavne IE 8 a Opera mini), ale ruku na srdce – seriously?

    Png uz vazne nie. Flexibilta je velmi slaba, responzivita = velke subory + horsia skalovatelnost bitmapy a v pripade flat ikon datove uspory nie su nic extra.
    Kazdopadne ak ozelieme kompatibilitu s primitivnymi browsermi (aj toto sa da poriesit gulp/grunt prevodom do PNG+Modernizr, ked nie icon font) sme vybaveni.

    #389543
    Lukáš Raynor Majer
    Účastník (Participant)

    takže, tu je screenshot od bratranca: http://www.stanislavknopp.net//files/141616516.png

    prečo je ten web taký úzky?

    (pozn.: z menu ide len tlačítko Domov, presmeruje na google.sk)

    #389545
    Jozef Remen
    Účastník (Participant)

    uzky je preto, lebo nema dostatocne mnozstvo obsahu. Sirka tlacitok je dana textom v nich, ak ju chces vacsiu, tak len pouzit velky padding, alebo flexbox.

    Obsah dole (zemegula) ma proste tak definovany rozmer samotneho obrazku.
    Proste tu plochu nema co vykryt preto to je take uzke :)

    Vzasade nic nedefinovat v pixeloch, ale percentach. A neuzatvarat web stranku do nejakeho chlieva s pixelovo urcenou sirkou, to je picovina.

    #389546
    Lukáš Raynor Majer
    Účastník (Participant)

    obrazok Zemeguľe som dal ako:

    Raynor's World

    Funguje to vôbec?

    #389547
    hatto
    Účastník (Participant)

    nikdy!! ‘style’ do html nevkladas!!! na to je css
    a to preco je to tak, potrebujeme viac nez toto

    #389548
    Lukáš Raynor Majer
    Účastník (Participant)

    ok, hodil som to do CSS

    Raynor's World

    .earth {
    max-width: 100%;
    height: auto;
    margin: 0px auto;
    display: block;
    }

    #389549
    hatto
    Účastník (Participant)

    chces to mat na celu obrazovku ci ako?
    lebo si dal max-width – to znamena ze maximalne bude na 100, inak bude mat svoju originalnu velkost ten obrazok

    #389552
    Jozef Remen
    Účastník (Participant)

    Musis classu .earth definovat ako width: 100%, alebo menej, ale v percentach. Na to ale nemas rozlisenie obrazku dostatocne.

    Takisto, obidva

    , ktore obaluju obrazok aj text (vitajte) mozes odstranit, su tam nadbytocne. To same plati o .block-menu_main, ktory obaluje menu 2x.

    Hlavnu navigaciu by som urcite dal do

Zobrazuje sa 20 príspevkov - 1 až 20 (z celkového počtu 37 )
  • Musíte byť prihlásený, aby ste mohli odpovedať na túto tému.