How to Design A Big Good-Looking Button in Photoshop
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
In this tutorial I`m going to show you how to design a big good-looking button in Photoshop ready to link to the PSD file of this tutorial. Along the way, we`ll be using different Photoshop tools to create shapes and text and will beautify them by applying some blending options carefully chosen. Let`s begin!
What we`ll be doing today:
Materials Needed:
Step 1: Open the Wood Texture with Photoshop
The first step is to download the wood texture and to open it with Photoshop. The image is 1024×768px and will be the background of our project.
Step 2: Building the Button Background
The button I have in mind is composed of 2 parts: the background of the button which will be like a transparent surface and the main button. For the main button, we`ll use a very nice green gradient which perfectly connects with the wood texture.
Select the Rounded Rectangle Tool(U) and with a radius of 40px draw a white shape of 360×80px. This will be an awesome big button!
We`re going to stylize the shape by adding an inner-shadow, a stroke and reducing the opacity of the shape to 25%. So, double click the shape`s layer and add the next blending options:
The first half of the button looks like this:
Step 2: Building the Main Button
This step is all about the second half of the button. Select again the Rounded Rectangle Tool(U) and with a radius of 30px draw a shape of 340×60px and place it in the center of the first shape so that between the middle shape and button`s background to be a margin of 10px. The effect created will be great.
Beautify the layer by adding the next blending options:
Applying the blending options above, you should obtain the second half of the button:
Final Touches
This is the last step. We`re gonna add some final touches. We`ll begin with the download icon, so download the icon from the “Materials Needed” from the beginning of the tutorial. Add it to the project but resize it from 36×36px to 24×24px to integrate well with the button. To resize an element in Photoshop, press Ctrl+T or just go to Edit->Transform->Scale.
The button needs some text and I think that a sentence like “Download this tutorial” fits very well. For your information, the font I used is the free Museo 500, an elegant and very popular font.
The result:
With these final touches, our button is done.
If you have any questions or just want to share with us your button, don`t hesitate to leave us a comment in the comments section. Till then, take a look at what we`ve done today!
Related posts:
- How to do a glossy and animated jQuery button 1/2 Photoshop part
- How to Design a Sleek Progress Bar in Photoshop
- How to create a clean and design portfolio layout using Photoshop
Tue, 14 Jun 2011 14:49:48 GMT
Tags: Freebies, photoshop, Tutorials,
Pleasant Prairie E-Commerce | Aliso Viejo E-Commerce | Chicago E-Commerce | Provo-Orem E-Commerce | Ahmadabad E-Commerce | Imperial E-Commerce | Oklahoma City E-Commerce | Lake Worth E-Commerce | Hinesburg E-Commerce | Nugegoda E-Commerce |
Freebies
10 Free MP3 Albums To Download [Sound Sunday]
It’s a Sound Sunday! Many of this week’s albums did not provide a widget I could embed. However, almost all of the music can be previewed at the respective download page, please click through. The upside is that few of them require an eMail in
mytemplatez – Hub of Awesome Free Website Templates
Success of any website or blog depends on the design, development and quality content of the blog. Especially design of the blog or website is very important for customer attraction. There are many quality websites providing templates for your website
70 Useful and Free Social Media Icon Sets For Designers
Social media networking sites are the most powerful and effective way to market your goods and services. Using social media for marketing your products and services not only is easier than the traditional methods of marketing but gives results in a shorte
photoshop
50 Free Photoshop Brush Sets Everyone Should Have
A good and diversified Photoshop brush collection is essential for any designer who respects itself. For this reason, I want to share with you 50 free and high-resolution Photoshop brush sets which will help you in your future projects. Paint Lines Brush
45 Beautiful Photoshop Brush Packs for Light Effects
Photoshop an inevitable tool for the designers and artists and finding out the desired brush pack of Photoshop is like the icing on the cake! Graphic designers make use of effective and high quality light effects in order to give their designs a little bi
A Round-Up of 50 Amazing and Fresh Photoshop Tutorials
Here we come with another designer’s treat – yes, you get me right with another exciting and awe-inspiring collection of Photoshop tutorials. Everyone who belongs to designing arena knows very well that Adobe Photoshop is an indispensable tool of designin
Tutorials
Embed Custom Fonts with Cufón Font Replacement and Google Fonts
Embedding custom fonts on a website has always been a problem, but thanks to Javascript and especially jQuery, things are getting solved one at a time. Cufón Font Replacement is now the most popular way to use custom fonts and appeared as a very efficient
A Set of 10 best Photoshop tutorials for Rock & Stone effects !
I go ahead again with the selection of some of the best tutorials. The three last recent articles published on 2experts, about fire, water and nature got a really good success and it gives me the motivation to continue in this way! Today, you can find a s
5 Things To Consider When You Install a SATA Hard Drive
Hard drives with a Serial ATA (SATA) connector were introduced to replace IDE and Enhanced IDE (Parallel ATA) drives. SATA removes the master-slave relationship between hard drives (parallel), as each drive connects directly to a SATA host adapter or port
Need E-commerce Design? Check out our member profiles:
Have a tight deadline? We're is built for speed. We specialize in assisting programming firms, marketing firms, mass media, catalog printers, and print shops. Deadlines are closing, contact us today!
Williamsburg, Virginia US
Twin T Design® use the latest technology to design useful and engaging web sites. We specialize in web design, flash, print design, photography, search engine optimization, and brand identity.
Springville-Mapleton, Utah US
ADrenaLize Graphics can develop your concepts into reality. With our knowledge of design, creativity, and experience - we can deliver thrilling designs to jump start your business!
Grand Forks, North Dakota US
Providing Website Design, Ecommerce Website Design (Online Stores), Graphic Design, Web Hosting, SEO (Search Engine Optimization), Web Development / Programming, in Hampton, GA and everywhere else.
Hampton, Georgia US
14 East offers a wide range of Internet solutions including advanced web design & development, E-commerce, database programming, search engine optimization and credit card processing.
Fort Lauderdale, Florida US
ImageProz.com offers ecommerce solutions and website designs for any size company. We also offers SEO servcices.
Oviedo, Florida US
A solution for event promotion, grand opening pages for retailers, eBay listings. We promote your business via the web!
New York, New York US
DOWNLOAD Technophilia Episode 9: “Dave Is Watching You”
Do you want this man watching what you do in your home or office No You should turn off your Trend
Why You Should Test PPC Landing Pages First
Are you testing PPC landing pages With all the hype of testing your website we sometimes forget ab
How To Export Your Outlook Tasks To Excel With VBA
Whether or not you are a fan of Microsoft one good thing that can be said about MS Office products
Amazon Launches New iPhone App Geared Towards Students [iOS News]
Amazon has always been quick to use mobile devices as a way to increase sales Now they have launche
Amazon Kindle Cloud Reader Now Available In Mozilla Firefox [News]
Recently Amazon launched their Kindle Cloud Reader which allows Kindle users to read their books i
5 Reasons Why Your Ecommerce Site Matters More Than Ever
Every ecommerce manager already knows that having a poor website is a major pr
Latest Hilarious Picks [MakeUseOf Geeky Fun]
Check out the top picks from MakeUseOf Geeky Fun during the last couple of days Song For All Digita
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Cool Software Apps (76)
Opinion & Polls (76)
Browser Tips & Tricks (66)
Social Media (66)
iOS (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
troubleshoot (53)
Google (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
