Afbeeldingen voor je webshop Wat leer je in dit hoofdstuk: 1. Hoe je een transparante achtergrond maakt in Photoshop 2. Hoe je foto s schaalt (kleiner maakt in pixels) 3. Hoe je meerdere foto s tegelijk kan verkleinen Eindresultaat Kleine bruikbare foto s voor je webshop. Foto s kleiner maken Als je met je fototoestel (product)foto s maakt zijn ze veel te groot voor het gebruik in je webshop. De camera s hebben teveel megapixel. Zou je deze foto s gebruiken, dan duurt het laden van je (product)pagina s veel te lang. MyShop accepteert daarom alleen foto s die kleiner zijn dan 256 Kb. In deze cursus ga je daarom leren hoe je foto s kleiner maakt, maar wel zo dat ze een goede kwaliteit behouden. We gebruiken hiervoor het programma Photoshop van Adobe. Uiteraard kun je de handelingen ook met andere fotobewerkingsprogramma s uitvoeren. Veel succes!
Voorbereidingen 1. Maak de volgende mappen op je USB-stick: - Foto s origineel - Foto s bewerkt - Foto s groot - Foto s klein 2. Download het oefenbestand "Zeepshop.zip van de website www.webshopheld.nl op je USB-stick: (gebruik je eigen foto s: zorg dat ze allemaal dezelfde afmetingen hebben) 3. Plaats de foto s uit het zip-bestand in de map Foto s origineel 4. De foto s hebben nu nog de benaming die de camera er aan heeft gegeven. Dat is niet handig voor je webshop, dus als eerste gaan we de foto s hernoemen. Gebruik daarvoor de volgende namen: Origineel IMG_3114.JPG IMG_3115.JPG IMG_3116.JPG IMG_3117.JPG IMG_3118.JPG Nieuwe naam fruitworks_pink.jpg fruitworks_green.jpg fruitworks_yellow.jpg baby_lief_gel_shampoo_pink baby_lief_gel_shampoo_blue
1 Transparante achtergrond maken 1. Open Photoshop 2. Klik op Bestand / Openen en browse naar map Foto s origineel en kies de foto baby_lief_gel_shampoo_blue.jpg Je gaat nu de foto bewerken en hem geschikter maken voor de webshop. - De grijze achtergrond ga je wit maken - De afbeelding zet je netjes in het midden van de foto. Als eerste gaan we de grijze achtergrond verwijderen. Je hebt daar verschillende manieren voor, maar de meest handige is in dit geval het Tovergummetje. 3. Houd de linkermuisknop ingedukt terwijl je met de aanwijzer op het gummetje staat. Er komt een extra schermpje naar voren. 4. Selecteer Tovergummetje
Bovenin het scherm kun je de Tolerantie van het Tovergummetje instellen: hoe hoger de tolerantie des te meer het gummetje zal weghalen. 5. Stel de tolerantie in op 150 en klik vervolgens ergens op de grijze achtergrond van de foto. Er wordt teveel weggehaald. Je gaat de tolerantie iets lager instellen vanuit de originele afbeelding. Je maakt daarom eerst de laatste actie ongedaan 6. Typ de toetsencombinatie Alt+Ctrl+Z in en maak de laatste actie ongedaan 7. Stel de tolerantie nu in op 100 en klik ergens op de grijze achtergrond. De afbeelding is nu goed zichtbaar en heeft een transparante achtergrond Dat ziet er al een stuk beter uit! 8. Sla de foto op als baby_lief_gel_shampoo_blue.psd in de map Foto s bewerkt
Trial en error Als je bijvoorbeeld klikt op Afbeelding -> Automatische tinten zie je dat de kleuren in de foto iets veranderen. Je kunt nog veel meer zaken kunnen aanpassen door op Afbeelding -> Aanpassingen te klikken We gaan daar in deze handleiding niet verder op in. Door veel te proberen (en veel fouten te maken) kun je het leren. Op het internet zijn er diverse gratis cursussen te vinden!
De foto s uit de oefenbestanden zijn gemaakt met een digitaal fototoestel. Een foto die rechtstreeks afkomstig is van een fototoestel is veel te groot voor je webshop. De laadtijd is te lang en daarom kun je de foto niet uploaden in het systeem van Myshop (maximaal 256 KB). Je zult daarom nog wat handelingen moeten verrichten. Als eerste ga je bepalen hoe groot de afbeelding moet zijn voor je meer-infoscherm. Dit is het scherm dat de klant ziet wanneer hij meer informatie van het product wil zien met daarbij ook een foto van goede kwaliteit om het product goed te kunnen bekijken (eventueel met zoomfunctie). Omdat de producten vierkant zijn gaan we uit van een grootte van 1.000 px x 1.000 px. De klant kan dan nog flink inzoomen en de afbeelding is klein genoeg te krijgen om een acceptabele laadtijd te hebben. Je gaat dus de bewerkte foto zo opslaan dat de afmetingen geschikt zijn voor gebruik op je webshop. 2 Foto kleiner maken en centreren 1. Klik op Afbeelding /Afbeeldingsgrootte Je ziet dan dat de afbeelding de volgende afmetingen heeft: 5184 px x 3456 px. Je gaat nu deze afbeelding naar 1.000 px x 1.000 px schalen 2. klik op Annuleren
3. Open een nieuwe lege afbeelding: Bestand / Nieuw 4. Stel op het scherm in: Je krijgt nu een lege witte afbeelding te zien. Dit noemen we het canvas.
Je gaat daar de bewerkte foto in plaatsen. 5. Klik op Bestand / Ingesloten plaatsen 6. Selecteer de foto baby_lief_gel_shampoo_blue.psd De foto wordt nu op het lege canvas geplaatst. Je ziet dat de foto te klein is voor het canvas en dat de foto ook niet netjes in het midden staat. Dat ga je aanpassen 7. Pas nu de breedte en de hoogte van de afbeelding aan. Gebruik daar voor de B: en de H: (Breedte en Hoogte) instellingen, zodat je de afbeelding niet vervormd! Zorg dat de foto groot genoeg is, zodat het canvas mooi is gevuld. 8. Sleep vervolgens de afbeelding netjes in het midden van het canvas. Toets <Enter> in als je tevreden bent. Je afbeelding is nu geplaatst op het canvas.
3 Foto opslaan voor het web 1. Klik op Bestand / Opslaan voor web 2. Stel het volgende in: 3. Sla de afbeelding op in de map Foto s groot 4 Bewerkt de overige foto s uit de map Foto s origineel en plaats de bewerkte foto s allemaal in de map Foto s groot
Foto s (nog) kleiner maken In de map Foto s groot heb je vijf foto s staan die allemaal geschikt zijn voor de meer-info-pagina van je webshop. Je kunt deze foto s ook gebruiken voor de product pagina. Daar staat een overzicht van meerdere producten. De foto s hoeven op deze pagina niet zo groot te zijn: 150 px x 150 px is al voldoende. Je gaat de foto s zo aanpassen dat je ze kunt gebruiken op de product-pagina. Je gaat nu al je foto s opslaan met de afmetingen 150px X 150 px. Dat kan je in één handeling doen. In Photoshop laat je alle foto s in één keer verkleinen. Om dat te doen ga je eerst een handeling opnemen. 5 Handeling opnemen 1. Open één van de Foto s uit de map Foto s groot
2. Klik op Venster / Handelingen of typ Alt + F9 3. Klik vervolgens op de knop om een nieuwe handeling op te nemen (Automatisch Handeling 1). Figuur 1, Nieuwe handeling opnemen Figuur 2, Handeling 1 wordt nu opgenomen Photoshop neemt nu alle handelingen op, je zal dus secuur moeten werken! Je kunt ook zien dat Photoshop aan het opnemen is: Opnemen Opname stoppen Opname afspelen
4. Klik op Bestand/Opslaan voor web en stel het volgende in: 5. Sla het bestand op in de map Foto s klein 6. Sluit het bestand af en klik op Nee.
7. Klik nu op de knop Afspelen/opnenen stoppen Als laatste ga je de opname uitvoeren op de andere foto s. Je gaat de handeling laten afspelen als Batch. Dit betekent dat je dezelfde handeling laat uitvoeren op één hele map. In dit geval de map Foto s groot. Wat gebeurt er door deze handeling: Alle foto s in deze map - krijgen dezelfde kwaliteit - krijgen hetzelfde formaat - komen terecht in dezelfde map 6 Handeling afspelen 1. Klik op Bestand / Automatisch / Batch
2. Kies bij handeling: Handeling 1 Kies bij Bron: Map Kies bij Kiezen: Foto s groot Klik vervolgens op OK. Photoshop zal nu alle foto s uit de map Foto s groot verkleinen en plaatsen in de map Foto s klein. Alle foto s in de map Foto s klein zijn nu 150 px x 150 px groot en hebben dezelfde naam als de foto s in de map Foto s groot. Dat is niet handig. 3. Verander de namen van de foto s in de map Foto s klein als volgt: Oude naam Nieuwe naam fruitworks_pink.jpg fruitworks_pink_klein.jpg fruitworks_green.jpg fruitworks_green_klein.jpg fruitworks_yellow.jpg fruitworks_yellow_klein.jpg baby_lief_gel_shampoo_pink.jpg baby_lief_gel_shampoo_pink_klein.jpg baby_lief_gel_shampoo_blue.jpg baby_lief_gel_shampoo_blue_klein.jpg Gefeliciteerd! Je hebt nu bruikbare grote foto s en kleine foto s voor je webshop.
Hernoemen van veel bestanden Mocht je ooit heel veel foto s moeten hernoemen, dan zijn daar simpele programma s voor die dat voor je kunnen doen. Een voorbeeld hiervan is Bulk Rename Utility (http://www.bulkrenameutility.co.uk/download.php).