Share
Wat je gaat creërenIn deze tutorial laat ik je zien hoe je een eenvoudige, elegante blog-lay-out kunt maken in Photoshop. We gebruiken een sterk beeld boven de vouw (waar dat ook mag zijn) met een aantal eenvoudige berichten, gevolgd door een zeer schone en elegante typografie.
Om mee te kunnen doen heeft u de volgende (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen. Je bent vrij om een canvas te gebruiken van elke gewenste dimensie - het web heeft immers geen vaste breedte.
Zorg ervoor dat de resolutie is ingesteld op 72 pixels / inchLaten we een aantal hulplijnen instellen, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Ik gebruik niet altijd een raster, maar het instellen van enkele richtlijnen zorgt voor netheid en zal helpen om de breedte van onze website te bepalen. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als een website-breedte en voeg een aantal richtlijnen toe vanuit de hoeken, zodat er ruimte is om te ademen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 100px, 285px, 445px, 600px, 605px, 765px, 925px en 1100px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
Door aan deze etiquette van Photoshop te blijven, blijft alles overzichtelijk en gemakkelijk te navigeren of te bewerken. Laten we drie lagengroepen maken met de naam Koptekst, Inhoud, Delen en Voettekst. Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Klik op het pictogram om snel een groep te maken.
Het koptekstgedeelte speelt een zeer belangrijke rol bij het contact maken met gebruikers en ervoor zorgen dat bezoekers op de website blijven. Voor deze blog zal ik een uitnodigend ogende foto van een café in Londen gebruiken. Wanneer u een afbeelding voor uw project kiest, moet u ervoor zorgen dat deze het juiste bericht naar bezoekers stuurt en aan de behoeften van de klant voldoet.
Laten we eerst de achtergrond van de blog maken. Binnen in de hoofd groep teken een kleur rechthoekige vorm met behulp van de Rechthoekgereedschap (U). In mijn geval heb ik een rechthoek van 1200x600 pixels getekend en deze bovenaan het document geplaatst.
Download nu de caféfoto, sleep deze naar het Photoshop-document en plaats deze boven de rechthoekige laag. Hernoem de afbeeldingslaag naar iets dat je later kunt herkennen, in mijn geval heb ik IMG gebruikt. Houd daarna de alt toets en muis over de fotolaag totdat u een kleine pijl naar beneden ziet wijzen en laat deze vervolgens los. U hebt zojuist een gemaakt Knipmasker.
Nu slaan CMD + T en wijzig het formaat van de foto om aan uw behoeften te voldoen.
Tip: ingedrukt houden Verschuiving sleutel om proportioneel te transformeren.
Nu moeten we onze blogachtergrond donkerder en neutraler maken, dus als we er een kopie bovenop zetten is het leesbaar. Laten we ons beeld enigszins vervagen door naar Filter> Blur> Gaussiaans vervagen ... en instellen Radius naar 3 pixels. Het gebruik van een klein vervagingseffect helpt scherpe beelddetails te elimineren en stelt bezoekers in staat zich te concentreren op meer prominente elementen, in ons geval het blogbericht.
Laten we een nieuwe laag boven de geplaatste afbeelding maken en er een maken Knipmasker zoals getoond in de vorige stap. Vul het dan met een zwarte tint en verminder de dekking tot 50%, zodat onze afbeelding donkerder wordt, maar nog steeds goed zichtbaar is.
Het is tijd om een logo toe te voegen voor onze blog. Maak een nieuwe groep binnen de hoofd groep en noem het Logo. Voor deze tutorial gebruik ik een eenvoudig, op typografie gebaseerd logo. Kies het Horizontaal tekstgereedschap (T), Bentham 30 px formaat lettertype en schrijf de titel van je blog. Merk op dat de letterafstand groter is dan normaal, waardoor een eleganter uiterlijk wordt gecreëerd en de hoofdletters gemakkelijker leesbaar worden.
Om de nadruk te leggen laten we er een rand omheen maken. Kies een Rechthoekgereedschap (U) en teken een rechthoek die iets groter is dan de tekst.
Klik nu met de rechtermuisknop op de laag en selecteer Meng opties… gebruik de volgende streekopties.
Stel uiteindelijk de rechthoeklaag in Vullen naar 0% en je hebt een mooie 1px-slag rond je fictieve logo.
Dit is het moment waarop we een blogbericht toevoegen waarin staat wat deze blog inhoudt. Kies het Horizontaal Type (T), 60 px grootte Bentham lettertype en noteer een kort bericht voor je lezers. Zorg ervoor dat de lijnhoogte ruim genoeg is, zodat tekst ruimte heeft om te ademen en er uitgebalanceerd uitziet.
Voor het en-teken dat ik heb gebruikt Baskerville (cursief) omdat het sierlijker is. Voor het secundaire bericht dat ik heb gebruikt PT Serif (cursief) lettertype ingesteld op 20px in grootte. Zorg ervoor dat je je bericht verticaal in het midden van de afbeelding van de header plaatst, zodat het er uitgebalanceerd en gepolijst uitziet.
Minimaliseer de hoofd groep door op de kleine pijl naast de titel van de groep te klikken en de inhoudsgroep te openen, zodat alle lagen zijn geordend en gemakkelijk door de groep kunnen worden genavigeerd.
Laten we beginnen met het maken van onze blogpost. Kies het Horizontaal tekstgereedschap (T) en noteer met behulp van een donkere kleur en een vrij groot lettertype de kop van het bericht. Probeer absoluut zwart te vermijden en kies een subtielere kleur, zoals donkergrijs, zodat het er niet te hard uitziet. Voor deze tutorial gebruik ik donkergrijs # 444444 42px grootte Bentham lettertype in hoofdletters. Plaats uw kop in het midden van het document en geef heel wat ruimte aan de bovenkant, zodat de aandacht van de lezer wordt gevestigd op de kop.
Verklein de lettergrootte tot ongeveer 14px en voer de datum in van de blogpost, auteur, categorie, tags, locatie of wat je maar wilt, dus het geeft je lezers een overzicht van de publicatie. In mijn geval heb ik de datum en locatie van het item in hoofdletters geplaatst om trouw te blijven aan de kop.
Een blog zonder echte inhoud is niets waard, hoe goed het ontwerp ook is. De ... gebruiken Horizontaal tekstgereedschap (T) houd je muisknop ingedrukt en maak een container tussen de tweede en de voorlaatste richtlijnen. De containerbreedte tussen deze richtlijnen zou moeten zijn 640px en de hoogte is afhankelijk van de lengte van je bericht.
Stel de achtergrondkleur in op iets lichters en gemakkelijk in het oog. In mijn geval gebruik ik lichtgrijs # 6f6f6f 18px PT serif met een regelhoogte ingesteld op 34px. Regelhoogte moet vaak rond zijn 1.5 - 1.9 afhankelijk van de stijl van het lettertype. U kunt eenvoudig de regelhoogte berekenen door de lettergrootte die u gebruikt te vermenigvuldigen met 1,9, bijvoorbeeld in mijn geval dat ik gebruik 18px tekengrootte, dus: 18 * 1,8 = 34,2.
Als ontwerper moet je altijd nadenken over het ontwerpen van een dynamische omgeving, dus gebruik stijlen voor hyperlinks of zweeftoestanden voor knoppen. Geloof me, ontwikkelaars zullen je hiervoor bedanken. Kies een subtiele kleur die opvalt in je hoofdkopie, markeer een van de frases die naar ergens anders verwijzen en verander de kleur ervan. In mijn geval gebruik ik lichtrood # e3514e.
We zijn klaar met het hoofdkopie voor de blogpost en zullen nu een aantal deelknoppen maken zodat lezers content kunnen delen met hun netwerk naar keuze.
Minimaliseer de Inhoud groep en open Het delen van groep waar we onze knoppen zullen plaatsen. Kies een Rechthoekgereedschap (U) en teken een rectagle tussen de tweede en voorlaatste richtlijnen als de hoofdpostkopie. In mijn geval is dat zo 640x54px. Klik vervolgens met de rechtermuisknop en selecteer Meng opties… en de volgende opties toepassen.
gebruikte kleur # 838383Tot slot, verminder de lagen Vullen optie om 0% en je hebt een overzichtscontainer voor je sociale medianetwerken.
Kies het Lijngereedschap (U) en stel de breedte in op 1px, teken daarna drie verticale lijnen die onze container in vier gelijke stukken zullen verdelen. De richtlijnen helpen hen te positioneren. Zorg ervoor dat de lijnen dezelfde kleur hebben als de omtrek van de container.
Tip: ingedrukt houden Verschuiving sleutel om ervoor te zorgen dat lijnen perfect recht lopen.
Tip: Klik CMD +; om richtlijnen te verbergen / tonen.
Kies tot slot de Horizontaal tekstgereedschap (T) en schrijf wat kopie, laat mensen weten dat het voor delen is. In mijn geval gebruik ik eenvoudig DELEN:, waarna ik de namen heb opgeschreven van de sociale netwerken die beschikbaar zijn om te delen.
Plaats de namen in de container en centreer ze om in het midden van de gescheiden blokken te staan.
Super goed! Sociaal delen is gedaan, alles wat we nodig hebben om het af te maken, is door een muis boven de status van de knop te maken. Kies gewoon de Rechthoekgereedschap (U) en teken, gebruikmakend van dezelfde kleur als gebruikt voor de link, een rechthoek onder een van de sociale netwerknamen die de verdeelde ruimte bedekken.
Het is eindelijk tijd om ons blogontwerp in te pakken door een eenvoudige voetnoot met auteursrechtinformatie te plaatsen.
Minimaliseer de Het delen van groep en open de footer groep. Teken daarna een eenvoudige rechthoek aan de onderkant die horizontaal over het document gaat en laat aan de bovenkant genoeg ruimte over. Ik heb grijs gebruikt # 555555 en rond 110px witte ruimte boven de vorm.
Kies tot slot de Horizontaal tekstgereedschap (T) en schrijf een paar eenvoudige auteursrechtkopieën op. In mijn geval heb ik het gebruikt PT serif 14px wit #FFFFFF. Plaats uw kopie in het midden van de rechthoek en lijn deze verticaal uit.
En we zijn klaar met de lay-out. Gefeliciteerd!In deze tutorial zijn we door het proces van het maken van een heel eenvoudige en elegante bloglayout gegaan. Het heeft een sterke op afbeeldingen gebaseerde header boven de vouw en gebruikt een typografie-eerste benadering van de inhoud van de blog.
Bekijk Create en Theme een door Evernote aangedreven blog met Postach.io, waar we zullen kijken naar het bouwen van deze bloglayout voor de browser, integreren met een blogplatform voor een goede maatregel!
Laat het ons weten in het opmerkingenveld als u vragen of opmerkingen heeft!
Accentsconagua