Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Photoshop CC 2014 er et ideelt værktøj til at designe professionelle billeder til dit websted, herunder bannere. Når du designer dit første banner, skal du holde designet enkelt, så grafikken ikke overbelastes med for meget visuel information. Hvis din virksomhed har firmafarver og en virksomhedsskrifttype, kan du helt sikkert bruge dem i dit banner.

Trin 1

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Start Photoshop. Tryk på "Ctrl-N" eller vælg "Ny" i menuen Filer. I dialogboksen skal du angive højden og bredden for dit banner, f.eks. 900 pixels bredt og 150 pixels højt. Klik på "OK".

Trin 2

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Vælg en solid baggrundsfarve til banneret, hvis det ønskes. For at gøre dette skal du klikke på ikonet "Forgrundsfarve" i værktøjslinjen og vælge en farve og derefter klikke på "rektangelværktøjet" og trække den hen over hele banneret. I denne vejledning overlapper vi dog to gradienter i stedet for at bruge en solid baggrund.

Trin 3

Photoshop CC 2014 er et ideelt værktøj til at designe professionelle billeder til dit websted, herunder bannere. Når du designer dit første banner, skal du holde designet enkelt, så grafikken ikke overbelastes med for meget visuel information. Hvis din virksomhed har firmafarver og en virksomhedsskrifttype, kan du bestemt bruge dem i ...

Klik på "Gradient" -værktøjet i værktøjskassen. Klik på "Fyld" -menuen i indstillingslinjen, og vælg den sort-hvide gradient fra de tilgængelige forudindstillinger. Klik et vilkårligt sted over banneret på lærredet, og træk markøren under banneret. Slip museknappen for at anvende gradienten.

Trin 4

Photoshop web banner, web banner tutorial, web billeder fotoshop

Klik på "Horisontalt tekstværktøj" i værktøjskassen. Træk markøren over banneret for at oprette et tekstfelt. Brug menuerne i indstillingslinjen til at angive en skrifttype, skriftstørrelse og farve. Træk tekstboksen, så den er centreret i venstre side af banneret.

Trin 5

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Vælg "Åbn" i menuen Filer, og vælg ethvert billede på din computer, som du vil bruge til dit banner, f.eks. Et firmalogo, et billede af dig selv eller et produkt, du sælger. Når billedet åbnes, skal du vælge "Duplicate" i menuen Layer. Skift destinationen til din header-fil, som kaldes "Untitled-1", medmindre du allerede har gemt den. Klik på "OK" for at tilføje billedet som et nyt lag til dit banner.

Trin 6

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Vælg "Transform" i menuen Rediger, og klik derefter på "Skaler". I de fleste tilfælde vil hele billedet ikke være synligt på det smalle banner, men dets omrids er synligt, når du har valgt "Skaler". Træk et vilkårligt hjørne af billedets omrids for at ændre størrelsen på dit banner. Hold "Skift" -tasten nede, mens du trækker for at låse dets billedformat. Tryk på "Enter". Træk billedet, så det er på højre side af banneret.

Trin 7

Photoshop CC 2014 er et ideelt værktøj til at designe professionelle billeder til dit websted, herunder bannere. Når du designer dit første banner, skal du holde designet enkelt, så grafikken ikke overbelastes med for meget visuel information. Hvis din virksomhed har firmafarver og en virksomhedsskrifttype, kan du bestemt bruge dem i ...

Klik på ikonet "Forgrundsfarve" i værktøjslinjen for at åbne farvevælgeren. Klik et vilkårligt sted på højre side af banneret for at matche dets farve i farvevælgeren, og klik derefter på "OK".

Trin 8

Photoshop web banner, web banner tutorial, web billeder fotoshop

Vælg "Rektangelværktøj" fra værktøjskassen. Klik på menuen "Fyld", og vælg derefter ikonet "Gradient" øverst i menuindstillingerne. Træk markøren hen over banneret lige fra billedets venstre side helt til bannerets venstre kant. Det laver et rektangel med en gradient ved hjælp af den farve, du matchede fra billedet.

Trin 9

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Find laget "Rektangel 1" i panelet Lag, som er det lag, der indeholder gradientrektanglet, du lige har tilføjet. Træk dette lag ned for at gøre det til det tredje lag fra toppen - under "Lag 1" og det lag, der indeholder din tekst. Klik på menuen "Opacitet" øverst i panelet Lag, og træk skyderen, så den er omkring 50 procent. Ved at gøre den øverste gradient halvgennemsigtig kan den flette med gradienten under den og skabe en rig baggrund.

Trin 10

Sådan oprettes et professionelt webstedsoverskrift i Photoshop

Vælg laget, der indeholder din tekst, i panelet Lag. Klik på menuen "Layer", vælg "Layer Style", og klik derefter på "Bevel & Emboss". Sørg for, at menuen Stil er indstillet til "Præg", og træk skyderen "Dybde" til venstre - omkring "225" procent - for kun at tilføje en smule af denne effekt til teksten.

Trin 11

Photoshop CC 2014 er et ideelt værktøj til at designe professionelle billeder til dit websted, herunder bannere. Når du designer dit første banner, skal du holde designet simpelt, så grafikken ikke er overbelastet med for meget visuel information. Hvis din virksomhed har firmafarver og en virksomhedsskrifttype, kan du bestemt bruge dem i ...

Klik på "Satin" i vinduet Lagstil. Til denne stil skal du bruge en blandingstilstand på "Multiply" og reducere opacitet til cirka "15" procent. Dette kombinerer satinstil med prægestil. Juster indstillingerne, hvis det ønskes, og klik på "OK".

Photoshop web banner, web banner tutorial, web billeder fotoshop

Gem billedet som et weboptimeret banner ved at vælge "Gem til internettet" i menuen Filer. Vælg "JPEG" i menuen Format, og brug en billedkvalitet på mellem 75 og 80 procent. Dette skaber et billede med en lille filstørrelse, som hurtigt indlæses af enhver webbrowser uden at ofre billedkvaliteten. Klik på "Gem", og vælg et sted, hvor filen skal gemmes på din computer. Når du har lukket Photoshop, skal du føje filen til din webside.