Today we wll be mostly creating a fake software box within photoshop that could be used if you are selling software programs or web scripts from a site but dont have an actual physical box that you can photograph.

The finished box will look like this :

final1.jpg

Pretty snazzy, and can be customised to fit your product incorporating your corporate colors and logos etc. Ok, to start off draw out a rectangle box which will be the main side of the box, duplicate this layer and then chop a bit off which will be the side panel, like so :

15.jpg

Now, draw out a slim stripe across the whole box, using the rectangular marquee tool on a new layer and fill it with a dark grey - then highlight the bits wher it overlaps, again with the marquee tool and delete those so it looks like this :

23.jpg

Now draw another larger rectangle on a new layer, the same as before and fill it with a gradient of the color you’d like to use for the main area - for this tutorial we used a #1361B6 to #0886EA blue gradient :

34.jpg

Now create a new layer and draw an elipse like so :

43.jpg

Fill this shape with the same colored gradient you used for the first one but do it reversed (dark at the top, light at the bottom), now right click this layer in the layer window, select ‘blending options’ and change the blend mode to ‘hard light’ :

52.jpg

Next up, we need an image of a person - I chose to use a woman with a headset, there are loads available at istockphoto so grab something suitable from there. I cut the womans head out and resized her to a suitable size, this is how I positioned her :

64.jpg

Duplicate the layer with the person on and hide the original - go to filter > motion blur and use these settings :

75.jpg

Now right click this layer and change to ‘overlay’, shift this layer over to the right and you will have this :

85.jpg

Now un-hide the original photo layer :

94.jpg

Its starting to take shape now, just grab the eraser brush on a large setting (100 or so) and just delete some of the original photo layer to blend it in slightly with the blurred layer :

103.jpg

Now we add some text, add the software name and some smaller text at a small size - this is so small you can just use some lorem ipsum for the job as it is not readable anwyay :

113.jpg

Now we’re going to add a seal to it, select the custom shape tool and choose the flower shape :

seal.gif

Add this in and put some text over the top like so :

122.jpg

Now duplicate the blurred image of the woman layer, right click it in the layer window and change the blend mode to this setting :

131.jpg

Now, with the layer selected press the right arrow and move it over to the the side panel of the box and delete any bits the fall outside the panel to add a bit more random pattern to it:

141.jpg

Add some more small text to the side panel :

151.jpg

Now comes the part where we make the box take on a 3d appearance. Save your psd as something else now as it will preserve all your layers, now hide the background layer and choose from the menu layer > merge visible. Now use the marque tool to select around the side panel, press ctrl + c and then ctrl + v. This will put your two box panels on separate layers, now unhide the background layer. Select the main box panel and go to edit > transform > distort and grab the left sides of the panel and move them till the box panel looks at the right angle :

16.jpg

It should look like the above image, dont worry if you dont get it right the first time - have a play about and use edit > step backwards till you get it right. If you’re still struggling, use the image above in your psd, put it on a layer below yours and just get your layer to match up with it.

Next do the same with the side panel layer, till it looks right then nudge the two layers together like so :

17.jpg

Hide the background again and do layer > merge visible :

18.jpg

Now you have the box on one layer, you can change the background color and add dropshadows or outer-glow to it to make it look more realistic. The finished box :

final2.jpg

You can download the layered psd or the finished psd for this tutorial.

Related Link: Software Australia Buy software online in Australia

del.icio.us:Create a software box Photoshop Tutorial digg:Create a software box Photoshop Tutorial spurl:Create a software box Photoshop Tutorial wists:Create a software box Photoshop Tutorial simpy:Create a software box Photoshop Tutorial newsvine:Create a software box Photoshop Tutorial blinklist:Create a software box Photoshop Tutorial furl:Create a software box Photoshop Tutorial reddit:Create a software box Photoshop Tutorial fark:Create a software box Photoshop Tutorial blogmarks:Create a software box Photoshop Tutorial Y!:Create a software box Photoshop Tutorial smarking:Create a software box Photoshop Tutorial magnolia:Create a software box Photoshop Tutorial segnalo:Create a software box Photoshop Tutorial gifttagging:Create a software box Photoshop Tutorial

91 Responses »

  1. Piranha Daily News + Imaging Insider » Create a Software Box Using Photoshop on January 19th, 2007 at 5:07 am:

    [...] Read More… [...]

  2. Marquis on January 19th, 2007 at 6:05 am:

    I’m very much into graphic art, so articles like this are usually very pleasant and educational for me. This definitely gets my digg!

  3. Jackie R. on January 19th, 2007 at 6:07 am:

    Thanks, great tutorial! Clear and detailed.

  4. Create your own software box now | Daily Gadgets, Tech , News and information on January 19th, 2007 at 8:55 am:

    [...] here for full tutorial [ Stumble It! ] [ Del.icio.us! ] [ Digg! ] Related Articles: How to create DVD from Mpeg fileHDD ThermometerRunning any Linux inWindows without a CD-Rom (for free)Creating Rapidshare.com account from .de AccountMapopolis Navigator 2.33DOWNLOAD ARCHIVES OF MEGAUPLOADPicasa From GoogleUltra Small PC from LunitopSkype TV from NovacOpera browser compatible with windows mobile Daily Gadgets, Tech , News and information - © 2005-2007 Home | links-patners | Contact | Sitemap window.open(”http://www.stargrass.com/topsites/index.cgi?aaheroe2″,”hopsa”) [...]

  5. Fat Mobil Content » leech xmen Photoshop : Create a fake software box on January 19th, 2007 at 9:00 am:

    [...] leech xmen Create a fake software box with photoshop that could be used if you are selling software programs or web scripts from a site but dont have an actual physical box that you can photograph. kurt wagner xmen evolutionread more | digg story [...]

  6. GfxDizayn » Photoshop’da kutu yapımı on January 19th, 2007 at 10:04 am:

    [...] Photoshop da kutu yapımını gösteren faydalı bir makale. Benim işime çok yaradı… [...]

  7. John on January 19th, 2007 at 12:34 pm:

    Great… the illustration though simple helped me create a virtual software box without much effort. Thanks a lot!

  8. Photoshop : Create a fake software box, The Digg Effect on January 19th, 2007 at 1:48 pm:

    [...] Create a fake software box with photoshop that could be used if you are selling software programs or web scripts from a site but dont have an actual physical box that you can photograph.read more | digg story [...]

  9. Jezper on January 19th, 2007 at 2:45 pm:

    How is it that this has been digged? It’s like 101 photoshop work. Lame.

  10. Dizzledorf on January 19th, 2007 at 2:50 pm:

    Jezper, agreed.

    Not a bad tutorial for newbs, but how in the world does this get 1,000+ diggs? Gives you a good idea of who the new diggers are, and the decreasing value of digg. (IMO, YMMV)

  11. Prime News Blog » Blog Archive » xmen clip of iceman Photoshop : Create a fake software box on January 19th, 2007 at 2:59 pm:

    [...] xmen clip of iceman Create a fake software box with photoshop that could be used if you are selling software programs or web scripts from a site but dont have an actual physical box that you can photograph. xmen juggarnaught bitchread more | digg story [...]

  12. Sumit Dhar on January 19th, 2007 at 3:28 pm:

    Neato!

  13. Oli on January 19th, 2007 at 3:29 pm:

    Oh well, cant please everyone I suppose - glad some people appreciate it.

  14. Random Thoughts » Photoshop on January 19th, 2007 at 3:40 pm:

    [...] Create a software box December 13th 2006 Posted to Tutorials [...]

  15. Always Random. » Photoshop : Create a fake software box on January 19th, 2007 at 3:41 pm:

    [...] read more | digg story [...]

  16. sastgroup.com » Blog Archive » Come creare un software box on January 19th, 2007 at 9:02 pm:

    [...] Link: http://tutorialblog.org/create-a-software-box/ Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

  17. Keith on January 20th, 2007 at 12:06 am:

    That’s a nice tutorial. It is certainly useful for those creating a REAL product.

  18. Planeta Gentoo » links for 2007-01-20 on January 20th, 2007 at 2:19 am:

    [...] Create a software box (tags: Photoshop) [...]

  19. randomosity » links for 2007-01-20 on January 20th, 2007 at 4:20 am:

    [...] » Create a software box Photoshop Tutorial (tags: photoshop tutorial design Tutorials software computer) [...]

  20. Mattie’s Blog » Blog Archive » EventScripts Software “Box” on January 20th, 2007 at 4:23 am:

    [...] Over on digg recently I also saw a tutorial for creating a fake software box using Photoshop. I don’t use Photoshop, but I do use Paint.NET. So I decided to try the same thing using that tool, which is one of my favorite free tools. [...]

  21. It's all in the Wrist on January 20th, 2007 at 10:00 am:

    Add a reflection to it by making it all one flat layer, duplicate, rotate vertically, and set opacity on new layer to 25%.

  22. Natalie Downe » Blog Archive » links for 2007-01-20 on January 20th, 2007 at 7:14 pm:

    [...] Create a software box Photoshop Tutorial (tags: design graphics howto webdesign tutorial) [...]

  23. Crear una caja de software con Photoshop en Intenta on January 24th, 2007 at 3:59 pm:

    [...] Feed para los comentarios de esta entrada [...]

  24. Create a software box « My Blog on January 25th, 2007 at 8:07 pm:

    [...] Create a software box January 25, 2007 Filed under: Design — James @ 1:07 pm Create a software box   [...]

  25. Juxtaviews - » Weekly Roundup - 01/26/07 on January 26th, 2007 at 5:11 pm:

    [...] Photoshop Tutorial - Software Box - tutorial for creating a fake software box within photoshop that could be used if you are selling software programs or web scripts from a site but don’t have an actual physical box that you can photograph. [...]

  26. ReaLMusti Günlükleri » Blog Arşivi » Photoshop’ la Kutu Yapımı on January 27th, 2007 at 11:40 am:

    [...] Photoshop’ la Kutu Yapımı Photoshop Ocak 27th, 2007 Çok basit bir kaç adımla Photoshopla kutu yapmak istermisiniz.O zaman buradaki dökümanı bir inceleyin derim. Bu başlığı sık kullanılanlarına ekle: [...]

  27. gian on January 28th, 2007 at 5:21 pm:

    grazie
    thanks :-)

  28. xocea » Web Design News: January 2007 on February 7th, 2007 at 2:37 am:

    [...] Photoshop : Create a fake software box [...]

  29. Pat on February 9th, 2007 at 7:52 pm:

    This is a great turorial! And a great site! Thanks!

    Just ignore the moaners.

    Want to point out one little thing, though: your link to the Lorem Ipsum website is spelt incorrectly and goes to a search page.

  30. Life, it is a Travesty… » links for 2007-01-20 on February 14th, 2007 at 10:53 pm:

    [...] » Create a software box Photoshop Tutorial The Tutorial Blog Interesting tutorial on building a fake software box in Photoshop (tags: photoshop box software download) [...]

  31. Free Download Rx on February 17th, 2007 at 10:17 pm:

    Keep it up guys, these tips are great!

  32. SEOmaster on February 18th, 2007 at 3:34 pm:

    very good tutorial.. good for internet marketer who plan to create their own ebook cover.

  33. Michael M on February 18th, 2007 at 10:46 pm:

    You know? This tutorial does not work.

  34. Web 2.0 Webdesign-Tutorials | Dr. Web Weblog on February 19th, 2007 at 7:51 am:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  35. mhinze.com » Blog Archive » links for 2007-01-20 on February 19th, 2007 at 1:53 pm:

    [...] » Create a software box Photoshop Tutorial (tags: photoshop) [...]

  36. Whitesquid on February 19th, 2007 at 6:39 pm:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  37. PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials on February 20th, 2007 at 4:02 pm:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  38. Gumballers.co.uk » How to create a fake software box using Photoshop on February 21st, 2007 at 11:21 pm:

    [...] you ever had the absolute burning desire to create a fake software box?  If so this tutorial is for you. [...]

  39. Donna on February 22nd, 2007 at 5:47 am:

    Fantastic and simple -I’ll be using this. And the download was really helpful as a template.

  40. Clavedetom » Cómo crear una caja de Software on February 22nd, 2007 at 10:55 pm:

    [...] cajas de software es algo que simplemente no se te había ocurrido. En Intenta linkaron en su día un sencillo tutorial que explica claramente como [...]

  41. Web 2.0 Webdesign-Tutorials at comatags on February 24th, 2007 at 8:55 am:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  42. TP Hilfe Forum - Suche Tutorial on February 24th, 2007 at 1:50 pm:

    [...] bin neulich ber sowas gestolpert http://tutorialblog.org/create-a-software-box/ [...]

  43. claudio schwarz - purzlbaum » Neues WordPress Theme in Arbeit on February 26th, 2007 at 11:00 am:

    [...] etwas Web2.0-like aussieht. Wenn wir schon bei Tutorials sind. Ein cooles Tutorial findet man beim tutorialblog. Eine Software Box zu kreiieren find ich was tolles. Gefunden habe ich diesen Tipp (und es gibt [...]

  44. CHIKE on February 27th, 2007 at 8:50 am:

    nice tutorial

  45. Web 2.0 Tutorials Round-Up | Smashing Magazine on March 9th, 2007 at 4:38 pm:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  46. Tjerja on March 13th, 2007 at 7:28 pm:

    To get more realistic depth to it, try using the overlay/multiply effect on the small right part of the box with a black layer. Then it looks more shadowed instead of ‘flat-coloured’. This would give the box more depth. When you do treat the whole project as a ’smart object’ in photoshop, the transformation becomes ‘non-destructive’ too. That way you have 2 files, 1 original with the flat design, and another file that has the transformation (s) applied to it. Whenever you change your smart object file, the other is updated immediately too. Saves you a lot of time adjusting. ;-)Good luck all. Cheers, Tjerja.

  47. MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları on March 20th, 2007 at 7:52 pm:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  48. jaslan on March 22nd, 2007 at 7:52 am:

    thanks for ur service
    i easily did it.

  49. Marcko on April 3rd, 2007 at 6:18 am:

    Thank for your help¡ (gracias por tu ayuda)

  50. mohamed solimann on April 3rd, 2007 at 10:29 am:

    thank you very very mush

  51. lungi on April 5th, 2007 at 6:09 am:

    This is a great tutorial… Its simple but it packs a punch.

  52. david on April 5th, 2007 at 12:58 pm:

    Very interesting article click on this link good photo knowledge http://www.aaaphotoshop.com

  53. Create your own Software eCover - Tutorial | ePublishingDaily.com on April 18th, 2007 at 5:15 pm:

    [...] Creating a Software Box with Photoshop is an easy tutorial coming from (wait for it …) TutorialBlog. :-) [...]

  54. 68 Web 2.0 design tutorials » A blog you can use! on April 21st, 2007 at 10:34 pm:

    [...] google_ad_client = “pub-6873539402914827″; google_ad_width = 336; google_ad_height = 280; google_ad_format = “336×280_as”; google_ad_type = “text_image” google_ad_channel = “”; google_color_border = “ffffff”; google_color_bg = “ffffff”; google_color_link = “01284C”; google_color_text = “000000″; google_color_url = “CCCCCC”; 4. Create a software box - Photoshop Tutorial [...]

  55. ganmao on April 22nd, 2007 at 2:30 pm:

    i like it,thank you!

  56. shashank on April 22nd, 2007 at 6:19 pm:

    it was awesome ..thanx for the great tutorial..

  57. Free Web 2.0 Photoshop Styles at Mac Creative on April 25th, 2007 at 6:53 am:

    [...] How to create a Software Box [...]

  58. kumaresh on April 25th, 2007 at 11:35 pm:

    Nice work…!

  59. Lawrence Standifer Stevens on April 29th, 2007 at 6:16 am:

    The person complaining that this tutorial was “lame” because it’s “Photoshop 101″ was only half right. It IS Photoshop 101. But I don’t recall seeing a big bold banner saying it was a post-doctoral Photoshop class.

    Hardly lame at all, it’s an excellent tuturial for beginners on how to produce a 3D software package. Good job!

    Now, how about doing another tutorial? This time, show the process of creating a diestrike for use when a flat, rectangular press sheet is printed, scored and cut so that, when folded, it actually produces a REAL box. Years ago, when I did my first diestrike, it took me hours to figure it out. A good tutorial that shows the process (AND the reasons behind some of the techniques) would be a good step up for those who are beyond PS 101.

    Again, great tutorial.

  60. Die wichtigsten Tipps und besten Seiten für einen web2.0 Blog « Brandkraft Online-Marketing, Norman Nielsen on May 17th, 2007 at 12:55 pm:

    [...] http://tutorialblog.org/create-a-software-box/ [...]

  61. Web 2.0 Tutorials | Tekjuice.com on May 30th, 2007 at 3:03 am:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  62. How To Create Professional Ebook Cover | Netpreneurs Meeting Place on June 2nd, 2007 at 6:43 am:

    [...] If you already have Adobe Photoshop installed, here’s a good Free tutorial on creating virtual covers: ==> http://tutorialblog.org/create-a-software-box/ [...]

  63. # TheRowlz @ Cyber-Warrior TIM » Blog Archive » PhotoShop’da kutu yapımı. on June 2nd, 2007 at 11:26 am:

    [...] PhotoShop’da kutu yapımını gösteren faydalı bir makale. [...]

  64. Die wichtigsten Tipps und besten Seiten für einen web2.0 Blog : Brandkraft Online-Marketing on June 2nd, 2007 at 11:31 am:

    [...] http://tutorialblog.org/create-a-software-box/ [...]

  65. Conception Web » Blog Archive » Web 2.0. Design on June 3rd, 2007 at 11:26 am:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  66. ejat on June 5th, 2007 at 5:27 pm:

    great tutorial..
    thanx..

  67. ti on June 14th, 2007 at 9:12 am:

    ti

    shit-happens 1862471 Info about ti.

  68. Harry Hayer on July 1st, 2007 at 12:34 am:

    Thanx Man i dii it

  69. samet on July 24th, 2007 at 5:39 am:

    Perfect beatıful

  70. samet on July 24th, 2007 at 5:41 am:

    beatıful work congralition

  71. Jeff Adams on August 6th, 2007 at 7:58 pm:

    awesome, one of the best and well written tutorials ive read so far!

  72. Peter Schmit on September 2nd, 2007 at 9:59 am:

    My balls hurt

  73. Andly on September 3rd, 2007 at 11:48 am:

    simpy…awesome!!

  74. misa on September 5th, 2007 at 11:11 pm:

    Very good tutorial, thank you very much

  75. shaz on September 9th, 2007 at 12:44 am:

    Great tutorial. Im sure will benifit to every one wanting to create any kind of product attraction via the internet. well presented packaging is always key to making a good impression

  76. Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri on September 28th, 2007 at 1:59 pm:

    [...] yazılım kutusu yapma  [...]

  77. Süper Paylaşım » Adobe photoshop uygulamaları on September 28th, 2007 at 2:15 pm:

    [...] yazılım kutusu yapma [...]

  78. Jay on October 5th, 2007 at 4:34 pm:

    Great - thank you! Used it to design a box for the CMS services website, http://www.evucan.com

  79. Photoshop : Create a fake software box « Design News on October 6th, 2007 at 8:49 am:

    [...] read more | digg story [...]

  80. Web 2.0 Tutorials Round-Up | Ayiva on October 19th, 2007 at 7:05 am:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  81. Carl on October 22nd, 2007 at 8:07 am:

    Created a nice box from this, thanks a lot ! very easy to follow !

  82. World Design O! » Blog Archive » Photoshop : Create a fake software box on October 25th, 2007 at 4:22 pm:

    [...] read more | digg story [...]

  83. Design Juice » Photoshop tricks on October 27th, 2007 at 2:59 pm:

    [...] Shortcuts PhotoShop - Smoke Effect Vanishing point Web 2.0 style buttons Special Effect tutorials Create a software box Photoshop Tutorial 10 CSS Tips from a Professional CSS Front-End [...]

  84. jpcook on November 12th, 2007 at 6:22 am:

    Thanks for the great tutorial.
    Funny to see clowns trying to make a buck selling stuff that pales in comparison to what you gave.

    Thank you.

  85. Antonio Ferraioli on November 12th, 2007 at 1:38 pm:

    Very great tutorial!
    thanks

  86. Web 2.0 Tutorials Round-Up - Article Save on November 12th, 2007 at 8:46 pm:

    [...] 4. Create a software box - Photoshop Tutorial [...]

  87. List Of Useful Internet Marketing Tutorials on November 19th, 2007 at 11:47 am:

    [...] eCover Photoshop Tutorial [...]

  88. Max on November 29th, 2007 at 8:38 pm:

    Thank you very much / Большое спасибо!

  89. Tom on December 1st, 2007 at 11:08 am:

    Great tutorial! Thanks for sharing your knowledge.

  90. Ovi Dogar on December 12th, 2007 at 7:41 am:

    Nice tutorial!

    Keep up the great work!

    Ovi Dogar
    AbsoluteCovers.com

  91. Gazetepost » adobe photoshop uygulamaları on April 10th, 2008 at 5:38 am:

    [...] nesneleri karartma gölgelendirme efekti damla efekti yazılım kutusu yapma [...]

Ad-Links

Translate