Share
De afgelopen dagen zocht ik inspiratie in beroemde oude schilderijen en raakte geïnteresseerd in 'Sterrennacht' van Van Gogh en dacht: kan ik dit toepassen op webdesign? En het antwoord is ja! Na een paar uur werken, is dit mijn tutorial voor jou, een artistiek webontwerp met een concept van "Magic Night".
Laten we beginnen met het ontwerp! Allereerst is dit geen eenvoudige tutorial, dus ik zal wat basisverklaringen overslaan. Hoe dan ook, iedereen met een gemiddeld - hoger niveau van Photoshop-vaardigheden zal het kunnen doen. Ten tweede is het echt moeilijk om precies hetzelfde resultaat te krijgen als ik, en je moet je verbeeldingskracht en goede smaak gebruiken om iets soortgelijks of beter te krijgen dan mijn ontwerp. En ten derde is dit ontworpen door de toepassing in een Wordpress-sjabloon te beschouwen, maar u kunt het snel converteren naar het thema van een andere engine of zelfs een aangepaste website.
Dan vooruit! Maak een nieuw document 960 pixels bij 1000 pixels en RGB. Teken een aantal hulplijnen om de limieten te markeren en ga naar Afbeelding> Canvasgrootte om het formaat van het document te wijzigen om de breedte van het canvas groter te maken (1460 x 1000 px). Op deze manier heb je je ontwerp gecentreerd in een groot document en zie je hoe het eruit ziet op breedbeeldresoluties. Teken ook een gids om de headerhoogte te markeren.
Teken een horizontale hulplijn in het midden van het document en gebruik deze om de laag "Achtergrond" te vullen met een donkerblauw Radiaal verloop (# 0D2B53 - # 010D1F). Ik voeg ook enkele handleidingen toe als begrenzingen van de vulling van de hoofdpagina links en rechts.
Het is heel goed mogelijk dat we de hoogte van het document later wijzigen, dus voeg een nieuwe opvullaag (# 010D1F) onder onze laag 'Achtergrond' toe.
Omdat een van de Psdtuts + -lezers stelde voor echte afbeeldingen te gebruiken in plaats van het klassieke Clouds-filter, proberen we dat deze keer. Plak deze foto van enkele onweerswolken in een nieuwe laag met de naam "Wolken" en verander de overvloeimodus in Overlay. Ga vervolgens naar Laag> Laagmasker> Alles verbergen en teken een radiaal verloop van wit naar zwart (#FFFFFF - # 000000), dat van de middelste naar bijna de middelste onderkant gaat. Pas vervolgens de "wolken" -niveaus een beetje aan om de wolken donkerder te maken.
Plak nu deze mooie skyline van een Spaanse kust in een nieuwe laag met de naam 'skyline'. Maak vervolgens een nieuwe aanpassingslaag> Kanaalmixer ... en selecteer Zwart-wit met blauw filter (RGB). Om dat effect alleen op de "skyline" -laag in het lagenpalet toe te passen, houdt u de Option-toets ingedrukt en klikt u tussen de laag Kanaalmixer en de laag "horizon". Wijzig ten slotte de overvloeimodus van de "skyline" -laag in Overlay.
Pas een Laagmasker toe> Laat alles zien aan de laag "skyline". Gebruik vervolgens een groot en zwart (# 000000) zacht penseel om de randen van de afbeelding te verbergen en selecteer vervolgens een grunge-penseel (ik gebruik dit grunge penseelset van Kelzky13, met name penselen 250 en 181) en maak de randen een beetje meer onregelmatig.
Typ vervolgens de titel "Magic" met behulp van het Scriptina-lettertype. Breng vervolgens de onderstaande laagstijlen aan: een buitenste gloed (# 9EB6D0) en een verloopoverlay (# 70ABF6, #FFFFFF, # B4CBE7, #FFFFFF). Ook is het nu een goed moment om ons ontwikkelingsontwerp in mappen te organiseren. Zet alle lagen in een nieuwe map met de naam "Achtergrond" en de tekst in een andere map met de naam "Logo".
Nu voegen we wat sterren toe aan ons ontwerp, je kunt elke penseelset gebruiken, maar ik gebruik deze set: Star-veldborstels van BL1nX. Gebruik de brush 550 van de set om de sterren in wit (#FFFFFF) in een nieuwe laag in een map met de naam 'Stars' te schilderen. Merk op dat ik de helderste ster boven de punt van de ik. Breng vervolgens een verloopoverlay aan met behulp van drie kleuren (# 3A8FEF, #FFFFFF en # 66C9FC) naar de laag "Stars1".
Gebruik vervolgens het penseel 615 van de set sterrenvelden om meer sterren aan de hemel toe te voegen in een nieuwe laag met de naam "Stars2" en verwijder de sterren vervolgens met een zachte wisser over de gebouwen. Voeg vervolgens een Outer Glow (# 8AB2FF) toe aan "Stars2."
Voeg in het hele ontwerp meer sterren toe aan de laag "Sterren 2" en verwijder met behulp van het gereedschap Gum enkele delen van de sterren. Pas ten slotte een verloopoverlay-effect toe op de laag "Stars2" met behulp van vier kleuren: # 6AB1D1, #FFFFFF, # 94CFED en #FFFFFF.
Download nu deze Star Brushes van jen-ni en houd de penselen bij de hand, want we gebruiken ze meerdere keren in deze tutorial. Selecteer een penseel van 65 pixels (ik gebruik nummer 148) en teken een witte (#FFFFFF) ster naar een nieuwe laag net boven de stip van de ik. Breng vervolgens een Outer Glow (# 00BCF9) aan op de ster om deze helderder te maken.
Dupliceer de "Magische" tekst, selecteer de tekst en typ het woord "Nacht" op zijn plaats. Stel vervolgens de buitenste gloed in op wit (#FFFFFF) en de overlay met verloop op drie kleuren (# F9DA5B, # FEAE00 en # FFD403), zie de onderstaande afbeelding om de waarden van het filter te controleren.
Laten we wat wolken toevoegen aan onze nacht! Download Clouds II-borstels van redheadstock. Selecteer vervolgens het penseelnummer 2464 en stel de grootte in op 960 px (overeenkomend met de hoofdbreedte van de ontwerplay-out). Zet de voorgrondkleur op # 234B7F en plak een enkele wolk in een nieuwe laag met de naam "cloud1". Om de lagen georganiseerd te houden, plaats ik de wolken in een aparte map in de map "Achtergrond". Rek de hoogte van de "cloud1" een beetje op.
Volg, ontwijk en verbrand de wolk een beetje. Merk op dat ik de gebieden naast de ster van het logo verlicht en de onderkant van de wolk donkerder maak. Wijzig ook de "cloud1" Dekking in 50%.
Voeg nog een wolk toe aan een nieuwe laag met de naam "cloud2". Je kunt elke gewenste wolk gebruiken, maar deze kleur als voorgrond gebruiken: # 5F83A5. Ontwijk de onderkant van de wolk een beetje om de lichtbeleving te verbeteren.
Herhaal de vorige stap maar gebruik deze keer een andere penseel met deze kleur: # 36638C en plaats deze boven de "cloud1". Pas het formaat aan en ontwijk en / of verbrand de cloud indien nodig.
Selecteer een groot zacht gum en verwijder de onderkant van de laag "cloud1" om een fade-outeffect te creëren.
Dit is eigenlijk een kritieke stap, we zullen de achtergrond van de hoofdcontainer toevoegen, je moet nooit vergeten dat je aan het ontwerpen bent voor het web. Gebruik het gereedschap Rechthoek om een vectorrechthoek (# 0A1D37) naar een nieuwe laag te tekenen, allemaal onder de map "Wolken". Merk op dat mijn rechthoek zich binnen de opvulgidsen bevindt. Selecteer vervolgens de rechthoeklaag en ga naar Laag> Laagmasker> Alles onthullen ... en teken een wit naar zwart verloop, wat een leuk effect aan de bovenkant van de rechthoek toevoegt. Laat ten slotte een gids achter de fade in van de rechthoek vallen, die ons zal helpen wanneer we dit ontwerp veranderen in HTML + CSS. Let op, dat van de gids tot de onderkant van de achtergrondkleur duidelijk moet zijn.
Voeg nu een andere rechthoek toe maar deze keer als zijbalkachtergrond, opnieuw help jezelf met een gids en gebruik de kleur # 091525. Pas vervolgens een laagmasker een klein beetje toe op de nieuwe rechthoek, net zoals in de vorige stap.
Op dit punt hebben we de basis header achtergrond klaar. Nu is het tijd om wat details toe te voegen. Ik zal een uniek RSS-pictogram in de kop plaatsen. Kopieer deze afbeelding van de volle maan en plak deze in een nieuwe laag met de naam "moon-rss." Stel vervolgens de waarden voor Kleurtoon / verzadiging in om de maan een beetje meer geel te maken en voeg zowel de filters voor binnen als buiten de gloei toe (zie de waarden hieronder).
Voeg een kleine wolkvorm toe met de kleur # 7997B3 in een nieuwe laag boven de maan in het lagenpalet. Gebruik vervolgens een grote zachte gum om enkele delen van de nieuwe cloud te verwijderen.
Voeg de klassieke vorm RSS (# DCA30B) toe aan een nieuwe laag voor de laag "maan" maar achter de laag "wolk". Breng vervolgens de hieronder getoonde filters aan (een verloopoverlay, een buitenste gloed en een slagschaduw). Voeg ten slotte een ster toe ergens boven de RSS-vorm (zie stap 10).
Plak deze afbeelding in een nieuwe laag, we gebruiken het als achtergrond van de navigatiebalk van onze hoofdpagina's. Omdat het oorspronkelijke beeld een beetje uitgerekt is, moeten we het breder maken. Ik speelde met beide selecties en het hulpmiddel Verplaatsen (Vrije transformatie) om de breedte van de schuif te vergroten. Draai vervolgens de rol een klein beetje rond met behulp van de Vlagketting.
Ontwijk sommige delen van de scroll om de schaduwen te vergroten en de warp-illusie te verbeteren.
Om de schuifstructuur te verbeteren, past u een overloopfilter met verloop toe (# 045F96 en # FBF4BD) en ook een overlay met patronen.
Voeg nu een slagschaduw toe aan de schuif. U kunt het filter Slagschaduw gebruiken of doen wat ik heb gedaan, de schuiflaag dupliceren en de tint aanpassen aan -100, de zwarte kopie een klein beetje vervagen en vervormen met het gereedschap Vrije transformatie om het onregelmatig te maken.
Voeg vervolgens een wolk toe over de schuif, ontwijk, brand en verwijder net zoals in stap 15. Voeg vervolgens de tekst van de pagina-koppeling toe met behulp van het lettertype Georgia - Cursief. Gebruik de kleur # 0B1827 voor de standaardkoppelingen en de kleur # 211808 voor de zweeftabel. Voeg ook enkele extra details toe, zoals sterren op de achtergrond en een lijn als zweefeffect. Je kunt de structuur van de lagen onderaan de afbeelding hieronder zien.
Als laatste detail op de navigatiebalk van de pagina's, maakt u een nieuwe laag boven de schuif en tekent u met een deeltjespenseel een lijn alsof het een aquarel is (zie de afbeelding hieronder). Doe het nog een paar keer maar gebruik verschillende kleuren. Ook omlaag in de navigatiebalk "Stars" Dekking onder de 40%.
Voeg de RSS-gerelateerde tekst toe. Ik gebruik 10 px Aria, met geel (# F2C90D) en wit (#FFFFFF). Vergeet niet de Anti-aliasing-methode in te stellen op Geen, omdat de meeste browsers de tekst zonder anti-aliasing weergeven (IE7 en Safari zijn de uitzonderingen).
Voeg als extra detail deze foto toe van een mooie ballon. Haal de ballon uit de achtergrond en plaats deze ergens onder het logo, voeg een kleurenoverlay (# 1F416E - overvloeimodus: overlay) toe aan de "ballon" -laag om deze aan te passen aan de scènekleuren. Je kunt ook de linkerkant van de ballon een klein beetje branden.
Gebruik vervolgens de borstel 615 van de sterveldborstels (zie stap 8) om meer sterren boven de ballon en de schuif toe te voegen. Ik voeg ook een akkoord toe aan de ballon door een witte gebogen lijn te schilderen met een 3 px massieve borstel. Gebruik het gum hier en daar ook om het aantal sterren te verminderen.
Het is tijd om een bericht toe te voegen. Voeg eerst de titel en de rij met metagegevens toe aan een nieuwe laag met de naam 'Plaatsen'. Zie de afbeelding hieronder om de Karakterwaarden te bekijken. Ook voeg ik een klein sterretje toe aan de metadata als een visueel detail.
Laten we meer informatie toevoegen aan de map "Plaatsen", omdat de lijst op de startpagina een voorbeeld van meerdere berichten zal bevatten. We voegen links een voorbeeldafbeelding toe (200 px bij 200 px met een 1px streekeffect) en een korte tekst rechts. We voegen ook een voorbeeld toe van hoeveel opmerkingen het bericht rechtsboven staat. Maak voor het opmerkingenveld een nieuwe map met de naam "Opmerkingen" en voeg een kleine achtergrond toe met een kleine wolk en enkele kleine sterren. Kort gezegd, herhaal gewoon een van de vorige stappen toen we de header aan het ontwerpen waren, maar in een kleine maat. Voeg vervolgens het opmerkingennummer en het woord toe Comments beneden.
Voeg vervolgens een toe Tags regel onder het bericht en voeg een klein sterretje toe aan de rechterkant van die lijn. Voeg een klein sterretje toe als achtergrond voor de post, alleen als u dat wilt. Trek ten slotte een scheidingslijn (# 1D324F) voor de post met behulp van het lijngereedschap.
Dupliceer vervolgens de map "Plaatsen" en bewerk de kopieën om twee of drie verschillende berichten te maken. Het is heel goed mogelijk dat de hoogte van uw document op dit moment moet worden verhoogd, doe dit gewoon met het gereedschap Bijsnijden of Beeld> Canvasformaat, zoals in stap 1. Als u het formaat van uw hoofddocument hebt gewijzigd, verhoogt u de hoogte van beide achtergrond en sidebar achtergrond ook.
Laten we nu aan de zijbalk werken. We gaan het zoekformulier toevoegen. Maak een nieuwe map met de naam "Zijbalk" en maak daarbinnen een andere map en noem deze "Zoeken". Trek een wolk in die map en ontwijk en graaf het om het op de volgende afbeelding te laten lijken. Gebruik vervolgens het gereedschap Afgeronde rechthoek om een rechthoek over de wolk te tekenen. Breng een 1px Inside Stroke-effect (# 697372) op de rechthoek aan en verander de Fill-waarde in 50%.
Voeg een paar witte sterren toe boven de wolkenlaag met behulp van een ster-veldlaag, onthoud dat je alle extra sterren wist. Dupliceer, verklein en wijzig> Flip horizontaal de laag "ballon" van stap 29 horizontaal. Plaats het in de map "Zoeken". Voeg ook de titeltekst toe met Georgia Italic en een mooie gele (# D5A934) kleur. Voeg vervolgens de zoekinstructies en de knop toe "Gaan!"U kunt de waarden van het teken onderaan de volgende afbeelding zien: teken als laatste detail een enkele heldere ster achter de tekst.
Voeg de inhoudstekst, titels en links van de sidebar toe en zet elke sectie in een aparte map. Voeg ook een achtergrond voor een zacht sterrenveld toe aan elke map en een glanzende ster achter elke titel. Voeg daarnaast een glanzende ster toe als een voorbeeld van het zweefeffect op een link. Vergeet zowel gidsen als margehandleidingen niet.
We zijn aan het einde. Laten we een voettekst toevoegen voor de zijbalk. Veeg eerst een klein beetje van de onderkant van de achtergrondschildering van de zijbalk weg met een zachte borstel op het laagmasker. Teken vervolgens een paar wolken en ontwijk ze en verbrand ze. Zorg ervoor dat de wolken de achtergrond van de hoofdinhoud niet overschrijden of de breedte van de zijbalk overschrijden. Voeg vervolgens een wit sterretje achter de wolken toe en dupliceer de ballon nogmaals. Ik bewaar dit allemaal in een map met de naam 'zijbalkvoettekst'.
Eindelijk maken we de voettekst. Eerst op het laagmasker van de hoofdinhoudsachtergrond met een grote zachte borstel, verberg de onderkant om deze uit te faden. Selecteer vervolgens enkele wolkborstels en beschilder ze allemaal over de onderkant van het ontwerp. Ik combineer grote donkerblauwe (# 0B1C38) wolken en kleine blauwe # 223E63) wolken, zoals weergegeven in de onderstaande afbeeldingen. Onthoud dat deze wolken een achtergrondafbeelding zullen worden, dus probeer een gids niet tussen inhoud en voettekst te doorkruisen. Vergeet bovendien niet om alle gerelateerde lagen van het voettekstvak in een nieuwe map met de naam "Voettekst" te plaatsen.
Verbrand de lichtste wolken. Schilder vervolgens een wit sterrenveld met penseel 615 van de sterrenreeks. Teken een helderder sterrenveld met een andere borstel, in dit geval nummer 656 van de set. Verwijder ten slotte het sterretje met een zachte grote gum.
Ik hoop dat je deze tut nuttig hebt gevonden. PLUS-leden kunnen het PSD-bestand downloaden en wijzigen wat u maar wilt, details toevoegen of verwijderen en uw eigen sterrenontwerp maken.
.
Abonneer u op de Psdtuts + RSS-feed voor de beste Photoshop-tuts en -artikelen op internet.
Accentsconagua