Categories LearningGuides Forum

Design & Illustration

INTERFACE

Create a One-Page RetroWeb Design Layout inPhotoshopbyConstantinPotorac 26Mar2012 55Comments

42 7 44

InthistutorialwewillexplainhowtocreateaonepageretrowebdesignusingAdobePhotoshop.WhilemostofthedesigniscreatedinPhotoshop,wewillalsouseIllustratortocreatevariousshapesandelements.Let'sgetstarted!

ThistutorialwasacollaborationwithCiursaIonut.

Tutorial Assets

Thefollowingassetswereusedduringtheproductionofthistutorial.

RetroIconsTileablesShapesPackTileablesLinesPackMunciefontOswaldfontOpenSansfontLeckerliOnefont

960 Grid System

Inthistutorialwewillusethe960GridSystem.Downloaditandunzipthearchivefile.Thengotothe"Photoshop"folder(inside"templates").Thereyouwillfindallthe.PSDfiles.Forthiswebdesignwewillusethe12columnsgrid.

Afteryouopenthe.psdfileinPhotoshopyouwillsee12redbars.Thatisthegridthatwewillbeusing.Youcanhidetheredbarsbyclickingontheeyeiconofthe12ColGridlayer.

DuringthistutorialIwillaskyoutocreateshapeswithcertaindimensions.OpentheInfopanel(Window>Info)andwhenyoucreateashapeyouwillseeitsexactwidthandheightinthispanel.

ashapeyouwillseeitsexactwidthandheightinthispanel.

The.PSDfilecontainssomeguidesaswellwhichwillbeveryuseful.ToactivatethemgotoView>Show>Guides,orusetheshortcutCtrl/Cmd+.IusuallyhidetheredbarsandactivatetheguideswheneverIneedthem.

Thegridwillhelpusapplythealignmentdesignprinciple,whichstatesthateveryelementofthedesignshouldbevisuallyconnectedwithanotheroneandnothingshouldbeplacedrandomly.

Nowthatwecoveredthebasicsofusingthe960GridSystem,wecanmoveontocreatingtheactualweblayout.Ifyouwanttofindoutmoreaboutthe960GridSystemyoucanreadamorecomprehensiveguide.

Step 1 - Setting up the document andcreating the background

Openthe"960_grid_12_col.psd"fileinPhotoshop.Weneedmorespacetoworkwith,sowewillhavetoincreasethecanvassize.GotoImage>CanvasSize(Ctrl/Cmd+Alt/Option+C).Setthewidthto1200pxandtheheightto1700px.Thenclickontheuppermiddleanchorpoint.Thatisthepointtheimagewillexpandfrom.

Nowwewillcreateapatternwhichisgoingtobeappliedtothewebsitebackground.Createanewdocument(Ctrl/Cmd+N)withthedimensions1pxby3px.Thencreateanewlayer(Ctrl/Cmd+Shift+N).

ZoominandusetheRectangularMarqueeTool(M)tocreatea1pxby1pxselectionatthetopofyourdocument.FillthisselectionwithblackusingthePaintBucketTool(M).

HitCtrl/Cmd+Dtodeselect.Hidethe"Background"layerandgotoEdit>DefinePattern.Nowyoucanclosethisdocument.

Gobacktoyourwebdesigndocumentandhidethe"12ColGrid"layer,butalwayskeepitatthetopoftheLayerspanel.Thiswayyoucanactivateitandcheckiftheelementsofyourwebdesignarealignedtothegrid.

GotoLayer>NewFillLayer>SolidColorandsetthecolorto#f2f1ed.Namethislayer"Mainbackground".Wewillapplyanoisefiltertothislayer,butwedon'twanttorasterizeit.Insteadwewilluseasmartobject,sowecaneditthefilterslateronifneeded.Itisalwaysagoodpracticetoworkasnondestructiveaspossibleandkeepeverything

editable.

Rightclickonthe"Mainbackground"layerandselectConverttoSmartObject.ThengotoFilter>Noise>AddNoiseandusethesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandapplythepatternyoucreated.Thiswillgiveusasubtlecardboardtexturewhichwewillusethroughouttheentiredesign.

Step 2 - Creating the headerbackground

Createanewgroup(Layer>New>Group)andnameit"Header".Createanothergroupinsideitandnameit"Headerbg".

SelecttheRectangleTool(U)andcreatearectanglewiththedimensions1200pxby150pxandthecolor#e9e5db.Namethislayer"headerbg"andplaceitatthetopofyourdocument.

Rightclickonthe"headerbg"layerandselectConverttoSmartObject.GotoFilter>Noise>AddNoiseandusethesettingsfromtheimagebelow.

Createanewverticallinepatternjustlikeyoucreatedthepreviousone.Forthispatternsetthedocumentsizeto3pxby1px.Afteryousavethepattern(Edit>DefinePattern),gobacktoyourwebdesigndocument,doubleclickonthe"headerbg"layertoopentheLayerStylewindowandapplythepatternyoucreated.

Thereisnotalotofcontrastbetweentheheaderbackgroundandthemainbackground,sowewilladdafewseparatorsandgradientstodefineeachsectionbetter.

SelecttheLineTool(U)andsettheWeightto1px.HolddowntheShiftkeyandcreateahorizontallineatthebottomofyourheaderusingthecolor#bcb9b1.Namethislayer"1pxline".

Duplicatethislayer(Ctrl/Cmd+J),selecttheMoveTool(V)andhitthedownarrowkeyonyourkeyboardtomovethislayer1pxdown.Changethecolorofthenewlineto#f8f7f5.

UsetheRectangularMarqueeTool(M)tocreateaselectionatthebottomofyourheader(1).ThengotoLayer>NewFillLayer>Gradientandusethesettingsfromthefollowingimage(2).Namethislayer"bottomgradient"andsetitsblendmodetoSoftLight20%.

Duplicatethegradientlayerandmovethenewoneatthetopoftheheader.Namethislayer"topgradient".ClickonitsthumbnailtoeditthegradientandticktheReverseoption.Thiswillgiveusatoptobottomgradient.

Nowwewilladdanewpatternbeneaththeheader.UsetheRectangleTool(U)tocreatea160pxhighrectanglebeneaththeheader(1).Namethislayer"pattern"andsetitsFillto0%.

DoubleclickonthislayertoopentheLayerStylewindowandapplyaPatternOverlayeffect(2).ThepatternthatIusedisfromtheTileablesLinesPack.

Atthemomentthislayerhasasharpbottomedge.Wewantthatedge

tobemoresoft,sowewilluseamask.GotoLayer>LayerMask>RevealAll.ThenselecttheGradientTool(G)withablacktotransparentgradient.HolddowntheShiftkeyanddragaverticalgradientatthebottomofthislayertomaskoutthebottomedge(3).

Wewillcreateonemoregradientbeneaththeheader.UsetheRectangularMarqueeTool(M)tocreateaselectionasyouseeintheimagebelow(1).GotoLayer>NewFillLayer>Gradientandusethesettingsfromthefollowingimage(2).

Namethislayer"contenttopgradient"andsetitsblendmodetoSoftLight50%(3).

Step 3 - Creating the logo

Forthelogowearegoingtousetwofonts:MuncieandDamion.SelecttheTypeTool(T)andwritethenameofyourwebsiteusingthefontMunciewiththecolor#847e70andthesize80px.Addashadowtothislayerusingthesettingsfromtheimagebelow(1).Thiswillcreateasubtlehighlighttothetextandmakeitlooksharper.

UsetheLineTool(U)withtheforegroundcolor#837d6ftocreatetwolinesatthetopofyourtextlayerandtwoothersatthebottom.Nametheselayers"1pxline"(2).Takealookatthefollowingimageforreference.

Selectall4linelayersandduplicatethembydraggingthemoverthe"Createnewlayer"buttonfromthebottomoftheLayerspanel.Changethecolorofthenewlinestowhiteandsettheiropacityto50%.UsetheMoveTool(V)tomovetheselines1pxbeneaththedarkerones(3).

Groupallthelinelayerstogether(selectthemandhitCtrl/Cmd+G).Namethegroup"lines".

UsetheTypeTool(T)towritetheword"Retro"inthemiddleofthebottomlines.UsethefontDamionwiththesize21pxandthecolor#847e70.Applyashadowtothislayerusingthesettingsfromtheimagebelow.

NowwewilladdtheEnvatologointhemiddleofthetoptwolines.First,downloadthe"PoweredByEnvatoAPI".PSDfileandopenitinPhotoshop.Doubleclickonthethumbnailofthe"VectorSmartObject"andthefilewillbeopenedinAdobeIllustrator.

Selecttheleafobjectandchangeitsgradientcolorsto#847d6fand#5b574f.UsetheDirectSelectionTool(A)toselecttheleafandcopyit(Ctrl/Cmd+C).GobacktoPhotoshopandpasteit(Ctrl/Cmd+V)assmartobject.

GotoEdit>FreeTransform(Ctrl/Cmd+T),holddowntheShiftkeyandscalethislayerdown.Namethislayer"envatologo"andmoveitinthemiddleofthetoptwolines.CopytheDropShadowlayerstylefromthe"Retro"textlayerandpasteitonthisone.

WewanttohidethelinesunderneaththeEnvatologoandthe"Retro"textlayer.Wecandothisusingamask.Clickonthe"lines"grouptomakeitactive.UsetheRectangularMarqueeTool(M)tocreatetwoselections,asyouseeintheimagebelow(note:holddowntheShiftkeyafteryoucreatethefirstselection,soyoucanaddthesecondone).

GotoLayer>LayerMask>HideSelection.NowthelinesunderneaththeEnvatologoandthetextlayershouldbehidden.

Step 4: Creating the navigation barribbon

Thenavigationbarforthiswebdesignisgoingtobearibbonthatwe

willcreateusingshapes,smartobjects,noisefiltersandlayerstyles.First,createanewgroupandnameit"Navigation".Thencreateanothergroupinsidethefirstoneandnameit"ribbon".

UsetheRectangleTool(U)tocreatearectanglewiththedimensions610pxby44pxandthecolor#d8cfba.Namethislayer"rectangle",rightclickonitandselectConverttoSmartObject.ThenapplyaNoisefilter(Filter>Noise>AddNoise)usingthesettingsfromtheimagebelow.

DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromtheimagebelow.ThepatternthatIusedisfromtheTileablesShapesPack.TheStrokecolorthatIusedis#b1aa99.

UsethePenTool(P)tocreatetheshapefromtheendoftheribbon.Takealookatthefollowingimageforreference(1).

Namethislayer"leftend"andmoveitunderneaththe"rectangle"layer.Offsetthisshape10pxdownfromtherectangletopedgeand10pxtotherightfromtherectangle'sleftedge(2).

RightclickonthislayerandselectConverttoSmartObject.Applyanoisefilterwiththesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage(3).TheStrokecolorthatIusedis#9d9684.

Duplicatethe"leftend"layer(Ctrl/Cmd+J)andgotoEdit>Transform>FlipHorizontal.Namethenewlayer"rightend"andmoveittotherightsideoftherectangle.ThensettheInnerShadowangleofthislayerto180degrees.

UsethePenTool(P)withtheforegroundcolor#6c6554tocreatea

UsethePenTool(P)withtheforegroundcolor#6c6554tocreateatrianglethatconnectstherectanglewiththeendingshapeoftheribbon(1).IntheimagebelowImadethistriangleredtomakeitmorevisible.

Namethislayer"lefttriangle",rightclickonitandselectConverttoSmartObject.Thenapplyanoisefilterwiththesettingsfromtheimagebelow(2).

Duplicatethislayer(Ctrl/Cmd+J)andgotoEdit>Transform>FlipHorizontal.Namethenewlayer"righttriangle"andmoveittotherightsideoftheribbon.

Nowwewilladdsomeshadowsandhighlightstotheribbon.UsetheRectangularMarqueeTool(M)tocreateaselectionwiththedimensions10pxby44pxovertheleftsideoftherectangle(1).

GotoLayer>NewFillLayer>Gradientandusethesettingsfromtheimagebelow.Namethislayer"lefthighlight"andsetitsblendmodetoSoftLight70%(2).

Createanewselectionwiththedimensions5pxby44px(3).GotoLayer>NewFillLayer>Gradientandusea#b5ae9dtotransparentgradient(4).Namethislayer"leftshadow".

Duplicatethesetwolayersandmovethemtotherightsideoftherectangle.Thenchangethegradientangleofthesetwolayersto180degrees(5).

Nowwewillcreateastitchedribboneffectusingdashedlines.First,wewillneedtocreateanewpattern.Createanewdocument(Ctrl/Cmd+N)withthedimensions10pxby1px.

ZoominandusetheRectangularMarqueeTool(M)tocreateaselectionwiththedimensions6pxby1px,asyouseeintheimagebelow.Createanewlayerandfilltheselectionwithblack.

HitCtrl/Cmd+Dtodeselect.Hidethe"Background"layerandgotoEdit>DefinePattern.Saveyourpatternandthenclosethisdocument.

Gobacktoyourwebdesigndocumentandcreateanewgroupinsidethe"ribbon"group.Namethisone"dashedlines".

UsetheLineTool(U)tocreatea1pxhorizontallineatthetopoftheribbon'srectangle(1).SettheFillofthislayerto0%.Thenapplythedashedlinepatternthatyoucreatedearlier(2).

Namethislayer"1pxdashedline",rightclickonitandselectConverttoSmartObject.DoubleclickonthislayertoopentheLayerStylewindowandapplyaColorOverlayeffectusingthecolor#b1aa99(3).

Nowwewilladdabrighterdashedlinetomakethestitchedeffectlookmoresharp.Duplicatethislayer(Ctrl/Cmd+J)andchangeitscolorto#e4ddcd.UsetheMoveTool(V)tomovethisdashedline1pxbeneath

#e4ddcd.UsetheMoveTool(V)tomovethisdashedline1pxbeneaththefirstone(4).

Selectthetwodashedlinelayersandduplicatethem.Thenmovethenewlinesatthebottomoftherectangle(5).

Step 5 - Creating the ribbon background

Nowwearegoingtocreateabackgroundfortheribbontomakeitlooklikeitiswrappedaroundawall.

Createanewgroup,nameit"ribbonbg"andputitbeneaththe"ribbon"group.UsetheRectangleTool(U)tocreateablackrectangleunderneaththeribbon.Makesurethisrectangleisplacedwithinthetworibbontriangles.Namethislayer"ribbonbg"andsetitsblendmodetoSoftLight20%.

UsetheRectangularMarqueeTool(M)tocreateaselectionovertheleftsideoftheribbonbackground(1).

GotoLayer>NewFillLayer>Gradientandusethesettingsfromtheimagebelow(2).SettheblendmodeofthislayertoSoftLight40%(3).

UsetheLineTool(U)withthecolor#b0a793tocreatea1pxverticallineovertheleftedgeoftheribbonbackground.Duplicatethislinelayer(Ctrl/Cmd+J),movethenewone1pxtotherightandchangeitscolorto#dbd5c6(4).

Addthesamegradientandlinestotherightsideoftheribbonbackgroundaswell.Keepinmindthatyouneedtosetthegradientangleto180degreesandflipthetwolinelayershorizontally(5).

Addamasktothe"ribbonbg"group(Layer>LayerMask>RevealAll).Thenselectalinearblacktotransparentgradient(G)andmaskoutthetopandthebottomareasofthisgroup.Intheimagebelowyoucanseehowmymasklookslike(ifyouholddowntheAlt/Optionandclickonthethumbnailofthemask,youwillbeabletoseeitovertheentireimage).

Step 6 - Adding the navigation items

Nowwewilladdthenavigationmenuitemsandsomeretroiconsnexttoeachone.SelecttheTypeTool(T)andwritethenameforyournavigationitemsusingthefontOswaldwiththesize16pxandthecolor#7f7866.Toindicatetheactivepage,changethecolorofthefirstitemtoadarkerbrown(#615c4f).

Downloadthissetofretroiconsandopenthe.AIfileinAdobeIllustrator.Selecteachiconthatyouwanttouseandcopyit(Ctrl/Cmd+C).ThengotoPhotoshopandpasteeachicon(Ctrl/Cmd+V)asasmartobject.UseFreeTransform(Ctrl/Cmd+T)tochangethesizeoftheselayers.

ApplyaColorOverlayeffecttoeachiconusingthesamecolorthatyouusedforthetextlayers.ThenapplyaDropShadoweffectonallthetextandiconlayersusingthesettingsfromtheimagebelow.

Step 7 - Creating a "Contact us" sign

Insteadofaddingthecontactlinkinthenavigationbar,wewillcreatearetrosignforit.Wearegoingtobreaktheproximitydesignprinciple,whichstatesthatrelateditemsshouldbegroupedclosetogetherandhavesimilarvisualcharacteristics.Thecontactlinkispartofthenavigation,butitwillhaveadifferentstylethantheothernavigationitemstomakeitstandout.Keepinmindthatwheneveryouwanttobreakadesignprincipleyoumust:a)knowtheprincipleandb)haveareasontobreakit.

Createanewgroupandnameit"Contact".SelecttheRoundedRectangleTool(U),settheRadiusto4pxandcreatearoundedrectanglewiththedimensions130pxby180pxandthecolor#c7c1b3.

Namethislayer"border",rightclickonitandselectConverttoSmartObject.Applyanoisefilterusingthesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheStrokeeffectIusedthecolor#a9a396.ThepatternthatIusedisfromtheTileablesLinesPack.

SelecttheRoundedRectangleTool(U),settheRadiusto2pxandcreatearoundedrectanglewiththedimensions122pxby72pxandthecolor#f3f0e8.Movethisrectangleinthemiddleofthepreviousone.

Namethislayer"contactbg",rightclickonitandselectConverttoSmartObject.Applyanoisefilterusingthesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheInnerShadoweffectIusedthecolor#a9a396andfortheInnerGloweffectIusedthecolor

#f5f2e9.

Nowwewilldividethesignintotwoparts,oneforeachtextlayerwewilladdlater.SelecttheRectangleTool(U)andcreatearectanglewiththedimensions120pxby32pxandthecolor#eae5d9.Namethislayer"topbg",rightclickonitandselectConverttoSmartObject.Movethisrectangleatthetopofthesmallerroundedrectangle.ThenrightclickonthislayerandselectCreateClippingMask.

Addanoisefiltertothislayerusingthesettingsfromtheimagebelow.ThenaddaDropShadoweffectusingthecolor#c3beb1andthesettingsfromthefollowingimage.

Nowwewillcreatearoundedrectanglewithadashedstroke.SincePhotoshopdoesnotofferthefunctionalityforcreatingdashedlineyet,wearegoingtouseIllustrator.

OpenanewdocumentinIllustrator.SelecttheRoundedRectangleToolandclickonyourdocumenttobringuptheRoundedRectanglewindow.

Setthewidthto171px,theheightto71pxandtheRadiusto2px.Removethefillofthisshapeandadda1ptblackstroke.OpentheStrokepanel(Window>Stroke)andusethesettingsfromthefollowingimagetocreateadashedstroke.

Selecttheroundedrectangleandcopyit(Ctrl/Cmd+C).GobacktoyourPhotoshopdocumentandpasteitasasmartobject(Ctrl/Cmd+V).Namethislayer"dashedline"andmoveitinthemiddleofthe"contactbg"layer.AddaColorOverlayeffecttothe"dashedline"layerusingthecolor#958f82.

SelecttheTypeTool(T)andwritethewords"getafreequote"intheuppersectionofthesign.IusedthefontLeckerliOnewiththesize14pxandthecolor#948f84.IchosethisfontinsteadofDamion(whichweusedinthelogo)becauseitismorelegibleatthissize.

weusedinthelogo)becauseitismorelegibleatthissize.

UsetheTypeTool(T)toaddthewords"Contactus"inthelowerareaofthesign.IusedthefontOswaldwiththesize19pxandthecolor#948f84.

ApplyaDropShadoweffecttothesetwotextlayersusingthesettingsfromtheimagebelow.

CopyoneofthehandiconsfromtheretroiconssetyoudownloadedandpasteitinPhotoshopasasmartobject.Namethislayer"handicon"andmoveitinthemiddleofthetwosectionsofthesign.

DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheColorOverlayeffectIusedthecolor#969183.

Nowweneedtoaddaropetoholdthesign.Createanewgroup,nameit"rope"andmoveitatthebottomofthe"Contact"group.ThenusetheEllipseTool(U)tocreateanail.SelecttheLineTool(U),settheWeightto1pxandcreatetwoobliquelines,asyouseeintheimagebelow.Usethecolor#7f7866foralltheseshapes.

Step 8 - Creating the "Services" area

Forthe"Services"areawewillneedahexagonshapethatwewilluseasbackgroundforthethreecontentcolumns.WewillcreatethisshapeusingAdobeIllustrator.

OpenanewdocumentinIllustratorandselectthePolygonTool.ClickonyourimagetoopenthePolygonwindow,wherewecansetthecharacteristicsoftheshape.SettheRadiusto70pxandtheSidesto6.ClickOKtocreatetheshape.

SettheFillcolorofthepolygonto#8E8E8E.Thenadda20pxStrokeusingthesamecolor.OpentheStrokepanel(Window>Stroke)andsettheCornertoRoundJoin.Thenrightclickonthisshape,gotoTransform>Rotate,settheAngleto90degreesandclickOK.

Fromtheoptionbaraboveyourimagesetthewidthofthisshapeto140pxanditsheightto162px.

UsetheSelectionTool(V)toselectthehexagonshapeandcopyit(Ctrl/Cmd+C).GobacktoyourPhotoshopdocumentandpasteitasasmartobject(Ctrl/Cmd+V).GotoEdit>FreeTransform(Ctrl/Cmd+T),holddowntheShiftkeyandscalethislayerupuntilitswidthis300px,orfour960gridcolumns(youcanseethedimensionsoftheshapethatyouraretransformingintheInfopanel).

SettheFillofthislayerto0%.Thendoubleclickonitandapplythe"DotGrid2"patternfromtheTileablesShapesPack.Namethislayer"halftonepattern".Addthislayerinsideagroup(Ctrl/Cmd+G)andnameit"WebDesign".Thencreateanewparentgroupandnameit"Services".

Rightclickonthe"halftonepattern"layerandselectConverttoSmartObject.ThenapplyaColorOverlayeffecttothislayerusingthecolor#a7c5bd.

CopyagainthehexagonshapefromIllustratorandpasteitinyourPhotoshopdocumentasasmartobject.GotoEdit>FreeTransform(Ctrl/Cmd+T)andsetthehorizontalandverticalscaleto175%fromtheoptionbaraboveyourimage(1).

Namethislayer"border"andmoveittothecenterofthefirsthexagonshape.Inordertoalignthesetwolayersproperly,makesurethatyouhavetheSmartGuidesactivated(View>Show>SmartGuides).Movethislayeroverthefirsthexagonshapeandyouwillseesomepinklinesthatindicatehowthetwolayersarealigned.

AddaColorOverlayeffecttothe"border"layerusingthecolor#a7c5bd(2).

Weneedtoapplyanoisefiltertothislayer.However,theColorOverlayeffectwillgooverthenoisefilter.Tosolvethisissuewewillneedtoconvertthislayerintoasmartobject.Rightclickonthe"border"layerandselectConverttoSmartObject.ThengotoFilter>Noise>AddNoiseandusethesettingsfromtheimagebelow(3).

DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimageforOuterGlow.ThecolorthatIusedis#89b9ac(3).

CopythehexagonshapeonemoretimefromIllustratorandpasteitinPhotoshopasasmartobject.GotoEdit>FreeTransform(Ctrl/Cmd+T)andsetthehorizontalandverticalscaleto170%.Namethislayer"columnbg"andmoveittothecenteroftheothertwohexagonshapes.

AddaColorOverlayeffecttothislayerusingthecolor#f5f2ea.RightclickonitandselectConverttoSmartObject.Thenapplyanoisefilterusingthesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheStrokeeffectusethecolor#83a098.

Step 9 - Adding the "Services" areacontent

content

SelecttheTypeTool(T)andwritetheheadline"WebDesign"usingthefontMunciewiththesize48pxandthecolor#7b9d94.ThenaddawhiteDropShadoweffectusingthesettingsfromtheimagebelow.

UsetheTypeTool(T)tocreateatextbox230pxwide(youcanseethewidthofyourtextboxasyouarecreatingitintheInfopanel).AddaparagraphoftextinthisboxusingthefontOpenSansLightwiththecolor#5c574fandthesize15px.

Tomakethetextmorelegiblewewillsetthelineheightto1.6em.Ourfontsizeis15px.Ifwemultiply15by1.6weget24.Thatisthepixelvalueofthelineheight.GototheCharacterpanelandsettheleadingto24px.

Nowwewilladda"ViewPortfolio"buttonforthiscolumn.Lateronwewillcreatethe"portfolio"areaandwewanttheusertobeabletoselectoneoftheservicesofferedandgettheportfolioitemsforthatservicerightunderneaththisarea.

SelecttheRoundedRectangleTool(U)andcreatearoundedrectanglewiththedimensions120pxby30pxandthecolor#a7c5bd.Namethislayer"button",rightclickonitandselectConverttoSmartObject.

GotoFilter>Noise>AddNoiseandusethesettingsfromtheimagebelow(1).ThendoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage(1).

SelecttheTypeTool(T)andwritethewords"SeePortfolio"usingthefontOswaldwiththesize17pxandthecolor#f9f9f9.Putthistextlayerinthemiddleofyourbutton.ThenaddaDropShadoweffecttothislayerusingthesettingsfromtheimagebelow(2).ThecolorthatIusedis#83a098.

Addthesetwolayersinsideagroupandnameit"button".

Addthesetwolayersinsideagroupandnameit"button".

UsetheLineTool(U)withthecolor#cbc5b7tocreatetwohorizontallinesunderneaththeheadlineofthiscolumn.Thetoplineis200pxwide,thesecondoneis240pxwideandtheyhavea9pxgapbetweenthem.Nametheselayers"1pxline".

Duplicatethetwolinelayersandmovethenewones1pxdown.Changethecolorofthenewlinestowhiteandsettheiropacityto40%.

Groupalltheselinelayersandnamethegroup"lines".UsetheRectangularMarqueeTool(M)tocreateaselectionovertheareawherethelinesintersectwiththetext.Makesurethatthe"lines"groupisactiveandgotoLayer>LayerMask>HideSelection.

Createtwomorecolumnsforthe"Services"areajustlikeyoucreatedthe"WebDesign"column.Allthesettingsarethesame,exceptforthecolors,whichyoucangetfromthefollowingimage.

Wefinishedthe"Services"area.Hereweappliedtheproximityandrepetitiondesignprinciples.Werepeatedtheshapeofeachcolumnandthefontstoindicatethatthethreecolumnsarerelatedandhavesimilarfunctionalitiesandcontent.

Font choices

Sofarweusedfivefontsinthisdesign.Wecanexcludethescriptfonts,whichwereusedonlyoncefordifferentpurposesandtalkabouttheotherthree:Muncie,OswaldandOpenSans.

IchosethefontMunciebecauseitisabeautifullydesignedcondensedtypefacewhichmatchesthestyleIwantedtocreate.Weusedthisfontforthelogoandthe"Services"areaheadlines.Thisfontisnotlegibleenoughatsmallsizes(e.g.forthenavigationbar),soIaddedOswaldtothemix.Thesetwofontsgowelltogetherbecausetheyshareacharacteristic:theyarebothcondensedtypefaces.

FortheblocksoftextIchosetheOpenSansfontfamilybecauseitcomesin10differentstylestochosefrom.TheLightversionofthisfont,whichwewillusethemost,createsanicecontrastwiththeotherfontsused.

Step 10 - Creating the "Portfolio" area

The"Portfolio"areawillbelinkedtotheservicesarea.Sincewearecreatingaonepagewebsite,weneedthefunctionalityofselectingaportfoliocategoryandgetalistoftheportfolioitemsfromthatcategory.

Wearegoingtousethethreeservicesascategories.Inordertoindicatewhichcategoryisselected,wewillusethesamecolorschemethatweuseforthe"Services"area.

Whenauserclicksonsay,the"Branding"service,theportfoliosectionunderneathwillhavearedstroke,thehighlightcolorandheadlinecolorwillalsoberedandtherewillbearedbarconnectingthe"Branding"columnwiththeportfoliobox.Thesethreevisualindicatorswillbeenoughfortheusertoquicklyunderstandhowtheportfoliosectionworks.

Let'sstartdesigningthe"Portfolio"area.Createanewgroupandnameit"Portfolio".Createanothergroupinsidethisoneandnameit"portfoliobg".

SelecttheRectangleTool(U)andcreatearectanglewiththedimensions960pxby310pxandthecolor#89b9ac.Namethislayer"firstborder"andsetitsopacityto20%.ThenselecttheMoveTool(V)andmovethisrectangle60pxunderneaththe"Services"area.

Createanewrectanglewiththedimensions950pxby300pxandthe

Createanewrectanglewiththedimensions950pxby300pxandthecolor#a7c5bd.Namethislayer"secondborder"andmoveitinthemiddleofthefirstrectangle.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.ThecolorthatIusedfortheInnerShadowandStrokeeffectsis#83a098.

Createanewrectanglewiththedimensions940pxby290pxandthecolor#f5f2ea.Namethislayer"portfoliobg".DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.TheStrokecolorthatIusedis#f9f8f5.

image.TheStrokecolorthatIusedis#f9f8f5.

The"Portfolio"areawillbedivedintotwocolumns.Theleftonewilldisplayalistofthumbnails.Whenauserclicksonathumbnail,therightcolumnwilldisplaymoreinformationaboutthatportfolioitem.

Nowwewillcreatethebackgroundfortherightcolumn.SelecttheRectangleTool(U)andcreatearectanglewiththedimensions640pxby290pxandthecolor#ece8df.Namethislayer"activeitembg",rightclickonitandselectConverttoSmartObject.

Addanoisefilterusingthesettingsfromtheimagebelow.ThendoubleclickonthislayertoopentheLayerStylewindowandusethe

settingsfromthefollowingimage.TheInnerGlowcolorthatIusedis#9d9180.

Createtwoverticallineswiththeweight1pxovertheleftedgeofthe"activeportfoliobg"rectangle.Forthedarkoneusethecolor#c3b9abandforthelightoneusethecolor#f9f8f5.

ThenselecttheRectangleTool(U)andcreatearectanglewiththedimensions4pxby80pxthatconnectsthebottomofthe"WebDesign"columnwiththe"Portfolio"areaborder.Setthecolorofthislayerto#a7c5bdandnameit"connector".

Step 11 - Adding the portfolio items

Createanewgroupandnameit"portfolioitems".CopythehexagonshapefromIllustratorandpasteitinPhotoshopassmartobject.Wearerepeatingthehexagonshapetomaintainthesamevisualstylethroughouttheentiredesign.

GotoEdit>FreeTransform(Ctrl/Cmd+T)andsetthehorizontalandverticalscaleto50%.AddaColorOverlayeffecttothislayerusingthecolor#f4eee7anda1pxinsideStrokeeffectusingthecolor#c3b9ab.Namethislayer"border".

Duplicatethe"border"layer(Ctrl/Cmd+J),rightclickonitandselectClearLayerStyle.ThengotoEdit>FreeTransform(Ctrl/Cmd+T)andsetthehorizontalandverticalscaleto42%.Namethislayer"image_holder"andmakesureitisinthemiddleofthe"border"layer.

Openanimagethatyouwanttofeatureinthe"Portfolio"areaandmoveitoverthe"image_holder"layer.Namethislayer"image",rightclickonitandselectCreateClippingMask.Yourimageshouldnowbevisibleonlywithinthe"image_holder"hexagonshape.

Putallthethreelayerinsideagroupandnameit"item#1".

Duplicatethe"item#1"group7timesandarrangeyourportfolioitemsinacoroneneshape.

Thefourthportfolioitemhasadifferentbordercolortoindicatethatitisselected.SimplychangetheColorOverlayto#a7c5bdandtheStroke

colorto#83a098forthat"border"layer.

Nowwewilladdthecontentfortheactiveportfolioitem(theonewehighlightedearlier).Createanewgroupandnameit"activeitem".SelecttheRoundedRectangleTool(U),settheRadiusto4pxandcreatearoundedrectanglewiththedimensions220pxby250pxandthecolor#f5f2ea.Namethislayer"border"andadda1pxinsideStroketoitusingthecolor#c3b9ab.

SelecttheRectangleTool(U)andcreatearectanglewiththedimensions200pxby230pxinthemiddleoftheroundedrectangle.

Openanimagethatyouwanttofeatureinthisarea,moveitoverthe"image_holder"layer.Namethislayer"image",rightclickonitandselectCreateClippingMask.Nowyourimageisvisibleonlyinsidetherectangleyoucreated.

SelecttheTypeTool(T)andwritethenameforyourportfolioitemusingthefontOswaldwiththesize24pxandthecolor#7b9d94.Movethistextlayer20pxtotherightfromtheleftedgeoftheimage.AddaDropShadoweffecttothisheadlineusingthesettingsfromtheimagebelow.

UsetheLineTool(U)tocreateahorizontallinewiththedimensions370pxby1pxandthecolor#c3b9ab.Movethisline10pxbeneaththeheadline.Duplicatethislayer(Ctrl/Cmd+J),changethecolorofthenewlineto#faf9f8andmoveit1pxdown.

SelecttheTypeTool(T)andcreateatextboxwiththewidth370px.AddaparagraphoftextusingthefontOpenSansLightwiththesize15pxandthecolor#5c574f.Also,gototheCharacterpanelandset

theleadingto24px,likewedidforthe"Services"areaparagraphs.

Step 12 - Creating the "About" area

The"About"areawillcontaintwocolumnswiththephoto,nameanddescriptionoftwopersons.Wewillcontinueusingthehexagonshapeforthephotos,inordertokeepthewebdesignconsistent.

Createanewgroupandnameit"About".CopythehexagonshapefromIllustratorandpasteitinPhotoshopasasmartobject.GotoEdit>FreeTransform(Ctrl/Cmd+T)andscaledownthislayeruntilitisaswideastwogridcolumns.Namethislayer"border",doubleclickonittoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheColorOverlayeffectIusedthecolor#d0cbc0andfortheStrokeeffectIused#958f82.

Duplicatethe"border"layer(Ctrl/Cmd+J),rightclickonthenewoneandselectClearLayerStyle.ThenuseFreeTransform(Ctrl/Cmd+T)toscaledownthisshape.Namethislayer"image_holder".

OpeninPhotoshoptheimageyouwanttodisplayinthisareaandmoveitoverthe"image_holder"layer.RightclickonyourimagelayerandselectCreateClippingMask.

SelecttheTypeTool(T)andaddsomecontentnexttotheimage.FortheheadlineIusedthefontOswaldwiththesize24pxandthecolor#a39f94.FortheblockoftextIusedthefontOpenSansLightwiththesize15pxandthecolor#5c574f.Ialsosettheleadingto24px.

UsetheLineTool(U)tocreateahorizontalseparatorbetweentheheadlineandtheblockoftext.Forthefirstlineusethecolor#bebbb1andforthesecondoneuse#ffffff.

Repeatthissteptoaddthesecondcolumnforthe"About"area.

Step 13 - Creating the contact formbackground

The"Contact"areawillhavetwocolumns:oneforthecontactformandtheotheronefortheTwitterfeed.Wewillapplythecontrastdesignprincipletodifferentiatethetwocolumns.

ThecontactformwillbewiderthattheTwitterfeedcolumnbecauseitismoreimportantanditneedstoattractmoreattention.Toaccomplishthisgoal,wearealsogoingtocreateadifferentbackgroundtothecontactform.Let'sgettoworknow.

Createanewgroupandnameit"Contact".Createanothergroupinsidethisoneandnameit"contactbg".SelecttheRoundedRectangleTool(U)andcreatearoundedrectanglewiththedimensions620pxby360pxandthecolor#d0cbc1.Namethislayer"border",rightclickonitandselectConverttoSmartObject.

GotoFilter>Noise>AddNoiseandusethesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.TheStrokecolorthatIusedis#958f82.

SelecttheRoundedRectangleTool(U)andsettheRadiusto4px.

SelecttheRoundedRectangleTool(U)andsettheRadiusto4px.Thencreatearoundedrectanglewiththedimensions610pxby350pxandthecolor#f5f2ea.Movethislayerinthemiddleofthedarkroundedrectangle.

Namethislayer"contactbg",rightclickonitandselectConverttoSmartObject.Addanoisefilterusingthesettingsfromtheimagebelow.DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.ThecolorthatIusedfortheStrokeeffectis#f9f8f5.

Step 14 - Creating the contact form

UsetheRectangleTool(U)withthecolor#faf9f8tocreatethreeinputfieldsandonetextareaforthecontactform.Thewidthoftheserectanglesshouldbe350px.Weneedsomespaceintherightsideofthisareatoaddashortparagraphoftextandmorecontactdetails.

Foreachoftheserectanglesapplythefollowinglayerstyles.ThecolorthatIusedfortheStrokeeffectis#d1cec7.

Addsomeplaceholdertextinsideeachinputfield.IusedthefontOpenSansLightwiththesize13pxandthecolor#847f76.Thenadda"Send"buttonwiththecolor#aea89candtheborder#8a857a.Copytheothersettingsfromapreviousbuttonyoucreatedforthiswebdesign.

SelecttheTypeTool(T)andcreateatextboxnexttothecontactformwiththewidth190px.Thenaddashortblockoftextinsidethisbox.IusedthefontOpenSansLight,withthesize15px,thecolor#5c574fandsettheleadingto24px.

SelecttheLineTool(U)andcreateahorizontallinewiththedimensions190pxby1pxandthecolor#c8c4bb.Namethislayer"1pxline".

Duplicatethislayer(Ctrl/Cmd+J)andmovethenewline2pxdown.Thenduplicatebothoftheselinesandmovethetwonewlayers1pxdown.Changethecolorofthenewlinesto#fcfaf6.Groupalltheselayerstogetherandnamethegroup"lines".

CopythehandiconfromtheretroiconssetyoudownloadedandpasteitinPhotoshopasasmartobject.UseFreeTransform(Ctrl/Cmd+T)toscaleitdownandflipithorizontally,soitpointstothecontactform.Thiswaywewilldirecttheuser'seyestowardsthecontactform.

Movethehandiconinthemiddleofthelines.ThenusetheRectangularMarqueeTool(M)toselecttheareawherethelinesintersectwiththeicon.Makesurethatthe"lines"groupisactiveandgotoLayer>LayerMask>RevealAll.

DoubleclickonthislayertoopentheLayerStylewindowandusethesettingsfromthefollowingimage.FortheColorOverlayeffectIusedthecolor#837e70.

UsetheTypeTool(T)toaddanotherblockoftextbeneaththelineswithmorecontactinformation,suchasemail,phoneandSkypeusername.ForthisblockoftextIusedthefontsOswaldItalicandSemiboldItalicwiththesize14px,thecolor#5c574fandonelinebreakbetweeneachlineoftext.

Step 15 - Adding the Twitter feed

Createanewgroupandnameit"Twitter".ThenusetheTypeTool(T)toaddaheadlinewiththefontOswald,thesize24pxandthecolor#a39f94.

SelecttheLineTool(U)andaddtwohorizontallinesbeneaththeheadline.Forthefirstlineusethecolor#bebbb1andforthesecondoneuse#ffffff.

Thenaddacoupleoftextboxesthatrepresentthelatesttweets.Use

Thenaddacoupleoftextboxesthatrepresentthelatesttweets.UsethefontOswaldItalicwiththesize14pxandthecolor#5c574f.

Createa"Followus"buttonwiththefillcolor#a7c5bdandthebordercolor#83a098.Theothersettingsforthisbuttonarethesameonesyouappliedtothepreviousbuttons.

Advertisement

Step 16 - Adding headlines on the sideof the web design

Sincethisisaonepagewebsite,IthoughtIwouldaddaheadlinenexttoeachsectiontogiveusersafeedbackonwhichsectioniscurrentlyvisible,inadditiontothenavigationbarfeedback.

Createanewgroupandnameit"Headlines".ThenselecttheLineTool(U)andcreateaverticallinefromthetopofthe"Services"areatothebottomofthe"Contact"area.Movethisline20pxtotheleftfromtheleftedgeofthewebsite.Namethislayer"1pxline".

Duplicatethislayer(Ctrl/Cmd+J)andmovethenewline1pxtotheleft.Thensetitscolorto#fbfbfa.

SelecttheTypeTool(T)andwritethenameofeachsectionofthewebsitenexttoit.Takealookatthefollowingimageforreference.IusedthefontMunciewiththesize36pxandthecolor#b5b2ac.ApplyaDropShadoweffecttothetextlayersusingthesettingsfromtheimagebelow.

Createanewgroupandnameit"Copyright".ThenselecttheTypeTool(T)andaddacopyrightstatementatthebottomofthewebsite.IusedthefontOpenSansRegularwiththesize12pxandthecolor#837f79.

Conclusion

Inthistutorialweapliedthefourbasicdesignprinciples:contrast,repetition,alignmentandproximitytocreateacleanretrowebdesign.Ihopeyouenjoyedir.Clickonthefollowingimagetoseethefullsizeversionofthedesign.