May
28
2013

Strand collage + animatie

Ook zo’n zin in de zomer? Dan is deze collage wel wat voor je om te maken. In deze les zie je hoe je op eenvoudige wijze een collage maakt en als je het leuk vindt kun je van de collage ook nog een animatie maken aan het einde van de les. Leuk om te doen en het ziet er gelikt uit. Je werkt in deze les met laagstijlen, aanpassingslagen, het animatie gedeelte van Photoshop en het transformatie gereedschap . Ik heb de les ook in video vorm gemaakt voor de liefhebbers de les bestaat dan uit 2 delen. In het eerste deel maak je de collage en in het tweede deel de animatie. Onder de twee video’s staat de les gewoon beschreven in stapjes zoals jullie gewend zijn van me.

Hieronder zie je wat ik ervan gemaakt heb.

strand

En als animatie ziet het er zo uit:

strand-625

Ik heb de volgende foto’s gebruikt voor het maken van de tutorial:

-hart in het zand
-vuurtoren
-strandweg
-krab
-strandstoel
-schelpen
-Brushsand font
-torn paper texture

Open een nieuw document in Photoshop van 1250 x 100 px, 72 px/inch met een witte achtergrond. Open de foto van het hart in het zand en dupliceer de laag in je document via menu LAAG-DUPLICEREN. Kies in het menu voor je document en sluit daarna de foto. Ga naar je document en schaal de foto met je transformatiegereedschap totdat hij mooi past op je canvas. (CTRL + T, rechtsklikken op je canvas en kiezen voor schalen)

strand 1

Open de foto van de vuurtoren en dupliceer de foto in je document.

strand 2

Voeg aan de laag van de vuurtoren de volgende laagstijlen toe:

strand 3

strand 4

Dupliceer ook de andere foto’s in je document, schaal ze kleiner en dupliceer de laagstijlen van de vuurtoren op de andere foto’s door met rechts op de laag van de vuurtoren te klikken en te kiezen voor laagstijl kopiëren. Je kunt dan de lagen van de andere foto’s selecteren, rechts klikken en kiezen voor laagstijl plakken.

Pas de grootte van de foto’s wat aan elkaar aan ik heb het zo gedaan:

strand 5

Roteer de foto’s met je transformatie gereedschap roteren en verdeel ze over je canvas. Verschuif de lagen in je lagenpalet totdat je tevreden bent met de verdeling van de foto’s over je canvas. Ik heb het zo gedaan:

strand 6

Maak boven de laag van het hart op het strand maar onder alle andere lagen een aanpassingslaag aan. Kies voor fotofilter en stel in zoals hieronder te zien is in het voorbeeld. Nu ziet het strand er wat warmer uit.

strand 7

Open het torn paper textuur en neem de toverstaf. Klik op de zwarte achtergrond en keer de selectie om via menu SELECTEREN-SELECTIE OMKEREN. Toets CTRL + J om de selectie naar een nieuwe laag te dupliceren.  Zet de achtergrondlaag uit zodat je ziet wat je doet. Neem dan je veelhoeklasso en selecteer een van de stukjes papier en dupliceer dit stukje in je document. Schaal totdat je zoiets hebt als in het voorbeeld te zien is.

strand 8

Roteer het papiertje en schuif het op zijn plek. Voeg een aanpassingslaag toe en kies voor kleurtoon /verzadiging. Stel in zoals hieronder in het voorbeeld te zien is.

strand 9

Voeg een slagschaduw toe aan de laag van het papiertje. Gebruik dezelfde instellingen als je eerder gebruikte voor de foto’s.

Neem  dan  het typgereedschap en tik de tekst. Ik heb grootte 100 pt genomen en kleur #2b1b05 Zet de dekking van de laag op 55%. Roteer de tekst en schuif hem boven het papiertje.

strand 10

Maak boven de foto van het hart op het strand een aanpassingslaag aan en kies voor volle kleur. Neem als kleur #583d16. Selecteer een rechthoek die net wat kleiner is als je canvas en stel de doezelaar in op 25 px. Vul de selectie in het laagmasker van de volle kleurlaag met zwart. Zet de dekking van de laag op 15% en de laagmodus op vermenigvuldigen.

strand 11

Nu heb je de collage af en kun je als je dat leuk vindt verder met de animatie. Hiervoor is het handig om de laag van het papiertje, de bovenliggende tekstlaag en de aanpassingslaag te groeperen zodat je ze samen kunt verschuiven voor de animatie. Doe dat door de drie lagen te selecteren en dan te kiezen voor lagen groeperen. Noem de groep papiertje. Groepeer ook de laag van de foto van het hart op het strand, en de twee aanpassingslagen die erboven zitten en noem deze groep achtergrond. Het maakt je document ook wat overzichtelijker. Je hebt nu dus een lagenpalet wat er zo uit ziet:

strand 12

Zet nu alle lagen van de foto’s en de groep papiertje uit. Ga naar het animatie gedeelte van Photoshop. Dat heet in iedere versie weer anders dus kijk even hoe het voor jou versie is. In CS6 kun je het animatie gedeelte via menu VENSTER-TIJDLIJN benaderen. Je krijgt nu onder in beeld een balk met een frame waarin je ziet wat je op je scherm ziet, de achtergrond groep.

strand 13

Klik nu op het dupliceer frame icoontje ( dat staat rechts naast het vuilnisbakje) en zet in dit frame de laag van de vuurtoren aan dupliceer dit frame nog een keer zodat je 3 frames hebt in totaal. Ga in het 2e frame staan en neem je verplaatsen gereedschap. Sleep de foto van de vuurtoren buiten beeld. Je ziet nu in het 2e frame de vuurtoren niet meer maar in het 3e frame is hij er nog wel. Ga nu in het 3e frame staan en klik op het tussenvoegen icoontje, dat is het icoontje dat links naast het dupliceren icoontje staat. Kies voor 5 frames tussenvoegen met vorig frame.

strand 14

Je hebt hierna 8 frames gekregen. Dupliceer het laatste frame en zet dan een volgende foto aan. Zet nu de vertraging van het 8e frame op 2 seconden. Handel met de volgende foto hetzelfde als je bij de vuurtoren deed en herhaal dit totdat je alle foto’s en de papiertje groep aan hebt staan. Zet de vertraging van het laatste frame van de animatie op 5 seconden en zet de vertraging van het eerste frame op 2 seconden. Zet de herhaling van de animatie op altijd. Daarna sla je het bestand op voor web en apparaten als gif bestand.

strand-800

Aanverwante berichten

Jumbojet

4 Reacties +REACTIE GEVEN

  • Beste Jet of is het Jetje 🙂

    Sinds een paar weken bekijk ik jouw tutorials en beschrijvingen. Chapeau! Nederlandstalig en redelijk tot goed te volgen voor een Photoshop analfabeet. Ik heb nu jouw beschrijving van “Strandcollage en animatie” goed kunnen gebruiken als GIF animatie voor tekst inloop in de website van mijn echtgenote.
    Je onderhoudt al verschillende jaren jouw website met voorbeelden.
    Heb je misschien een overzicht van de vanaf 2008 gemaakte tutorials. Je moet nu alle voorbeelden doorlopen om iets te vinden van je gadingen.
    Nou ja als onervaren Photoshopper kan ik uiteraard alles wel doen, maar soms ben ik op zoek naar een bepaald item.
    Er zijn al tig aantal boeken geschreven voor Photoshop. Heb je al eens overwogen om van al jouw tutorials een boek uit te brengen? Je kunt weliswaar al jouw voorbeelden afdrukken, maar dat is niet praktisch en kost handen vol geld aan inkt, temeer omdat jouw afbeeldingen vaak nogal groot ;-( . Het werkt m.i. gemakkelijker als je met een boek naast Photoshop kunt werken.
    Misschien is een uitgever geïnteresseerd en brengen jouw inspanningen nog geld in het laatje.

    Succes nog met jouw verdere ideeën en tutorials.

    Groet, Jan

    • Hoi Jan,
      Bedankt voor je compliment. Ik heb niet echt een overzicht op onderwerp gemaakt van de tuts maar je kunt wel op onderwerpen zoeken via de site. Wat veel mensen doen tegenwoordig is met een tablet naast de pc werken. Je kijkt de les op het tablet en dan maak je de les op je pc. Misschien is dat een optie voor jou. Een boek maken is niet echt mijn ding hoor. Ik hou het bij het bijhouden van de web site dat is al een hele uitdaging voor mij.
      grtz,
      JJ

  • Hallo JJ,

    Zou je even mee willen kijken?
    Als ik de vuurtoren wil downloaden krijg ik het hart in het zand.

    Groetjes Brigitte

    • Hoi Brigitte,
      Dankjewel voor je reactie, de link voor de vuurtoren is nu gefixt 😉
      Grtz,
      JJ

Reageer

Archief

Categorie