Share
Wat je gaat creërenAdobe Photoshop is niet alleen beroemd om zijn beeldbewerkingsfunctie, maar ook om zijn mogelijkheden om gebruikersinterfaces te ontwerpen. In deze tutorial gaan we een driedimensionale zoek- en beeldweergave-interface ontwerpen. We gaan veel vectorvormfuncties gebruiken en vervolgens Laagstijlen toepassen om een 3D-effect toe te voegen.
Je hebt de volgende gratis middelen nodig om deze tutorial te volgen:
Begin met het maken van een nieuw bestand (Besturing N) met maat 400 pixels × 300 pixels. Selecteer voor de achtergrond Wit.
Klik op de Aanpassingslaag toevoegen pictogram en selecteer vervolgens Effen kleur. Selecteer in het volgende dialoogvenster een lichte kleur voor de achtergrond.
Dubbelklik op de Effen kleur aanpassingslaag en activeer dan Patroon overlay. Selecteer voor het patroon een gratis pixelpatroon. Verminder zijn ondoorzichtigheid naar 10% om het subtiel te houden.
We willen alle lagen georganiseerd houden. Begin met het maken van een nieuwe groepslaag.
Teken een afgeronde rechthoek met hoekradius 6 px. Gebruik grijs voor de kleur.
Dubbelklik op de afgeronde rechthoekvorm en pas vervolgens de Laagstijlen toe Beroerte, Innerlijke schaduw, en Overlay met kleurovergang. Deze stijlen voegen een 3D-effect toe aan de vorm.
Dupliceer de vorm door op te drukken Besturing J. Verander de kleur in blauw. We gaan het omzetten in een knop.
Wijzig de Layer Style-instellingen. Voel je vrij om met de instellingen te spelen, vooral als je verschillende kleuren in de vectorvorm gebruikt.
Knip de knop door een rechthoekvorm aan de linkerkant toe te voegen en stel vervolgens de modus in op Trek de vorm van het voorpand af.
Teken in het zoekgebied een witte afgeronde rechthoek met hoekradius 2 pixels. Zorg ervoor dat het in het midden van de lege ruimte wordt geplaatst.
Dubbelklik op de vorm om de laagstijlen toe te voegen Schuine kant en reliëf, Beroerte, Innerlijke schaduw, Overlay met kleurovergang, en Outer Glow. Deze effecten voegen een mild reliëfeffect toe aan het zoekgebied.
Dupliceer de vectorvorm van het zoekgebied. Verander de kleur in groen. Knip het uit door een rechthoekpad aan de linkerkant toe te voegen met de modus Trek de vorm van het voorpand af.
Voeg deze laagstijlen toe aan de vorm.
Voeg een label toe bovenop de groene vorm. In deze zelfstudie gebruik ik het lettertype NuOrder. Voel vrij om elk lettertype te gebruiken. Dubbelklik op de tekstlaag en voeg vervolgens de laagstijlen toe Slagschaduw en Overlay met kleurovergang om diepte toe te voegen aan de tekst, waardoor de leesbaarheid wordt vergroot.
Voeg een pijl toe naast het label. Je kunt het tekenen met twee overlappende driehoeken, met de laatste vorm ingesteld op Trek de vorm van het voorpand af.
Voeg dezelfde laagstijlen toe aan de pijlvorm als op het label.
We gaan een vergrootglas toevoegen bovenop de zoekknop. Om het te tekenen, begin je met het maken van een donutvorm gemaakt van twee overlappende cirkelvormen.
Voeg vervolgens een afgeronde rechthoekige vorm toe voor de vergrootgreep.
Dubbelklik op het vergrootglaspictogram om Laagstijlen toe te voegen. Activeer in het dialoogvenster Laagstijl Schuine kant en reliëf, Beroerte, Innerlijke schaduw, Overlay met kleurovergang, en Outer Glow. Een combinatie van al deze laagstijlen verandert het pictogram in een mooi gaatje dat door de knop gaat.
Voeg een label toe aan het zoekgebied. Voeg een subtiel toe om het leesbaar te maken Slagschaduw Laagstijl.
Dupliceer de hoofdvorm en plaats deze boven op de zoekbalk. Voeg de laagstijlen toe Innerlijke gloed en Overlay met kleurovergang van zwart naar wit met laag ondoorzichtigheid.
Verminder de Vullen laag naar 0% totdat we alleen het verloop op de zoekbalk hebben staan.
Nu willen we de zoekbalk in een 3D-vorm veranderen. Begin met het dupliceren van de zoekknop en verplaats deze een paar pixels naar beneden. Verander de kleur naar een donkerder blauw. Zorg ervoor dat de gedupliceerde vorm achter de zoekbalk wordt geplaatst.
Herhaal deze stap voor de hoofdvorm van de zoekbalk. Verplaats het een paar pixels naar beneden en verander het naar een donkerdere kleur.
Dubbelklik op de vorm en voeg vervolgens de laagstijl toe Slagschaduw. Vergeet niet dat je altijd een slagschaduw moet toevoegen aan elke 3D-vorm.
We willen ook een hoogtepunt toevoegen bovenop de knop. Control en klik de bovenste zoekbalk om een nieuwe selectie te maken op basis van zijn vorm. Maak een nieuwe laag bovenop elke laag. Klik Bewerken> Lijn. Stel de lijnkleur in op wit.
Verwijder de selectie die we zojuist hebben gemaakt door op te drukken Controle-D. Verzacht de lijn van de streek door een Gaussiaanse vervaging filter.
Voeg een laagmasker toe en verwijder een deel van de markering door deze met zwart te schilderen.
Om alle lagen georganiseerd te houden, beginnen we zoals altijd met het maken van een nieuwe groepslaag. We plaatsen elke laag in de volgende stap binnen deze groepslaag.
Deze interface voor beeldweergave gebruikt dezelfde stijl als de vorige zoekbalk. Daarom beginnen we met het dupliceren van de basisvorm van de zoekbalk. We willen de hoofdzoekbalk, knop, zoekgebied, de markering en de achterkant ervan nemen.
Het is duidelijk dat we willen dat het groter is. Gebruik de Direct selectie gereedschap om punten in het bovenste gedeelte van de display-interface te selecteren en trek deze vervolgens enkele pixels omhoog.
Voeg een afbeelding toe die boven de laag in het weergavegebied wordt weergegeven. Converteer het naar een uitknipmasker door op te drukken Ctrl-Alt-G. Het beeld zal binnen het weergavegebied gaan.
Activeer de Polygoon gereedschap. Via de optiebalk instellen Sides naar 5, en activeren Ster en Gladde hoeken, met Indent Sides By: 50%. Klik en sleep om een stervorm te tekenen. Dubbelklik op de vectorvormlaag en activeer vervolgens de laagstijlen Schuine kant en reliëf, Beroerte, Overlay met kleurovergang, Outer Glow, en Slagschaduw.
Gebruik voor het verloop het goudverloop beschikbaar in de standaardverloopvoorinstelling.
Activeer de Verplaats gereedschap en dan Alt de stervorm om het te dupliceren. We willen vier sterren aan de rechterkant van het scherm. Deze sterren vertegenwoordigen de beeldwaardering.
Selecteer alle sterlagen in de Lagen Paneel. Zorg ervoor dat de Verplaats gereedschap is actief. Klik op het pictogram voor verdelen op de optiebalk om de uitlijning en spatiëring van de sterren te corrigeren.
Activeer de bovenste sterlaag en verander dan de instelling in zijn Schuine kant en reliëf Laagstijl naar naar beneden. Verander zijn Innerlijke schaduw kleur en ook het verloop in Overlay met kleurovergang.
Deze ster moet worden gezien als een niet-geselecteerde ster. In dit geval hebben we een weergaveclassificatie van 3 sterren uit 4.
Ons volgende werk is het toevoegen van een zwevende 3D-banner in het weergavegebied. Begin met het tekenen van een afgeronde rechthoekige vorm met hoekradius 6 px. We gebruiken steeds 6 px hoekradius om het te matchen met de basisvorm van de zoekbalk.
Verleng de hoek van de banner door een rechthoekige vorm van 6 px × 12 px toe te voegen. We hebben deze grootte nodig, 6 px en 12 px, om overeen te komen met de hoekradius van de banner, 6 px. Je zult de reden snel begrijpen.
Voeg vervolgens een cirkel met een straal van 6 px toe en stel deze in op Voorvormen aftrekken.
Dubbelklik op de vorm en pas vervolgens de volgende laagstijlen toe.
Het resultaat is nog niet perfect. We moeten een schaduw toevoegen om het curvy te maken.
Maak een nieuwe laag bovenop de banner en converteer deze naar een uitknipmasker (Ctrl-Alt-G). Schilder wat schaduw handmatig aan de linkerkant van de banner.
Teken voor de achterkant van de banner een afgeronde rechthoek met een donkerdere kleur. Gebruik aan de voorkant een hoekradius van 6 px. Voeg dezelfde laagstijl toe als voor de voorzijde.
Samen is het resultaat een zwevende banner.
Teken een nieuwe laag tussen de voor- en achterzijde van de banner. Verf schaduw handmatig met behulp van de Penseel.
Blijf schaduw achter de banner toevoegen, zoals in de volgende afbeelding. Teken de bannerschaduw op het canvas en de schaduw ervan op de afbeelding.
Voeg tekst toe op de banner. Dubbelklik op de laag en activeer vervolgens de Laagstijlen Slagschaduw en Overlay met kleurovergang.
Dit is het eindresultaat van onze zoekbalk en interface voor afbeeldingen. In deze zelfstudie hebt u geleerd hoe u een driedimensionaal effect aan een platte vectorvorm kunt toevoegen, eenvoudige pictogrammen met vectorgereedschappen en laagstijlen kunt tekenen en de perfecte afgeronde rechthoek handmatig kunt maken. Ik hoop dat je de tutorial leuk vond en er enkele nieuwe technieken uit hebt geleerd.
Accentsconagua