Share
Goede ontwerpen mogen nooit verloren gaan. Dit ontwerp is oorspronkelijk gedaan voor een klant die nooit heeft betaald, en aangezien er zulke overweldigende positieve feedback was, heb ik besloten om er een zelfstudie voor te maken. Rijke en romige texturen geven dit ontwerp een uniek thema. Ik hoop dat je van koffie houdt!
We geven niet alleen de Photoshop-bestanden weg voor dit ontwerp, we geven ook de HTML-bestanden weg, zodat u kunt nagaan hoe het is gecodeerd na de ontwerpfase! Je zou deze tutorial vanaf het begin moeten doornemen, maar voel je ook vrij om de bronbestanden te pakken.
Zoals bij elk ontwerp, hebben we een goed raster nodig om te beginnen. Ik begin altijd met een document dat 960px breed is (wat de breedte van onze pagina zal zijn). Zorg ervoor dat je je document voldoende hoogte geeft voor alle elementen die we gaan maken - ik koos voor 1100px.
Sleep richtlijnen naar de zijkanten van uw document. Deze fungeren als de dakgoten voor ons ontwerpgebied, dat 960px breed zal zijn. Sleep ook richtlijnen op 10px en 960px op het horizontale vlak. Deze zullen fungeren als een ident om alles recht te houden terwijl we de pagina aflopen.
Zodra u uw richtlijnen hebt ingesteld, gaat u naar Afbeelding -> Canvasgrootte en wijzigt u de waarde van uw canvasbreedte in 1000 px. Dit geeft ons een beetje extra ruimte om aan de buitenkant te werken en laat zien hoe de site in de browser wordt uitgebreid.
De linkerbovenhoek van uw document zou er als volgt uit moeten zien:
We moeten nog enkele richtlijnen opstellen, omdat we enkele kolommen verticaal op de pagina hebben lopen. Maak 6 meer verticale richtlijnen bij 330px, 350px, 650px, 670px, 730px en 750px. Deze moeten ons helpen aan de slag te gaan en alles op één lijn te houden.
Vervolgens vullen we de achtergrond in. We gaan duidelijk bruin vanwege de rijkdom (en het is de kleur van koffie). Begin met het maken van een nieuwe laag en vul het hele document met een effen kleur (we gaan het veranderen met Laagstijlen). Je kunt dit snel doen door op Shift + F5 te drukken om te "vullen".
Hernoem deze laag naar "bg" en klik er met de rechtermuisknop op in het palet Lagen en selecteer "Mengopties". Selecteer "Gradient Overlay" en maak een verloop van # 67331c tot # 2e1308; we willen het donkerdere bruin boven aan de pagina en het lichtere bruin aan de onderkant.
Nu moeten we een beetje textuur toevoegen, zodat het verloop er niet zo vlak uitziet. Maak een nieuwe laag, boven je "bg" laag, en noem deze laag "Patroon".
Het resultaat zou ongeveer zo moeten zijn:
Nu we onze achtergrond hebben gemaakt, gaan we door met het maken van enkele elementen op de pagina - te beginnen met die mooie gele navigatiebalk.
Maak een nieuwe laaggroep en hernoem deze groep "Navigatie". Maak binnen de groep "Navigatie" een selectie die 100px hoog is en de volledige breedte van uw document. Maak een nieuwe laag en druk op Shift + F5 om de laag te vullen. Als je vulkleur, gebruik # edd38d (geel). Hernoem deze laag "bg" binnen de groep "Navigatie".
Je hebt nu je navigatiebalk. Het ziet er een beetje plat uit, dus we gaan door en voegen een paar laagstijlen toe om het een beetje meer op te laten vallen. Klik met de rechtermuisknop op de "bg" -laag en selecteer Mengopties.
De balk "Navigatie" zou er als volgt uit moeten zien:
Nogmaals, we hebben een beetje textuur nodig, anders ziet het er plat uit. Ik gebruikte deze zandachtige textuur die ik rondslingerde. Het belangrijkste onderdeel hier is de kleur. U kunt elke gewenste textuur gebruiken, maar de kleur moet vergelijkbaar zijn met de vulkleur die we eerder hebben gebruikt. Voeg deze structuur toe in een nieuwe laag boven de "bg" -laag die we eerder hebben gemaakt en stel de dekking in op 30%. Hernoem deze laagstructuur en zorg ervoor dat deze precies dezelfde afmetingen heeft als de "bg" -laag.
We willen de gele balk iets meer diepte geven, dus we gaan handmatig een donkerdere schaduw maken aan de onderkant. Om dit te doen, maak een selectie onderaan de gele balk en maak een nieuwe laag.
Vul deze nieuwe laag met een verloop (Shift + F5) van Transparant naar # 2f1408 (bij 30% dekking)
Dat zou het voor de gele balk moeten doen. Het zou er ongeveer zo uit moeten zien:
Maak een nieuwe groep met de naam "Nav" en maak alle onderstaande tekst en lagen daarin.
Vrij eenvoudige navigatie hier, groot en gemakkelijk te lezen. Het lettertype is Georgia, 30px. Zorg ervoor dat uw tekst een goede tussenruimte heeft tussen elk woord (om mogelijke actieve statussen toe te staan). Maak de tekstkleur # 92583f, met het actieve item (in dit geval Home), # 64311b.
Om de "actieve" onderstreping voor de navigatie te maken, gebruikte ik het penseel om een enigszins ondertekende onderstreping op te lichten. Dit verbindt het logo met de rest van de site. Maakt u zich geen zorgen als u het bij de eerste poging niet meteen doet - ik heb het waarschijnlijk 50 keer getekend voordat ik de regel vond die ik leuk vond.
Nu hebben we de knop "Aanmelden" nodig. Dupliceer de navigatietekst (selecteer de tekstlaag en Command + J) en verander de woorden om "Aanmelden" te lezen.
Selecteer vervolgens het gereedschap Afgeronde rechthoek en teken een rechthoek met straal 20px; Dit geeft ons de vorm rond de aanmeldtekst.
Zet de vulling van deze laag op 0% en pas de volgende laagstijlen toe:
Om het logo te maken, vond ik een gratis voorraadservet en trimde ik de randen een beetje. U kunt uw eigen vinden op: iStockPhoto of andere gratis sites.
Ik heb een slagschaduw toegevoegd om te laten zien dat het servet boven al het andere zat:
Ik heb een bouillon textuur van een koffievlek gebruikt (om een beetje meer authenticiteit te geven aan onze koffiesite en servet). Mogelijk moet je sleutelen aan de dekking totdat het er goed uitziet. Je kunt ook proberen de mengmodus van de vlek in te stellen op Vermenigvuldigen om het een beetje meer op te laten vallen.
Wat de rest van het logo betreft, koos ik een handgeschreven lettertype en tekende ik snel een koffiekopje. Niets is te lastig hier.
We maken nu dat doorzichtige zoekvak. Maak een nieuwe laaggroep, onder de "gele balk" -lagen (omdat we willen dat de zoekbalk eruit ziet als een tabblad dat onder de kop uitsteekt). Uw lagenstapel zou iets in deze richting moeten zijn:
We beginnen met het maken van de afgeronde rechthoek met daarin de zoekbalk. Pak het gereedschap Afgeronde rechthoek en maak een rechthoek die 300px breed en ongeveer 70px groot is. Zorg ervoor dat de rechthoek in onze "rechter kolomgoot" past met de hulplijnen die we in de eerste stap van deze zelfstudie hebben gemaakt.
Het resultaat zou er als volgt uit moeten zien:
Vervolgens maken we het invoervak met het gereedschap Afgeronde rechthoek. Maak een rechthoek met straal 5px, breedte: 280px, hoogte: 30px. Centreer deze nieuwe rechthoek in de "container" -rechthoek die u eerder hebt gemaakt. Hernoem deze laag "invoer"
Pak de teksttool en voeg wat tekst toe met # af8753 als uw kleur. Kies je favoriete aandelenpictogram (ik raad het gebruik van IconFinder voor pictogrammen aan).
Nu we de volledige header hebben gemaakt, kunnen we nu de echte inhoud bekijken. We maken eerst die 3 grote inhoudsdelen. Grijp opnieuw het afgeronde rechthoekgereedschap met een straal van 20px en maak 3 afgeronde rechthoeken in de 3 kolommen die we eerder hadden gemaakt.
Om ervoor te zorgen dat deze vakken eruit zien als wat ik zojuist in de schermafbeelding heb weergegeven, past u de volgende laagstijlen toe:
Ik vond een aantal geweldige koffiepictogrammen op het web die perfect bij het ontwerp pasten, die ik op deze 3 secties heb gebruikt. Nogmaals, we maken gewoon gebruik van onze middelen - en het heeft geen zin om hier het wiel opnieuw te creëren.
Vervolgens heb ik een kop toegevoegd met hetzelfde lettertype Georgia en een tekst met opsommingstekens en deze sectie is voltooid.
Omdat het ontwerp transparantie in het hele ontwerp gebruikt, vond ik dat de tabelstijlen niet anders zouden moeten zijn. De tafel is schoon en eenvoudig, waardoor hij perfect in het ontwerp past.
Pak de selectiekadertool en maak een vierkante selectie waar u uw tabel wilt hebben. Mijn tafel is 700px breed (volgens de richtlijnen die we eerder hebben ingesteld) en 220px hoog.
Maak een nieuwe laag en vul deze laag (Shift + F5) met een donkerder bruin (ik koos # 3c2014). Hernoem deze laag naar "table bg" en zet de dekking op 70%. Gebruikmakend van de tool voor het selecteren van één lijn, maken we de scheiding tussen kolommen en rijen. Zodra u hebt geselecteerd waar u wilt dat uw divisies zijn, drukt u op Verwijderen en verwijdert u de gevulde pixels uit de laag 'table bg'.
Je zou nu een leuk tafelrooster moeten hebben zoals dit:
Ik gebruik Georgië om de cellen met tekst in te vullen, en ik laat dat aan jou over om kleuren / maten te kiezen. Zorg ervoor dat u de hoofdkop en de tabelkoppen toevoegt.
Nu maken we de beoordelingspictogrammen. Voor de "prijs" -beoordelingen heb ik een lettertype met een dik dollarteken gekozen en een aantal laagstijlen toegepast. Wanneer u uw lettertype vindt, typt u 4 dollartekens. Dupliceer deze laag, schuif deze vervolgens naar rechts en typ 1 dollarteken (er worden verschillende laagstijlen op toegepast). Voor de "actieve" gele dollartekens zullen we de volgende laagstijlen toepassen:
En voor de inactieve dollartekens willen we dat ze er uitzien (alsof ze niet zijn ingevuld). We zullen hier verschillende laagstijlen toepassen:
Voor de sterbeoordeling heb ik het hulpmiddel Photoshop Custom Shape gebruikt en de ster gekozen. Dezelfde techniek als die we voor de dollartekens hebben gebruikt (eenvoudig de laagstijlen van boven kopiëren / plakken) naar deze sterren.
Uw resultaat zou in deze lijn moeten zijn:
Groepeer deze enkele rij die u hebt gemaakt en dupliceer de groep tweemaal, waarbij u de rij naar beneden verschuift om in het rooster te passen dat u eerder hebt gemaakt. Het eindresultaat zou er als volgt uit moeten zien:
Onze laatste hoofdsectie is de meest actieve gebruikerslijst. We blijven ons gebruik van Georgia gebruiken, maar geven een extra dimensie aan gebruikers die geen avatars hebben. Je zult zien dat het patroon eigenlijk van het pictogram in het vak "Bladeren" bovenaan komt - de stoom die uit de mok komt. Nog een fijn detail om de ontwerper samen te binden. Hier ziet u hoe u het maakt.
Voeg in de rechter kolomgoot de kop toe (hergebruik wat je hebt gemaakt voor "Recente beoordelingen") en vul een rechthoekgebied met 40% Dekking (kleur doet hier niet ter zake). Noem deze laag "container", en dan zullen we er een paar Laagstijlen (Color Overlay & Stroke) aan toevoegen:
Het resultaat moet een ondoorzichtige doos zijn met een mooie buitenrand die donkerder is dan de binnenste achtergrond:
Gebruik voor de avatar de tool Marque om een selectie van 50 x 50 pixels te maken. Maak een nieuwe laag en vul je selectie met elke gewenste kleur (Shift + F5).
Nu zullen we enkele laagstijlen toevoegen om deze avatar er een beetje beter uit te laten zien voor die gebruikers die geen avatar-set hebben.
Voeg wat tekst toe voor de naam en het land van de gebruiker en de stoom wervelt uit de koffiekop en dupliceer de rij een paar keer om de ruimte te vullen.
Eindelijk, de voettekst. Om een beetje van elkaar te scheiden, is er een donkerbruin tot transparant verloop van boven naar beneden om een visuele lijn te bieden om de twee secties te verbreken. Als u deze scheiding wilt maken, gebruikt u het selectiekader om een selectie te maken en de selectie te vullen met een verloop (bruin tot transparant). Pas de dekking van het verloop aan totdat je de patronen van de achtergrond kunt zien schijnen.
Nogmaals, we zullen Georgië hier gebruiken om enkele aanvullende links over de site te maken. Ik gebruikte 18px voor de links en 14px voor de onderstaande copyright-melding. Zorg ervoor dat de linkerkant is uitgelijnd met de richtlijnen die we eerder hebben gemaakt.
De finishing touch is het hergebruiken van het pictogram van de koffiekop in het vak "Bladeren" hierboven in de rechter benedenhoek; wederom de rechterkant op één lijn brengen met de richtlijnen.
Niet zo moeilijk toch? Het is vrij eenvoudig wanneer je het in stuk kunt breken en een aantal van dezelfde stijlen en technieken opnieuw kunt gebruiken die je keer op keer hebt gedaan. De gesegmenteerde bestanden zijn ook opgenomen, zodat u kunt zien hoe dit gecodeerd was. Er is veel veranderd sinds ik dit heb ontworpen en gecodeerd, en veel van de afbeeldingen zouden waarschijnlijk opnieuw gemaakt kunnen worden met CSS3 en gradiënten, maar bijna 3 jaar geleden, zo heb ik het gedaan. Je hebt dit ontwerp misschien gezien op www.coffeenatic.com; nu de site verdwenen is, dacht ik dat het een goed idee zou zijn om het met iedereen te delen, omdat ik zulke positieve feedback kreeg. Ik hoop dat je ervan genoten hebt!
Accentsconagua