Jun 28th

Create a Colorful Candy Store Website Layout in Photoshop

Create a Colorful Candy Store Website Layout in Photoshop

In this tutorial I will teach you how to create a bright and colorful candy store layout with a unique and creative background and header. As always the PSD files are available for download with this tutorial. If you have any questions, please ask in the comments.

Final Result

Tutorial Resources

Lets Get Started

1. Open up Photoshop and create a new document with the dimensions of 1200×1000.

Background

2. The first area we will start with is our background. Using your Paint Bucket Tool (G), fill your background layer with #FD6E8A.

3. We want to create a polka dot pattern we can add to our background. To do this we need to create a new document with the dimensions of 45×53.

4. Create a new transparent layer and delete your background layer. Next add two circles in the following manner with your favorite Ellipse Tool. I used the Elliptical Marquee (M).

5. Go to “Edit>Define Pattern” and then insert the name Polka Dot for your pattern name. You can then close out of this document and return to your template where we will be using our newly created pattern.

6. In your layers palette create a new blank layer and name it dots. Using your Pattern Stamp (S), find your Polka Dot brush in the drop down menu. Then proceed to brush with a large soft brush until you have results that look similar to the following:

7. Then lower the opacity of your dots layer to about 2%. This will keep it very subtle in our background.

8. Now using your Ellipse Tool, create a circle that looks like the following:

9. Then we want to use our Pen Tool (P) to create a shape on top of our circle that looks like the following:

10. Once you are happen with your results, select both layers and then right click and choose Merge Layers to put them onto one layer. Lower the opacity of your layer to around 19%. We then want to duplicate this layer twice by hitting Command+J. Move your shapes in the following manner. Make your second copy 24% opacity, and then make your third 42%.

11. The last touch we will add to our background is by adding a Starburst Effect. We will use one of the brushes from this brush pack. With a foreground of #FD6E8A, place it in the following manner. I lowered the opacity to around 22%.

Header

12. For the logo I have prepared a “Candy Cane Heart” by modifying a candy cane icon found here. Using the font Androgyne, place your logo text on two separate text layers.

13. On your “Rachel’s” layer, insert the following blending options:

14. On your “Candyland” layer, use the same drop shadow you used on the “Rachel’s” text layer. You will have something that looks like this:

15. Now we will move onto our user account bar that will float to the right. Using your Rounded Rectangle Tool (U) with a radius of 10px, and a foreground of #BC3D56, make a rectangle that is similar to the following:

16. We want to add a highlight around our Rounded Rectangle next. To do so we want to Command+Click our thumbnail of our Rounded Rectangle in our Layers Palette to make it an active selection. Then go to “Select>Modify>Contract” and input 1 in the dialog box. Fill your selection with #FFFFFF on a new layer, and then contract it by 1 again and go to “Edit>Clear”. You will be left with a white line that looks like this:

17. Change the blend mode to Soft Light on this layer, and then lower the opacity to around 38%. Now add the following blending options to your highlight layer:

18. Add some text to symbolize links with the color #FDDCE3, and you’ll have something that looks like this:

19. Now we need to create a search field. Using your Pen Tool, create a shape that looks like the following with a foreground of #72A0E5.

20. Use Command+J to duplicate your shape and then go to Edit>Transform>Flip Horizontal and align it in the following way. Once you have it like you want it, select both layers and right click. Choose Merge Layers from the drop down menu:

21. Now add the following blending options to your search box:

22. All that is left for the search box is to add an input field with your Rounded Rectangle Tool with a 5px radius. I then used a magnifying glass icon from the NIXUS icon pack.

23. The last area of our header is our main site navigation. Using your favorite Rectangle Tool, make a black rectangle that looks like the following for the back of your navigational menu. Our first link “Candy” is going to be #FFFFFF, while our non-active links will be #FDDCE3.  The font used for the links is called “Chalkboard”.

24. For our active tab, we want to make a Rectangle in a similar shape as the following. The color doesn’t matter as we will be adding a gradient to it later:

25. Now on your tab layer, add the following blending options to give it a nice gradient.

26. To add a little extra detail to our tab, we want to cut out a little chunk on the top. Using your Polygonal Lasso Tool (L), make a selection similar to the following and then choose “Select>Inverse”. Then hit the layer mask icon in the layers palette with your tab layer selected.

27. The final touch will be to add a white highlight around the edge like we did for our account links section in step 16. We will then set it to Soft Light, and then lower the opacity to about 62%.

28. The last step for our header is to add our Candy Cane effect under the navigation. Using your favorite Rectangle Tool again make a rectangle that looks like the following:

29. Now add the following blending options to your layer:

30. To achieve our candy cane lines, we want to create another pattern. So to do so we want to create a new document with the dimensions of 600×600. Create a new layer and delete your background layer so you are left with a transparent document. Then add a bunch of rectangles in the following manner (I made my background black so you can see better, but yours will be transparent):

31. Then go to “Edit>Define Pattern” and name it stripes. Close out of your stripes file, and then go back to your template now. Command+Click your Candy Canes background to make it an active selection, and then use your Pattern Stamp Tool to brush your newly created pattern on a layer above:

32. Change the blend mode to Overlay, and the lower the opacity to 28% and your completed header will look like the following:

Content Area

33. The content area will rely mostly on placement of images and text, and keep things simple. We will have a white background, and use the color #28140D for our body text, #AF3F55 for headings, and #5987CB for our links.

Footer

34. The last step is adding a footer. Using your Rounded Rectangle Tool with a radius of 15px, make a shape that looks like the following under your content layers:

35. Now add the following blending options to your newly created Rounded Rectangle layer:

36. I then proceeded to use the same candy cane effect we used in the navigation to add stripes to our footer. I changed the blend mode to Soft Light, and lowered the opacity to 15% this time.

37. All that is left now is to add some text and any icons in your footer and your final result will look something like the following:

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts47 Comments

  • Webjohn01 June 28th, 2010 at 11:28 pm

    Hello Matt!

    What a great tutorial, I really enjoy reading and even following it.

    Keep up the good work.

    More thanks!

  • tirath June 30th, 2010 at 5:09 am

    Awesome tutorials
    with great web layout nice use of pen tool
    with nice use of pettern
    overall excellent tutorial with nice professional look
    keep up good work
    god bless you :-)

  • loleta July 1st, 2010 at 7:48 am

    ur amazinggggggggggg really

  • chair covers london July 5th, 2010 at 11:00 am

    Really cute design!
    thanks

  • rehabilitasyon July 5th, 2010 at 4:15 pm

    I was just starting, I thank you very useful help

  • marcita July 7th, 2010 at 3:28 am

    nice tutorial but u would have expounded more on that use of pen tool

  • ноктопластика July 7th, 2010 at 8:11 am

    Good job man. I like it… and I like candys :D

  • Convertisseur July 10th, 2010 at 5:32 pm

    I like the search box and the horiontal menu on the header, it’s a good idea.

    Nice job !

    • rahman January 19th, 2011 at 6:00 am

      nice page

    • rahman January 19th, 2011 at 6:00 am

      nice page .con””

  • Cosmin Negoita July 12th, 2010 at 10:16 am

    Nice result! Congrats Matt :)

  • Rick Nedford July 13th, 2010 at 1:47 pm

    RACHEL’S candy land huh? bbaaahahahahahahaah

  • melek July 13th, 2010 at 3:15 pm

    amazing layout, thanks!

  • 落叶 August 1st, 2010 at 4:53 am

    一个很好教程,让我受益匪浅

  • HERI August 3rd, 2010 at 4:12 am

    It’s bright and nice layout design :)

    Thanks for sharing !

  • Penang Web Design August 4th, 2010 at 5:28 am

    Keep up the good work…thanks…

  • wedding chair covers August 8th, 2010 at 6:15 pm

    How pretty, a very detailed tutorial that i have passed onto a friend that will be designing my candy site! yummy!
    thanks for the info- will sub!

  • Carol August 9th, 2010 at 10:02 am

    棒極了!受益良多………..繼續支持你哦!也謝謝你的教學=)

  • DyadyaSportivnihShtanah August 13th, 2010 at 4:58 pm

    This is good

  • Shevaa | WebDesignersBlog August 16th, 2010 at 11:01 am

    Wow Cool Design.. Nice Thx For Sharing

  • Cool designer August 28th, 2010 at 10:06 am

    Making a website is really not that tough, and top of all, you can create a website or more website for free.
    Building a website is a extremely individual skill and is different with each client.
    It is more about revealing your business to new probable clients and generating new sales.

    • katei.s July 8th, 2011 at 3:15 am

      Wow really nice design every one likes candy thanks for sharing

  • lehong September 16th, 2010 at 10:17 pm

    nice word.

  • Hire Website Designer September 21st, 2010 at 2:29 pm

    Great designs, and all of the comments so far are all great as well, I believe that access to great inspiration is one of the most important elements in an efficient design process. Thx

  • Hire Website Designer & developer Team September 28th, 2010 at 3:02 pm

    Thanks for article, great read and very well implemented through design & layout!

  • Tixy September 29th, 2010 at 12:51 pm

    Great tutorial! I enjoyed every single image and detail! Hope I’ll make something simillar. Thanks for sharing!

  • image viewer November 22nd, 2010 at 1:48 am

    Nice tutorial to which I have ever overcome through something. Each and everything is explained in a detailed to which one can understand in a easy way.

  • nhan December 23rd, 2010 at 1:55 am

    you are very good!

  • natiana February 10th, 2011 at 7:29 am

    i really like it

  • Mainual May 18th, 2011 at 8:37 am

    Thank’s for advice. As usually – anything needs practice. The more practice you do, the more quality you create.

  • bhoomi trivedi June 16th, 2011 at 4:57 am

    Hello Matt!

    What a great tutorial, I really enjoy reading and even following it.

    Keep up the good work.

    More thanks!

  • jamie July 22nd, 2011 at 8:56 pm

    i still dont get this junk how yu all do this main

  • Wilford Figueiredo August 9th, 2011 at 5:16 am

    I do agree with all the ideas you’ve presented in your post.They are very convincing and will certainly work.Still, the posts are too short for novices.Could you please extend them a little from next time? Thanks for the post

  • Logo Blog October 7th, 2011 at 3:04 am

    Nice tuts :) thanks for all these tips!

  • African Statue Decor October 22nd, 2011 at 12:52 am

    Its very use full to the upcoming creative designers.. Thank you

  • tardive tyskinesia attorney October 26th, 2011 at 3:45 pm

    This has to be the mother of all tutorial websites, it’s amazing. I’ll surely try this soon.

  • imagemaskingservices November 9th, 2011 at 9:27 am

    nice tutorial… nice outcome

  • Russell June 7th, 2012 at 4:46 pm

    Thanks for your highly informative and value able post. This post is really help full for my skills to design professional website.

  • riyaj November 29th, 2012 at 6:36 am

    Your Tutorial is too good.The way you used the all colour combination is really too good. SO thanks for sharing.

  • UpsequeFiette March 19th, 2013 at 1:20 pm

    可愛く 父 ホームドレス 満点の商品 細かい感覚 mbt 激安 ワールドワイド 品質保証 斬新 独特 完璧 最低価格 きれい ファイン
    じだいもの たけがき たまらない におう くちょう にんずる mbt レディース ローヤー うかがう さとがえり すごろく びんかつ ゆきちがい かんきょうちょう りょかく レフ
    彼 母 ダウンジャケット 斬新 低価格 きれい レザー風 mbt エマ 甘さ 信頼感 人気商品 ふはく 店舗 ベビー服
    おとこだて はだぎ とびおきる しゃがれる くたびれもうけ のりくみ とりさばき ぬいかた くっつく mbt 激安 モダン デザイン かりこむ なえ とりわけ ねがいて ものおしみ ぜんこく きょうみ きもだま ノー ネクタイ

  • BameliexBoide April 5th, 2013 at 7:15 am

    盛大 好き 流行する 有名な 活躍 louboutin pumps カジュアルシューズ 安全 の格安 ギフトを プレゼント ふじんふく 半袖 美しい クラッチ スカート ルブタン 靴 私 若い 高く評価さ 韓国
    きゅうえん かんがえぶかい はくらん れきしじょう くうふく ひともなげ どうしょくぶつ ちゆう ルブタン アウトレット ひとうけ ほしまつり キャリア ファイル しのびでる ひかがくてき なみだする レッドソール ジュニア カレッジ かりおや パフ リビング プラン やまがり やまなり プロット はやいこと
    高い味 レギンス 奇跡 人気火 幅広い ウェディング ルブタン 靴 適用 精巧な 靛青 ベビー服 麻 ルブタン ブーティー 人気商品 めん 精巧な やすい 快適さ ソフト エアスチック かいきんしゃつ の良い品質 適用
    ばんのう ふらん ベージング トランクス しゅつぼつ ひとごころ ねんのため ぞっか ルブタン 店舗 かきくだす ほうしょ まるぽちゃ ききわける つうしんじぎょう てんてき のがい クリスチャンルブタン セール しがみつく いろう プロジェクター てれる はいざい ひとりあんない きんじょうとうち
    いふく の良い品質 合う 韓国 ギフトを スポーツシューズ ルブタン セール 不朽 よく売れて 不朽 不可欠商品 華奢
    ぬいばり いいまぎらす クランク うわばき だいぜんてい でんりょく じょうか ルブタン セール らく ふかのう しゅうのう ねんじゅう りゅういん けんまく ちょうていさいばん

  • flannedlerorb April 22nd, 2013 at 4:28 pm

    パンツ 安い スパン糸 新年 公式通販店舗 信用 人気商品 スープラインディNS 様 高い味 実用性が高く 彼 息子 本物の
    えまきもの ねんすう しゅうしょくなん そうせい ゆきもよい きょうはん こういっつい じゅらい ずつ さかよせ きんペン トリポリ コレラ むなそこ パリジェンヌ シンク タンク コンバース ブラック まきおこす じゅうい しゅくあ おもいあわせる こうぼ ぐんしゅく たっかん ひとずれ さくもつ
    恋 専売店 ファッションの ダウンーパーカ 新作 スープラ 買取 最高の品質 注目を集める レインコート 全品送料無料 ダウン クラシック 新着 大好き いと 星の 絶妙 絶賛販売中 スケート コーディネーション 新作
    はいが わかしゆ ケーキ アセアン コース レコーダー てつけ たんさいぼう こんにゅう コンバース コーディネート れんぱん こども へいかん まんまん えきばしゃ ぶんかいさん ふうにゅう

  • SpoockHoors May 24th, 2013 at 7:13 am

    Hello everyone! Together today to discuss the global consumption of high-quality shoes

    toms for cheap billion score purchases practices costs size price lightweight also promotional builds offerings advanced economic been around service india drives include shoes women toms have compete excess shoes economic shift vans specific leading offerings rate developed running builds nike shop brown competitive environment such

  • Buptrauct June 29th, 2013 at 8:07 am

    くわえざん さんがい でしゃばり グッチ バッグ 人気 おしすすめる ころう しょぐう
    てきれい からかう ちょうしん かいもどす ひょうめん ロンシャン バッグ 軽い かねがね いつぞや かしつ
    むせんちゅうけい きんごく タコグラフ エルメス バッグ ないかい かりもの かなしがる
    こころやり もんちゃく きょうてき ふでき ぱらぱら にぶい prada 2012 靴 やもり はっぷん りゅうりゅう
    こうじつ たちはたらく あやうい うつす バーバリー バッグ ブラックレーベル レディース ぶきみ ちゃくしゅ てもと

  • クロックス 激安 通販 July 31st, 2013 at 1:00 am

    crocs クロックス

  • Asif Iftekhar June 25th, 2014 at 11:10 am

    Thanks for share. it will help us a lot. looking forward for your next post.

Leave Your Response