10. Grafikskolan

Komprimera bilder för webben

2009-11-10 10:18 #0 av: johan-ahlback

Ibland när man gjort en design för en sida kan varje element vara för tunga. Det kan man lösa genom att spara dem för webben i Photoshop.

Först ska jag ge ett tips på hur du kan "klippa" ut dina bilder innan du sparar dem.

Då jag kör med engelsk språkpaket i mitt photoshop just nu så kommer jag skriva menynamnen på engelska

Dölj allt som inte ska vara med. Snabbast gör du det genom att hålla in allt tangenten och klicka på dölj/visa i det lagret du ska ha synligt. Du ska bara ha den delen du ska spara.

1.JPG

2.JPG

Sen går du till menyn och klickar på image och sen på trim. Sen tar du bort alla transparenta pixlar och från alla håll. Klicka på okej. Då försvinner alla heltransparenta pixlar.

3.JPG

Nu ska vi spara bilden. Klicka på arkiv i menyn och välj spara för webb. Då får du upp en ruta där man kan välja vilket format man vill ha.

Nu kommer det som kan vara jobbigt. Att välja rätt format. Har du en bild med en konstant bakgrund ska du antagligen välja Gif. Där kan man ha upp till 256 färger vilket brukar räcka gott och väl. Ska man ha en transparent bakgrund på bilden så är det png-24 som gäller, för Gif kan inte hantera halvtransparenta pixlar.

Tryck på fliken där det står 2-up så kan du se original och den komprimerade versionen. Sen är det bara att testa dig fram.

Tänk på att gamla versioner av internet explorer inte kan tolka png så bra. Så skapa inte hela sidor med png bara för att det blir bäst kvalitet. Håll dig till Gif så mycket du kan.

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-10 12:54 #1 av: Lynxx

Sånt här gillar jag Glad Tack! Totalamatör som man e Skäms Sysslar bara med Ps - men skall så småningom fixa egen sida...

Vet inte om de finns ngn tråd om mått för hur bred forgroundslayouten ska vara t.ex. De finns väl ngt standardmått? Optimala mått för att få en så snabbladdad sida som möjligt.

Hur gör man för att lägga egen bakgrund som täcker oavsett hur brett browserfönstret är  - ex:

http://www.authenticjobs.com/

http://ecoki.com/iphone/

http://www.pressboxstl.com/

http://www.batcetera.com/

http://www.growmedia.ca/

Ja har ju inte tänkt att den ska var lika avancerad som denna dock :-o

http://www.bandit3.com/

-------------

Är Sitegrinder ngt för en som bara fuskar/vill gena (d.v.s. helt saknar hjärnkapacitet för detta med att koda)? Man kan ju sedan alltid, vid behov,  korrigera detaljer i koden sedan med Dreamweaver. Har CS4 Suiten & den börja faktiskt bli nästan användarvänlig t.o.m. för amatörer Flört

Sitegrinder

http://www.medialab.com/sitegrinder/

-------------

Detta kanske e ngt som kan komma till anv för ngn?

14 Most Useful Web Design Cheat Sheets

http://webdesignledger.com/resources/14-most-useful-web-design-cheat-sheets

-------

15 Free Online Tools for Web Designers on a Budget
http://webdesignledger.com/tools/15-free-online-tools-for-web-designers-on-a-budget

--------

Du kan t.ex. testa sajten i olika browsers hos Adobe Browser Lab
https://browserlab.adobe.com/index.html#

/L

Anmäl
2009-11-10 13:16 #2 av: johan-ahlback

När jag ska ha en bakgrund som täcker hela så använder jag oftast en bild som bara är en px bred och sen använder jag repeat-x i css.

Sitegrinder är nog ett bra verktyg för de som inte har tid eller lust att koda själva Flört Men man ska inte lita till sådana program för mycket.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-10 13:23 #3 av: Lynxx

OK Glad

Anmäl
2009-11-10 18:31 #4 av: IdaL

Super Johan Skrattande

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.