Share
Photoshop CS6 zit boordevol nieuwe functies waarmee u betere interface-ontwerpen kunt maken. In deze zelfstudie gebruiken we de nieuwe vectorbewerkings- en lijnmogelijkheden van Photoshop om een beheerdersdashboardinterface te maken. We zullen ook profiteren van de nieuwe snap-to-pixelrasterfunctie van Photoshop om heldere en schone webafbeeldingen te maken. Laten we beginnen!
De volgende items zijn gebruikt tijdens het maken van deze zelfstudie.
We gaan het 960-raster gebruiken met 12 kolomlay-out van 960.gs als kader voor ons ontwerp. Download het sjabloonbestand in zip-indeling en open vervolgens 12 kolommenraster. Klik op het oogpictogram op de voorkant van laag 12 Col Grid om het te verbergen.
Klik op het pictogram met de zwarte en witte cirkel om een nieuwe aanpassingslaag toe te voegen. Selecteer Effen kleur en kies wit in het volgende dialoogvenster.
Maak een nieuwe laag. Klik op Bewerken> Opvulling en selecteer Gebruik: patroon. Gebruik het diagonale lijnpatroon van PSDfreemium. Omdat dit CS6 is, laten we de nieuwste functie gebruiken. Activeer script-patronen en selecteer Symetry Fill.
Zet de laag Dekkingslaag op 4%.
We willen zeker weten dat het hele lagengebied zorgvuldig is georganiseerd. Dus laten we beginnen door ze in een logische volgorde te groeperen. Selecteer beide lagen - achtergrond en patroon - en druk vervolgens op Command / Ctrl + G om ze in de groepslaag te plaatsen.
We hebben geen achtergrondlaag nodig, dus verwijder deze door hem naar het verwijderpictogram te slepen.
Selecteer de groepslaag. Druk op F2 en verander vervolgens de naam. Raak Tab aan om de volgende laag automatisch te bewerken. Wijzig de naam en herhaal deze naar de volgende laag.
Activeer het gereedschap Afgeronde rechthoek. Teken een afgeronde rechthoekige vorm met een straal van 10 px en een breedte van 2 kolommen. Plaats deze rechtsboven op het canvas. Stel op de optiebalk Kleur opvullen in op # f16424 en Lijn op geen.
Dubbelklik laagvorm in het Lagenpaneel om het dialoogvenster Laagstijl openen. Activeer patroonoverlay. Selecteer pixelpatroon van PSDfreemium. Verklein de schaal en de dekking om het een natuurlijke textuur te geven.
Maak een nieuwe laag boven de vorm. Activeer de zachte borstel en schilder schaduw aan de bovenkant.
Alt - klik tussen de logobasis en de schaduw. Dit zet de laag om in een knipmasker en plaatst de schaduw in het logo.
Herhaal het proces een paar keer. U kunt indien nodig meer lagen toevoegen. Verfaccent op de onderkant.
Maak een nieuwe laag onder het logo. Command / Ctrl - klik op vorm om een nieuwe selectie te maken op basis van zijn vorm. Vul selectie met zwart.
Gaussian Blur-filter toepassen. Klik op Filter> Vervagen> Gaussiaans vervagen.
Druk op Command / Ctrl + T om de transformatie uit te voeren. Klik met de rechtermuisknop en kies Verdraaien. Het transformatiekader is verdeeld in 3 x 3 vakken. Sleep het onderste vak naar beneden. Druk op Enter om het transformatieresultaat te accepteren.
Teken een kleinere afgeronde rechthoekige vorm. Stel op de optiebalk de vulling in op Geen en Lijn op Wit met maat 1 pt.
Open de Lijnopties en selecteer vervolgens een streepjesvoorinstelling. Klik op Meer opties om de instellingen van de stippellijn te bewerken.
Dubbelklik in het deelvenster Lagen op de laag om het dialoogvenster Laagstijl te openen. Activeer slagschaduw, stel de hoek in op 90 °, activeer Globaal licht gebruiken, stel de grootte in op 0 px en afstand 1 px.
Activeer het gereedschap Rechthoek en klik eenmaal op het canvas. Stel in het dialoogvenster de grootte in op 6 x 30 px. Klik op OK om te beginnen met het maken van de vorm.
Klik op het vakje Vulling in de optiebalk. Selecteer Verloop en stel de kleur in van #dfdfdf in #ffffff.
Teken een ander rechthoekig pad binnen het logo. Dubbelklik op de laag in het deelvenster Lagen en activeer vervolgens Slagschaduw.
Voeg slagschaduw toe aan de laagvorm.
Hieronder is het resultaat bij grotere vergroting. Zoals je kunt zien, is onze vectorvorm tot nu toe altijd helder. Er is geen halve pixel! Dit is te danken aan de vectorknapfunctie in Photoshop CS6. U kunt deze functie deactiveren als u dat wilt in het dialoogvenster Voorkeuren - maar ik heb geen idee waarom iemand dat zou doen.
Voeg tekst toe aan het logo. We kunnen contrast toevoegen aan de tekst door eenvoudig een deel van het teken in vet te veranderen.
Voeg nog een slagschaduw toe aan de tekst.
Activeer het gereedschap Rechthoek en teken een rechthoek als achtergrond voor de hoofdinhoud. Stel de breedte in op 800 px, vul in: #eeeeee, en lijn: #cccccc, grootte: 1 pt.
Voeg Outer Glow toe met de volgende instellingen.
Voeg een driehoeksvorm en een afgeronde rechthoek toe. Stel hun padmodus in op Vorm combineren.
Voeg tekst toe op het tabblad om de titel toe te voegen. Voeg een klein statistiekpictogram toe dat is gemaakt van enkele kleine rechthoeken.
Teken een witte rechthoekige vorm als basis voor onze hoofdgrafiek. Stel de breedte in op 8 kolommen. Zorg ervoor dat de Lijn op Geen wordt ingesteld. Lagenstijl buitenste gloed toevoegen.
Raak Command / Ctrl + J om vorm te dupliceren. Voeg een grote rechthoekvorm toe aan het onderste gedeelte en stel de modus in op Voorzijde aftrekken. Gradient-overlay toevoegen.
Teken een afgeronde rechthoek. Vulling naar wit instellen zonder lijn. Gebruik dezelfde buitenste gloed en plaats deze achter de vorige vorm.
Maak een nieuwe laag tussen deze twee vormen. Maak een elliptische selectie en vul deze met zwart. Deselecteer (Command / Ctrl + D) en verzacht het door Gaussiaanse vervaging toe te voegen.
Activeer het gereedschap Tekst. Titel titel toevoegen.
Activeer het lijngereedschap en teken dan een lijn van 1 px. Zet de streekkleur op # e4e4ee4.
Dit is het verschil voor en na het toevoegen van de regel.
Teken een rechthoek. Zet de Fill op None en Stroke op #cccccc.
Selecteer het gestreepte lijntype via de optiebalk. Klik op Meer opties en stel Dash and Gap in op 4 en 2.
Teken een horizontale lijn van 1 px met Lijn #cccccc. Selecteer een streepjeslijn.
Activeer het gereedschap Padselectie en selecteer het lijnpad dat we zojuist eerder hebben gemaakt. Druk op Command / Ctrl + Alt + T om het te dupliceren en te transformeren. Druk twee keer op Shift + Pijl-rechts om het 20 px naar rechts te verplaatsen. Herhaal de transformatie en het duplicatieproces door op Command / Ctrl + Shift + Alt + T te drukken.
Blijf het proces herhalen tot de rechthoek is gevuld met kolommen.
Laagdekking verminderen tot 30%.
Herhaal de vorige stappen, maar nu met horizontale lijnen.
Hieronder is het resultaat. Nu hebben we een subtiel raster op de statistische achtergrond.
Voeg waarden toe op beide assen, x en y.
Activeer het lijngereedschap en teken een lijn van 1 px op het raster. Zet de lijnkleur op # f16424.
Shift - sleep om meer lijn toe te voegen. Blijf meer regels toevoegen totdat we een compleet lijndiagram hebben.
Teken een kleine cirkelvorm en plaats deze precies op het lijndiagram. Stel de vulling in op wit en dezelfde lijn tot de vulkleur van de lijn.
Dubbelklik op de vormlaag van de cirkel en activeer Layer Style Stroke. Stel de kleur in op Wit en Positie op Buiten.
Selecteer het cirkelpad met behulp van het padrichtinggereedschap en vervolgens met Alt - sleep het om het te dupliceren.
Gebruik dezelfde stappen om een ander lijndiagram te tekenen. Gebruik deze keer een andere kleur en zet zijn streekopties op een stippellijn.
Voeg net als in het vorige lijndiagram cirkels toe voor elk lijnsegment.
Voeg diagramlegenda toe boven aan het diagram. U voegt eenvoudigweg een korte regel toe met dezelfde eigenschappen als het lijndiagram en voegt een korte beschrijving toe.
Teken een afgeronde rechthoek. Zet de Fill op #eeeeee en Stroke op #cbcbcb.
Voeg binnenste schaduwlaag en verloopoverlay toe.
Teken een rechthoekvorm in het midden van de afgeronde rechthoekige vorm. U kunt elke kleur gebruiken voor de vulling. Zet de Lijn op Geen. Verlaag de vulling tot 0%. Laagstijlovervloeiing toevoegen.
Teken een lijn van 1 px met de kleur #cbcbcb aan de linker- en rechterkant.
Tijdselectie toevoegen. U kunt zien dat de tekst met verschillende achtergrond zich nu in actieve toestand bevindt.
Laten we tekenstijlen gebruiken om ons standaardteken te definiëren. Deze functie is een vereenvoudigde versie van de tekenstijl in Adobe InDesign. Als u vaak InDesign gebruikt, zult u het meteen herkennen.
Open het paneel Tekenstijlen en klik vervolgens op het nieuwe pictogram. Stel in het dialoogvenster het lettertype in op Arial Regular, Size to 12 pt en Color to # 767676. We gaan deze karakterstijl gebruiken in de meeste tekst. Daarom noemen we het ook als standaardkarakterstijl.
Laten we deze tekenstijl op de tekst toepassen. Activeer het gereedschap Tekst, selecteer de tekst en klik vervolgens op de tekenstijl om deze toe te passen.
Wat als we eigenschappen van bestaande tekst als tekenstijlen willen opslaan? Laten we dit doen naar waarden op de grafische as. Maak nieuwe tekenstijlen. Selecteer de tekst en klik op Pictogram herdefiniëren.
Dubbelklik op tekenstijl om de opties ervan te bewerken. Verander de naam. Pas deze tekenstijl toe op alle waarden op beide assen.
Het leuke aan de tekenstijl (en ook de alineatiestijl) is dat u deze eenvoudig kunt bewerken om elke tekst te bewerken die die stijl gebruikt. Hier is een voorbeeld. Laten we de grafische as bewerken - een tekenstijl die we eerder hebben gemaakt voor elke waarde op beide assen. Dubbelklik erop en verander het lettertype en de grootte van het lettertype.
Activeer het gereedschap Afgeronde rechthoek. Teken een afgeronde rechthoek en voeg aan de linkerkant een driehoekje toe. Stel de vulling in: # f1f2f2 en Lijn: geen.
Dubbelklik op de laag in het deelvenster Lagen en voeg zwarte lijn toe. Misschien vraag je je af, waarom gebruiken we de Stroke-optie niet rechtstreeks van zijn eigendom? Het antwoord is in Layer Style Stroke, je kunt de Dekking van de lijn veranderen. Dat is iets dat je nog steeds niet kunt doen met Photoshop CS6. Voeg ook Outer Glow en Gradient Overlay toe.
Dupliceer de vorm en verander de vulkleur in # f16424. Verwijder de laagstijl. Voeg een rechthoekpad toe aan het onderste gedeelte en stel de modus in op Voorvorm aftrekken.
Voeg laagstijlstreek en verloopoverlay toe aan de vorm.
Teken 1 px verticale lijn. Zet de vulkleur op zwart. Laagstijlen toevoegen Stroke. Verklein de lagen Dekking tot 8%.
Voeg een kleine titel toe aan de vorm. Sla de karaktereigenschap op als een tekenstijl. Laagstijlschaduw toevoegen.
Voeg een andere titel toe aan de andere kant. Gebruik dezelfde tekenstijlen en dezelfde slagschaduw.
Voeg een percentage toe. Het is altijd een goed idee om het op te slaan als tekenstijlen. Op deze manier kunt u het uiterlijk ervan eenvoudig bewerken via het venster Tekensstijlen.
Activeer het polygoongereedschap en stel de zijkant in op 3 op de optiebalk. Teken een driehoekje dat naar boven wijst. Stel de vulling in: # c1c1c1 en Lijn: geen.
Voeg binnenste schaduwstijl toe.
Voeg een kleine cirkel en een andere driehoeksvorm toe - deze keer naar beneden. Gebruik dezelfde kleur en laagstijl.
Voeg percentage toe. Zorg er zoals gewoonlijk voor dat u de tekenstijl opslaat.
De gegevens zijn positief. Dus laten we dit benadrukken door de pijl-omhoog te activeren. Verander zijn vorm Vul kleur in # 4ff25d.
Dupliceer het nummer voor een andere gegevens.
Teken een vergelijkbaar gedeelte voor een kleinere grafiek. U kunt dezelfde technieken gebruiken die hierboven zijn uitgelegd. Zorg ervoor dat u een kleiner tekstformaat gebruikt voor de titel.
Teken een blauwe lijn van 1 px binnen het raster. Stel de lijnopties in op gestreept.
Voeg, zoals in de hoofdgrafiek, cirkel toe op elk punt.
Activeer het gereedschap Pen. Teken een nieuwe vorm over de lijn die hem verbindt met de x-as. Gebruik dezelfde kleur als de lijn. Plaats de vorm achter de cirkels.
Voeg gratis pixelpatroon toe van PSDfreemium.
Zet de dekking op 50%.
Voeg het percentage op zijn kant toe. In deze kleinere grafiek willen we ook kleinere tekstpercentagegrootte.
Voeg nog een grafiek toe.
Momenteel werken we aan het tabblad Statistiek. Laten we een ander tabblad toevoegen en deze inactief maken. Dubbele tabteachtergrond met statistieken die we in stap 25 - 27 hebben gemaakt. Het zal handig zijn om de statistiek-tab achteraf te verbergen. Verander zijn vulling- en lijnkleur in # c1c1c1. Verwijder een kleine rechthoek aan de linkerkant. Verplaats de bovenste afgeronde rechthoek naar rechts.
Voeg een eenvoudig pictogram toe dat is gemaakt van een cirkel zonder vulling en lijn: # 646464 met een i erin.
Breng het tabblad Statistieken terug. Teken zo nodig nog een inactief tabblad.
Activeer het gereedschap Rechthoek en teken een rechthoek achter het hoofdtabblad. Zet de Fill op #eeeeee en Stroke op #cbcbcb.
Teken een afgeronde rechthoek. Zet de vulling op een verloop van # d6d6d6d tot # f3f3f3 en lijn # clc1c1. Dit wordt achtergrond voor een inactief menu.
Dupliceer de afgeronde rechthoek. Verander de kleur in Opvulgradiënt van # ef6526 in fa834d en Lijn: # f16424. Deze wordt gebruikt voor het actieve menu. Zorg ervoor dat u het onder een kleine driehoek van het tabblad Statistieken plaatst.
Dupliceer de eerste afgeronde rechthoek om meer achtergrond te maken voor inactieve menu's.
Voeg tekst toe op de knop. Dubbelklik op de laag om Layer Style Drop Shadow toe te voegen. Gebruik in het inactieve menu donkere tekst en lichte slagschaduw.
Gebruik voor actieve menu witte tekst en donkere slagschaduw.
Teken een afgeronde rechthoek. U hoeft zich geen zorgen te maken over de vulling of lijn.
Laten we voor de vulling hetzelfde verloop gebruiken in het vorige zijbalkmenu. Activeer ook Padselectie en selecteer de vorm. Klik met de rechtermuisknop en kies Fill kopiëren.
Keer terug naar de nieuwe vorm, klik er met de rechtermuisknop op en kies Fill vullen.
Open de vuloptie op de optiebalk en klik op het pictogram onder het verloopvoorbeeld om de verlooprichting om te keren.
Herhaal hetzelfde proces om de Lijninstelling te kopiëren.
Voeg Inner Shadow toe met de volgende instellingen.
Activeer gereedschap Tekst en witte knop label. Laagstijlschaduw toevoegen.
Voeg een driehoekje toe dat naar beneden wijst. Invullen: #eeeeee en Stroke: Geen. Voeg dezelfde slagschaduw toe als het knoplabel.
Voeg een lijnlabelsymbool en pijl toe van 1 px. Zet de kleur op # b04312 en voeg een lichte slagschaduw toe met een hoek van 180 °.
Laten we een pictogram voor een vergrootglas op de knop toevoegen. Begin met het tekenen van een cirkelpad met een afmeting van 10 x 10 px. Zet zijn lijn op wit met maat: 2 pt en vul op naar geen.
Voeg een lijn van 2 punten toe naast de cirkel met een hoek van 45 °.
Voeg opnieuw dezelfde slagschaduw toe aan het vergrootglaspictogram.
Teken een afgeronde rechthoek naast de knop. Gebruik vul gradiënt van #ededed naar wit en 1 pt Stroke # clc1c1.
Voeg kleine tekst toe in de vorm. We willen dat het subtiel is. We gebruiken dus een heel lichtgrijs (# b0b0b0).
Laten we nog een minipictogram toevoegen. Begin met het tekenen van een kleine cirkelvorm en voeg vervolgens een plusteken toe dat is gemaakt van twee afgeronde rechthoeken. Stel de plustekenmodus in op Voorvorm aftrekken. Selecteer de vorm van het teken met behulp van het gereedschap Padselectie en draai het vervolgens 45 °
Tenslotte! We hebben een vectorgrafiek volledig getekend in Photoshop. Dit was heel moeilijk om te doen in eerdere versies van Photoshop, maar zoals u ziet, helpt Photoshop CS6 echt onze workflow te stro
Accentsconagua