Share
In deze zelfstudie maken we een creatieve blogopmaak met voornamelijk eenvoudige vormen, een paar penseeltechnieken, enkele afbeeldingen en een dosis vindingrijkheid van Photoshop. Het maken van layouts voor webdesign is eenvoudiger dan u misschien denkt. Je kunt snel leren om aantrekkelijke ontwerpen te maken. Het maken van dit ontwerp duurt minder dan twee uur en je leert onderweg een aantal professionele tips. Laten we beginnen!
Bekijk de afbeelding die we gaan maken. De uiteindelijke afbeelding is hieronder of u kunt hier een afbeelding op ware grootte bekijken.
Om deze tutorial te voltooien, moet je het 960 Grid-systeem downloaden. Laten we nu beginnen.
Open de sjabloon "960_grid_12_col.psd" in Photoshop. Het ziet eruit als de onderstaande afbeelding. Het rastersysteem is handig omdat u hiermee de lay-out snel kunt uitlijnen.
Selecteer de achtergrondlaag en druk op Command + J. Dit is de snelkoppeling om een laag te dupliceren. Het gebruik van snelkoppelingen versnelt uw ontwerpproces. Voor deze nieuwe laag voegen we een mooie verloopkleur toe. Ga nu naar Laag> Laagstijl> Gradient-overlay en gebruik de volgende instellingen.
Verberg nu het raster omdat u het ontwerp beter ziet. Houd je raster zichtbaar omdat je de vorm beter kunt uitlijnen. Selecteer het gereedschap Afgeronde rechthoek en maak een vorm bovenop de lay-out.
Voeg voor deze navigatiebalk de volgende laagstijlen toe.
Gebruik hetzelfde hulpmiddel (Afgeronde rechthoek-tool) om een andere vorm te maken en vul deze met de kleur: # 001424.
Voeg de volgende laagstijl toe voor deze vorm.
Maak een andere vorm met het gereedschap Afgeronde rechthoek met wit als kleur.
Voeg voor deze vorm enkele eenvoudige laagstijlen toe en verander de vulwaarde in 10%.
Hieronder is het resultaat tot nu toe.
Over deze laatste vorm een afbeelding plaatsen. Ik heb enkele afbeeldingen gebruikt van een aantal tutorials die ik heb gemaakt voor Grafpedia, die als goede voorbeelden van afbeeldingen voor dit ontwerp dienen. Je moet natuurlijk je eigen afbeeldingen gebruiken.
Nu moet je de selectie voor deze afbeelding laden. Als u de selectie wilt laden, selecteert u de laag in uw lagenpalet en gaat u naar Selecteren> Selectie laden. U ziet een selectie rond de afbeelding zoals in de volgende afbeelding.
Maak een nieuwe laag bovenop alle lagen met behulp van deze sneltoets: Command + Shift + Alt + N. Selecteer het penseel en kies een gladde ronde penseel. Teken over de nieuwe laag een horizontale lijn. Houd de Shift-toets ingedrukt wanneer u de tekening maakt. Op deze manier zal de tekening horizontaal perfect zijn.
Druk op Command + D om de selectie ongedaan te maken. Gebruik nu het gereedschap Afgeronde rechthoek om een andere vorm te maken met de kleur # 4b6e82.
Voeg voor beide vormen de volgende laagstijlen toe.
Grijp de Ellipse Tool en maak een vorm recht onder de zijbalkvorm.
Ga naar Filter> Blur> Gaussian Blur en gebruik de volgende instellingen. Photoshop zal u vragen of u de shape wilt rasteren, ga door en druk op OK.
Zoals je kunt zien aan de vorige stap, hebben we daar een schaduw gemaakt. Laten we nu deze schaduw accentueren door wat licht toe te voegen. Selecteer het gereedschap Lijn en stel het gewicht van de lijn in op 1 pixel en maak vervolgens een verticale lijn zoals weergegeven.
Klik met de rechtermuisknop op de laag en kies Laag rasteriseren.
Selecteer het gereedschap Gum en kies een gladde, ronde borstel rond de 100 px. Gebruik het om het bovenste gedeelte en het onderste gedeelte van de regel te verwijderen.
Maak met dezelfde techniek een nieuwe lijn bovenop de zijbalk.
Recht onder deze witte lijn maak je een nieuwe die zwart is.
Maak in het midden van de lay-out een andere vorm met het gereedschap Afgeronde rechthoek.
Maak enkele vormen met het gereedschap Rechthoek. Over deze vormen zullen we later enkele afbeeldingen toevoegen.
Voeg dezelfde laagstijlen toe voor al deze drie vormen.
Nu is het tijd om de afbeeldingen toe te voegen aan deze witte vormen. Voeg ook wat tekst toe met Horizontal Type Tool aan de rechterkant.
Maak een stippellijn tussen de berichten met het gereedschap Horizontale tekst.
Maak nog eens drie vormen en plaats ze onder de tekst Post metadata.
Creëer boven de zijbalk een zoekvak met het gereedschap Afgeronde rechthoek. In dezelfde tijd kunt u zien dat ik ook wat tekst op de navigatiebalk heb geplaatst.
Voeg de volgende laagstijlen toe voor dit zoekvak.
Gebruik nu het gereedschap Afgeronde rechthoek om een andere vorm te maken. Plaats deze vorm over de vorige vorm. Voeg ook een pictogram aan de rechterkant toe.
Maak direct boven de diavoorstelling een nieuwe witte vorm.
Voeg de volgende laagstijlen toe voor deze vorm.
Houd de Command-toets ingedrukt en met het gereedschap Pen geselecteerd, drukt u tweemaal op de rand van de vorm. Het ankerpunt wordt actief en we kunnen het uiterlijk van de vorm aanpassen.
Met de Command-toets nog steeds ingedrukt, selecteert u het volgende ankerpunt.
Houd de Shift-toets ingedrukt en druk eenmaal op uw pijl-omlaag op uw toetsenbord. Het ankerpunt zal naar beneden gaan en u krijgt het volgende resultaat.
Gebruik de Ellipse Tool om een cirkel te maken.
Klik met de rechtermuisknop op de laag en kies Laag raster maken. Maak met het gereedschap Rechthoekige selectiekader een selectie zoals hieronder weergegeven.
Zorg dat je de laag met deze kleine cirkel hebt geselecteerd en druk vervolgens op de Delete-toets. Sleep deze laag boven de achtergrondlaag in je lagenpalet. Dit is mijn resultaat tot nu toe.
Nu voegen we twee knoppen toe zodat gebruikers de afbeelding van de diavoorstelling kunnen wijzigen. U moet het gereedschap Afgeronde rechthoek gebruiken om de vorm te maken en vervolgens kunt u het gereedschap Aangepaste vorm gebruiken om de pijlen toe te voegen.
Maak over de zijbalk enkele witte vormen zoals hieronder weergegeven.
Voeg voor al deze witte vormen dezelfde laagstijlen toe.
Voeg wat banners toe in de zijbalk. Voeg ook enkele pictogrammen voor sociale bladwijzers toe bovenop het siteontwerp. Er zijn talloze gratis pictogrammen beschikbaar op internet om uit te kiezen.
Voeg nu wat tekst toe met het gereedschap Horizontale tekst onder aan de zijbalk. Voeg ook mintekens toe tussen de tekst met behulp van het gereedschap Horizontale tekst om horizontale horizontale regels te maken.
Laten we andere details toevoegen aan de navigatiebalk. Gebruik het lijngereedschap om twee kleine lijnen te maken. Zoom in op deze afbeelding, zodat u beter kunt zien wat u aan het doen bent.
Selecteer beide lagen in je lagenpalet. Als u beide lagen wilt selecteren, moet u de Command-toets ingedrukt houden wanneer u beide lagen selecteert. Nadat je de regels hebt geselecteerd, druk je op Command + E om de lagen samen te voegen tot één. Selecteer het gummetje en gebruik het om het bovenste gedeelte en het onderste gedeelte van de lijnen te verwijderen. Houd er rekening mee dat je een zachte, ronde borstel nodig hebt met een grootte van 20 pixels.
Wijzig de overvloeimodus voor deze laag in Zacht licht. Dupliceer het een paar keer en plaats de lijn tussen de andere tekstknoppen.
Creëer nu de tekst voor het logo van deze Wordpress-opmaak in een formaat dat voor u geschikt is.
Voeg de volgende laagstijlen toe voor dit tekstlogo.
Maak net boven de laag "achtergrond" een nieuwe laag (Command + Shift + Alt + N). Maak met het penseel een markeerstreep daar met een zachte, ronde borstel zoals weergegeven.
Wijzig de overvloeimodus voor deze laag in Zacht licht.
Het ontwerp is voltooid! Ik hoop dat je het leuk vond om te creëren! De uiteindelijke afbeelding is hieronder of u kunt hier een afbeelding op ware grootte bekijken.
Accentsconagua