Video-tutorial: eenvoudig een bewegende banner maken in Photoshop

tutorial - Hoe-eenvoudig-een-motion-banner-in-photoshop-maken

Vandaag leren we u in deze video-tutorial hoe u een project moet samenstellen en voorbereiden om een ​​banner te maken met het Adobe Photoshop-programma, voor de volgende video-tutorial om je te leren een beetje te geven animación, en exporteer het klaar voor gebruik.

Ik zal beginnen met u te vertellen wie de man op de foto is, dat hij niet zomaar een anonieme man is die uit een beeldbank wordt gekozen, nee meneer, dit is de Grote Milton glaser, maker van het logo van Ik hou van New York hoeveel heeft onze samenleving in de afgelopen eeuw beïnvloed, of de cover van Bob Dylan.

Laten we, afgezien van de historische opmerking, deze video-tutorial starten: Eenvoudig een bewegende banner maken in Photoshop, mijn eerste video-tutorial waarvan ik hoop dat je het leuk en nuttig vindt. Laten we beginnen.

I) We maken een schets met onze compositie en we begonnen de verschillende elementen van de banner te maken en te doorzoeken.

II) We zoeken en downloaden een foto van de goede oude Milton Glaser, een personage dat ik heb uitgekozen om op ons spandoek te zetten.

III) We openen Adobe Photoshop en maken een nieuw document. We kiezen tussen de verschillende presets die Photoshop ons geeft om te gebruiken in webformaat. We kiezen uit allemaal het canvas van 800 × 600, wat een goede maat is voor een banner.

IV) We openen het JPG-bestand dat de foto van de goede Milton Glaser bevat en we bereiden ons voor om de foto te retoucheren.

V) We kiezen uit de groep selectiehulpmiddelen een van de Loops, de Magnetische lus in dit geval. We schetsen de goede oude Milton.

VI) Eenmaal uitgestippeld gaan we naar de route Selectie-verfijnde randen​ We gaan die tool gebruiken om de randen van de afbeelding goed omlijnd te maken.

VII) Nadat we de Milton-rand volledig naar onze zin hebben gelaten met behulp van de tool Verfijn Edge, we drukken CNTRL + J en er wordt een nieuwe laag gemaakt met de selectie.

VIII) We verwijderen de achtergrondlaag en dus hebben we Milton op een transparante achtergrond die we kunnen gebruiken in onze banner.

IX) Om het op te slaan gaan we de Save for web tool gebruiken. In het dialoogvenster van deze tool vinden we de mogelijkheid om het bestand te exporteren in verschillende bestandstypen zoals GIF, JPG of PNG. Welnu, in dit bestand gaan we het exporteren om het op een transparante achtergrond te houden. We bewaren en benoemen. We sluiten en bewaren in PSD voor wat er kan gebeuren.

X) We keren terug naar ons webproject, naar de banner. We veranderen de kleur van de achtergrondlaag in zwart. Hiervoor gebruiken we de Paint Bucket-tool, waarbij we de frontkleur veranderen in zwart en direct op de achtergrondlaag klikken.

XI) We beginnen met het importeren van de Milton Glaser-foto in onze werkruimte of canvas. Hiervoor gebruiken we de Gereedschap plaatsen, gevonden in de bestandsoptie.

XII) We zetten de goede oude Glaser in de benedenhoek rechts van het scherm.

XIII) We maken een tekstballon van de strips. We hebben het zo opgezet dat het lijkt alsof Glaser aan het woord is.

XIV) We maken 3 zinnen met de Tekstgereedschap, die de bannerinformatie zullen geven. Een van hen gaat in de sandwich.

XV) Elk van de zinnen moet in een andere tekstlaag worden geplaatst.

XVI) En dus hebben we alles klaar om te beginnen animatie geven op onze banner.

In de volgende video-tutorial zal ik je leren hoe je animatie kunt geven aan onze banner. Mis het niet.


Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.