Adobe Photoshop Elements Skapa bakgrundsbilder för webbsidor

Transkript

1 1 Adobe Photoshop Elements Skapa bakgrundsbilder för webbsidor Du kan använda ett foto som bakgrundsbild för en webbsida. Men om du använder ett fyrfärgsfoto som är stort nog att fylla en hel webbsida skapar du en enorm fil som det krävs stor bandbredd för att hämta. I det här tipset får du lära dig hur du använder Adobe Photoshop Elements till att skapa en snygg monokrom bakgrundsbild som är stor nog att fylla en webbsida, men där filstorleken blir liten så att det går snabbt att hämta den. Nu ska vi färglägga fotot,och därefter ska vi minska filstorleken genom att använda något som kallas optimering. 2. Färglägga fotot Välj Förbättra > Färg > Nyans/Mättnad. Välj alternativet Färga. Justera bildens färger och ljus med hjälp av skjutreglagen Nyans, Mättnad och Ljushet. Kontrollera att alternativet Förhandsvisa är markerat i dialogrutan Nyans/Mättnad, så dina ändringar förhandsvisas i dokumentfönstret. 1. Öppna ett fyrfärgsfoto Öppna det färgfoto som du vill använda som bakgrundsbild. Om du vill ändrar du storleken på det eller beskär det. För att bilden ska fylla en hel webbsida bör den vara minst pixlar bred och pixlar hög. Tänk på hur detaljerat det foto är som du väljer. Om du använder en bakgrundsbild med för mycket detaljer kan det bli svårt att läsa webbsidan.

2 ADOBE PHOTOSHOP ELEMENTS Skapa bakgrundsbilder för webbsidor 2 3. Göra bilden subtil Experimentera med färgerna och mättnaden för bilden. Tänk på läsbarheten för webbsidan när du ändrar färgerna i den färglagda bilden. Mörka, mättade bakgrundsbilder kan minska läsbarheten för texten, medan mjuka, neutrala färger ofta hjälper upp en bra webbdesign. Nu kan du använda bilden som bakgrund för en webbsida. Skapa webbsidan med hjälp av ett HTMLredigeringsprogram, t.ex. Adobe GoLive. När du är nöjd med färgerna i bilden klickar du på OK. Nu måste vi optimera bilden så att filstorleken för bilden blir så liten som möjligt. 4. Optimera den färglagda bilden Välj Arkiv > Spara för webben. Därefter väljer du antingen GIF eller JPEG på menyn i dialogrutan Spara för webben. I vårt exempel valde vi JPEG. Även om GIFformat ger mindre filer än JPEG så är det bättre att använda JPEG eftersom du då kan förhindra att gittereffekter uppstår och bibehålla detaljer i foton med kontinuerlig ton. Om du väljer JPEG väljer du Låg för optimering så blir filstorleken mindre. Du behöver inte välja högre bildkvalitet eftersom bilden bara ska användas som bakgrund. Du kan förhandsvisa den optimerade bilden i dialogrutan. Klicka på OK så optimeras bilden. 5. Lägga till fler element till webbsidan (Valfritt) Om du vill kan du lägga till element som text, knappar och bilder på webbsidan. I så fall bör de elementen passa ihop med den bakgrundsbild du skapat. Eftersom bakgrundsbilder repeteras i ett mönster tvärs över och nedåt i webbläsarfönster bör du anpassa innehållet på webbsidan efter storleken på den första rutan. Om du gör det behöver inte de som läser sidan bläddra till nästa repeterade ruta för att se allt innehåll. Adobe, Adobe-logotypen och Photoshop är antingen registrerade varumärken eller varumärken som tillhör Adobe Systems Incorporated i USA och/eller i andra länder Adobe Systems Incorporated. Alla rättigheter förbehålles.

3 1 Adobe Photoshop Elements Skapa webbfotogallerier Vill du ordna dina bilder i ett onlinegalleri? Behöver du snabbt sätta ihop en katalog att visa för en presumtiv kund? I det här tipset får du lära dig hur du använder verktyget Webbfotogalleri i Adobe Photoshop Elements till ett generera att galleri med enkla navigeringsfunktioner som du sedan kan visa i webbläsare. Sedan väljer du Rubrik på menyn Alternativ och anger rubriken för ditt webbfotogalleri i fältet Platsnamn. Om du vill kan du fylla i fälten Fotograf och Datum. Om du vill ändra hur texten visas i rubriken använder du menyerna Teckensnitt och Teckensnittsstorlek. Ju högre nummer du väljer på menyn Teckensnittsstorlek desto större blir teckensnittsstorleken. Vi valde stilen Lodrät bildruta för galleriet, och för rubriken valde vi Helvetica/Arial med standardstorleken Konfigurera dina bildfiler Placera alla dina bilder i en mapp (kallas källmappen). Du bör också skapa en målmapp där alla de HTML- och bildfiler som skapas för webbgalleriet ska placeras. 3. Ange hur bilderna ska visas Du kan välja om du vill att galleribilderna ska visas med ramar, om storleken på dem ska ändras eller inte och vilken optimeringsnivå du vill använda. 2. Välja ett format och konfigurera en rubrik Välj Arkiv > Automatisera > Webbfotogalleri. En dialogruta öppnas. Välj stil för galleriet med hjälp av menyn Stilar. En förhandsvisning av alla stilar visas i den högra sidan av dialogrutan. Välj Galleribilder på menyn Alternativ. Ange värden i fälten. Om du inte vill ändra storleken på bilderna avmarkerar du Ändra storlek på bilder. Genom att dra i skjutreglaget för JPEG-optimering kan du välja om du vill skapa stora eller små bilder.

4 ADOBE PHOTOSHOP ELEMENTS Skapa webbfotogallerier 2 Vi lät Ändra storlek på bilder vara markerat och använde standardvärdena för de andra inställningarna. 6. Välja käll- och målmappar Klicka på Källa under Filer i dialogrutan och bläddra efter den mapp som innehåller de bilder du vill visa i galleriet. Sedan klickar du på Mål och väljer den mapp du vill skapa bild- och HTML-filerna för webbfotogalleriet i. 4. Ange utseende för miniatyrbilderna Du kan ändra utseendet på och texten för miniatyrbilderna i galleriet. Välj Galleriminiatyrbilder på menyn Alternativ. Välj Använd filnamn om du vill att filnamnen på bilderna ska visas under miniatyrbilden. Om du vill skriva en text väljer du Använd filinformation. 7. Visa galleriet i en webbläsare Klicka på OK så skapas webbfotogalleriet. HTML- och JPEG-filerna för webbfotogalleriet placeras i målmappen. När processen är slutförd visas webbfotogalleriet i ett webbläsarfönster. 5. Göra galleriet färgglatt Du kan använda standardfärgen för bakgrunder (vitt) eller välja en annan färg. Du kan också ange egna färger för text och länkar. Välj Egna färger på menyn Alternativ. Ändra färgerna med hjälp av färgväljaren. Adobe, Adobe-logotypen och Photoshop är antingen registrerade varumärken eller varumärken som tillhör Adobe Systems Incorporated i USA och/eller i andra länder Adobe Systems Incorporated. Alla rättigheter förbehålles.

5 Sida 1 av 8 skriv ut» Upplösning och grafik Bildskärmens upplösning I takt med att priserna sjunker på större bildskärmar så är det också fler användare som får tillgång till skärmar i storleken 17 tum, 19 tum eller 21 tum men många användare har fortfarande bara tillgång till 15 tums eller 17 tums skärmstorlek. På Weblänksidan» finns statistik över vad olika tjänsters besökare använder för utrustning. En större bildskärmsyta betyder inte att man ser mer av sidans innehåll. Det är istället bildskärmens upplösning som har betydelse för hur mycket information som kan visas på skärmen. Upplösningen på en bildskärm uttrycks i enheten Pixlar. Fler pixlar innebär att mer information kan visas på en given yta. Standardupplösningen har tidigare varit 800 pixlars bredd och 600 pixlars höjd men idag använder många upplösningen 1024x768 pixlar eller 1280x1024 pixlar och det är förmodligen de upplösningarna du bör inrikta dig på. Tidigare användes bara bildskärmar med bildrör till stationära datorer men idag kan du välja en platt bildskärm (flat screen) som tidigare bara fanns till bärbara datorer. Vissa platta bildskärmar kan också användas till TV-mottagning och storlekar i tum varierar stort. Detta innebär ju att upplösningen på bildskärmarna kommer att variera ännu mera än tidigare. Här är exempel på kombinationer av upplösningar: Bildskärm (bildrör) PC 640x x x x x1280 Bärbara PC och platta bildskärmar (LCD - plasma) 1400x x x x x x x1536 Nedan ser du några exempel på hur upplösningen påverkar utseendet på websidan. Notera att bildskärmen ju alltid har sin fasta storlek tex tum men antalet pixlar som visas i bredd och höjd på den givna ytan kan variera enligt exemplen nedan. 640x480 pixlar

6 Sida 2 av 8 800x600 pixlar 1024x768 pixlar

7 Sida 3 av x1024 pixlar Din egen skärmupplösning? Vad använder du själv för upplösning och vet du hur du gör för att ändra bildskärmsupplösning och antalet visade färger? Din bildskärm är inställd på: 1024 x 768

8 Sida 4 av 8 För att ändra dina bildskärmsinställningar gör du så här i Windows: 1. Högerklicka på Skrivbordet. 2. Välj menyn: "egenskaper". 3. På den sista fliken "inställningar" ställer du in upplösning och antal färger. Testa olika fönsterstorlekar När du testar dina websidor bör du då och då byta upplösning för att se hur det ser ut "på riktigt". Ett snabbare sätt att kontrollera så att bredd och höjd räcker till är att ändra storleken på ditt webläsarfönster. Du bör egentligen arbeta i högre upplösning än den du anpassar dina sidor för. Med hjälp av ett javascript som finns under länken nedan kan du ange olika värden för upplösningen i bredd och höjd för webläsarfönstret. Klicka på länken nedan för att testa att ändra storlek på ditt webläsarfönster. OBS! Exemplet fungerar inte när sidan ligger i ramar - frames. Klicka och Dra länken nedan till ditt verktygsfält "Länkar" istället: Ändra fönsterstorlek»

9 Sida 5 av 8 Skrivbordsunderlägg med mått! Här kan du ladda ner Webdesignskolans eget skrivbordsunderlägg (se bilden nedan). Med hjälp av det så kan du lätt ändra storlek på ditt webläsarfönster för att "simulera" olika bildskärmsupplösningar när du skapar websidor. Då behöver du inte byta upplösning på din bildskärm för att kontrollera vad som syns eller inte syns av websidan i olika upplösningar. (glöm inte att ändå byta upplösning "på riktigt" ibland för att få det rätta intrycket av textstorlekar mm i den upplösning du anpassar för...) Placera bara ditt webläsarfönster i övre vänstra hörnet och dra sedan i fönsterkanten för att förstora eller förminska till de angivna måtten (Underlägget har angivna mått från 640x480 upp till 1280x1024 pixlar). Använd någon av länkarna nedan. webdesignskolans-skrivbord.bmp (1281 Kb) webdesignskolans-skrivbord.zip (10 Kb) Klicka eller högerklicka på någon av länkarna ovan. (OBS! Välj "Spara mål som/spara länk som... INTE "Spara bild som...) Spar bilden på din hårddisk. För att använda bilden som skrivbordunderlägg: 1. Högerklicka på ditt nuvarande Skrivbord. 2. Välj menyn: "Egenskaper" 3. På den första fliken: "bakgrund" använder du knappen "bläddra..." för att välja bilden som du sparat på din hårddisk. 4. När bilden visas i förgranskningsfönstret ser du till att valet: "sida vid sida" (OBS! Viktigt!) är valt under menyn: "visa:". Det för att underlägget skall upprepas från övre

10 Sida 6 av 8 vänstra hörnet. Grafik på websidor Väntar på nedladdning... Bilder på websidor är idag snarare regel än undantag. Precis som i andra medier gäller det att göra sidorna grafiskt tilltalande för att attrahera och behålla besökare. Samtidigt är det viktigt att grafiken har en liten lagringsstorlek = filstorlek så att nedladdningen till webbläsaren blir snabb. Ingen tycker om att vänta på websidor som är grafiktunga och långsamma. nedan ser du en översikt över vanliga typer av bildformat som du kan använda. Vill du ha mer information om hur du skapar din egen grafik så kan du besöka Webdesignskolans Photoshopskola» eller Illustratorskola». Mest vanlig är av typen Bitmapp som det innebär att bilden är uppbyggd av Pixlar eller Punkter (Bitmap=punktuppbyggd). Att lagra en bild av den typen kräver mycket lagringsutrymme och långa nedladdningstider i webläsaren. Därför används lagringsformat som komprimerar filstorleken. Det finns idag i huvudsak två bildformat som kan användas på websidor: GIF (Compserve Graphics Interchange Format) JPEG (Joint Photographic Experts Group) Formaten stödjer olika färgdjup dvs hur många färger som kan visas i bilden. GIF CompuServe GIF (CompuServe" Graphics Interchange Format) används oftast för att visa dekorfärgsbilder, illustrationer. GIF kan maximalt innehålla 8 Bitars färgdjup = 256 färger och passar oftast bäst till bilder som innehåller mindre än just 256 färger som teckningar, clipart mm. Ger även bra resultat till små fotografier (thumbnails). När du sparar en bild som GIF kan du ange olika egenskaper för bilden:

11 Sida 7 av 8 Transparent = genomskinlig bakgrund Interlaced/Sammanflätad = bilden laddas ner och blir tydligare gradvis Animerad = rörliga bilder. JPEG JPEG (Joint Photographic Experts Group) används oftast för att visa fotografier och andra kontinuerligt tonade bilder.till skillnad från formatet GIF behåller JPEG all färginformation i RGB-bilder (24 Bitars färgdjup = 16,7 miljoner färger). JPEG använder också en komprimering som effektivt minskar dokumentstorleken genom att identifiera och ta bort data som inte är väsentlig för att visa bilden. När du öppnar en JPEG-bild packas den upp automatiskt. Eftersom information tas bort kallas JPEG-komprimering ibland för förlustgivande (lossy). Detta innebär att när en bild har komprimerats och sedan packats upp igen kommer den inte att vara identisk med den ursprungliga bilden. När du spar en bild i JPEG-format så bestämmer du själv kvaliten, ofta i steg från 0 till 10 där 0 ger en liten filstorlek men också sämsta visningskvalitet. Även JPEG bilder kan laddas ner gradvis som en Interlaced GIF, det kallas då Progressive JPEG. Utöver de etablerade webformaten ovan så är flera format under utveckling: PNG Formatet PNG (Portable Network Graphics) utvecklades som ett alternativ till GIF-formatet. Alla programtillverkare som använder GIF får betala licens till upphovsföretaget vilket medfört att ett licensfritt alternativ har varit efterfrågat. PNG bevarar all färginformation (24 Bitars färgdjup = 16,7 miljoner färger) och alla alfa-kanaler i en bild och använder en förlustfri komprimering för att minska dokumentets storlek. När du sparar en bild i PNG-format kan du välja att visa bilden gradvis när den laddas ned. Om du vill göra detta markerar du Adam7 for Interlace. Du kan också välja en filtreringsalgoritm, som används för att förbereda bildinformationen för komprimering. (OBS! PNG stöds inte av Internet Explorer3, Netscape3 och andra äldre webläsare.) FlashPix FlashPix-formatet, utvecklat av Live Picture och Kodak, är anpassat för att öka överföringshastigheten och visningskvalitén av stora och högupplösta bilder. FlashPix-formatet stödjer gråskalor och RGB-färger men inte alfa-kanaler. När du spar i FlashPix-formatet kan du även välja att använda JPEG-komprimering. Idag ägs FlashPix-formatet av organisationen Digital Imaging Group. Tekniken bakom formatet delar upp pixelbaserade bilder i hanterbara delar. Bilden spars i flera delar med olika kvalitet vilket skall göra att det även skall gå att zooma(!) i en bild. SVG SVG (Scalable Vektor Graphics) är ett helt nytt format för Vektorgrafik (teckningar, illustrationer etc). Det är ännu inte standardiserat som ett webformat men kommer troligen att bli en konkurrent till Macromedias Flash! Vektor- och bitmappgrafik De nu gällande bildformaten för websidor är alltså Bitmap-grafik, den andra typen av grafik kallas för Vektorgrafik. Det är oftast tecknade bilder och sk Clipart. Webläsarna kan inte visa vektorgrafik utan tillägsprogram sk plugins. En sådan är Shockwave/Flash. All övrig grafik måste alltså sparas i Bitmap-format även om det är tecknade bilder. Lagringsstorleken brukar dock bli mindre än för fullfärgs-fotografier. Animerad grafik på websidor är normalt i formatet GIF. En animering kan vara allt ifrån text som blinkar till rena "tecknade filmer" Eftersom GIF bara stöder 256 färger är det inte så lämpligt till fotografier. Alternativen till rörlig grafik är videoformat eller andra multimediatillägg, tex Real Player och Shockwave/Flash. I de fallen måste alltså användaren ha plugins installerade på sin PC Här är några exempel på bilder i form av ett foto, en illustration och en animation. Klicka på respektive bild för att se exempel och jämförelse mellan GIF och JPEG:

12 Sida 8 av 8 Bitmappgrafik» Vektorgrafik» Animerad grafik» Läs mer om grafik och bildhantering i Photoshopskolan!» Här är en lathund över vilket bildformat du kan välja. Det är endast en rekommendation, vilket format du väljer beror på bildens egenskaper, storlek, antal färger etc. Prova dig fram! Vilket bildformat ska jag välja? Streckteckningar, Färgteckningar, ClipArt, Logotypes Färgteckningar med toningar Text, enfärgad, fylld eller med effekter Fotografier i fullfärg Fotografier i gråskala Bild med transparent bakgrund Animerade bilder, bild eller text som växlar Bild som laddas ner otydlig och gradvis blir skarpare GIF JPEG GIF JPEG GIF GIF GIF GIF/JPEG Bilderna och grafiken som du använder på dina websidor bör ha en punkttäthet (optisk upplösning) på dpi (dots per inch). Detta beror på att bildskärmen till skillnad från tryckta medier bara klarar av att visa mellan dpi. Vill du veta mer om bild- och grafikhantering för web kan du titta på Photoshopskolan» eller Weblänksidan» [Copyright W e b d e s i g n s k o l a n Materialet får skrivas ut och användas för personligt bruk. Användning i undervisningssyfte är ej tillåten utan vårt tillstånd, läs mer här»]