Og det er hvad vi har fået...

5.png

Dette vil dog ikke give os nok dybde. Vi ønsker at gøre dette rektangel endnu mere synligt buet, da det ikke rører overfladen jævnt, men at tilføje mere skygge ved hjælp af lagstilene, eller at gøre skyggen stærkere vil ikke give os den ønskede effekt. Brug denne vandret skillevæg tilbudt af dezinpolio.com og føj det til midten af ​​din form, så det vil "falme" mod hjørnerne, som vist nedenfor:

6.png

Husk nu, at vi nævnte de fede bogstaver? Web 2.0 gør en god brug af skrifttyper, helst meget lette at læse, lidt tegneserieagtige og fed. Vi havde svært ved at vælge en passende skrifttype og besluttede at gå med "Cooper Std".

7.png

Vi gør for at tilføje en meget mild skygge (#5674a7) og lysgradient fra hvid øverst (#ffffff) til lyseblå (#cdd9de) ...

8.png

9.png

Dette vil give os et meget sødt babydesign.

10.png

Web 2.0 er også omkring en god andel, og mens designs er særligt asymmetriske, er andre så at sige tvangssymmetriske. Jeg foretrækker den anden type, da det kræver mindre originalitet og smag at skabe, alt hvad du behøver er en følelse af proportioner. Lad os sige, at vi tilføjer et par knapper nederst og i sidehjørnet af vores design...

11.png

Ser det godt ud?

12.png

Nej, det gør det ikke, fordi fanerne ser alt for kaotiske ud, så vi vil sørge for, at linjen på venstre sidefane "møder" linjen på den nederste fane, sådan her...

131.png

Nu ser det proportionalt ud.

crystal_clear_app_ark2.png

Hvis du undrer dig over, hvorfor vi gik glip af et trin, er lagstilene til faner næsten identiske med dem, vi brugte til hovedrektanglet, og det samme gælder for skrifttypen og lagstilene til "fanerne". Til læringsformål kan du downloade PSD-filen og analysere processen. Husk, at alle disse semi-synlige gradienter og 1px-konturer ofte er det, der gør forskellen mellem fantastisk webdesign og amature forsøg på at designe. Held og lykke!

download psd-fil