Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 29 2014

14:00

How to Use UI Kits – Plus Free UI Kits to Choose From!

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

OK, enough for introduction. I know you’re all fired up and want to know how to use UI kits. So let’s rock!

Choosing a UI Kit to Use

There are a lot of UI kit resources on the Web that you can use, depending on what you need. But for this tutorial, we will be using Flat UI PSD format by Designmodo.com since it has a lot of user interface elements that we can choose from.

Feel free to check these out too!

Flat UI Pro, a professional design framework

1.  Flat AP UI Kit

From: Andrew Preble
free-flat-UI-kit-1

2. Featherweight UI – A free, vector based and retina ready UI kit

From: Sara Hunt
free-flat-UI-kit-2

3. Flat Design UI Kit Vol. 1

From: Bloom Web Design
free-flat-UI-kit-15

4. FREE flat UI kit.

From: Visualcreative.cz
free-flat-UI-kit-4

5. UI Kit

From: Abhimanyu Rana
free-flat-UI-kit-5

Opening the UI Kit PSD File

Unzip the file first to view the contents of the folder. You can see four folders and 2 .txt files inside. Open the UI folder and then view the flat-ui-free.psd file in Adobe Photoshop.

file-structure

photshop-opened

By default, there are three folders on the Flat UI PSD file:

  • Basic Elements – consists of a series of individual UI element folders.
  • Samples – consists of the actual application design of the UI elements.
  • Background – the white background of the UI elements.

psd-file-structure

Using the UI Kit Elements

Now that the Flat UI PSD file is opened, we can now go on and use the UI elements. Click Auto Select on the Option Bar (on the top left section of Photoshop near the menu. Make sure Group is selected instead of layer) and then open the Basic Elements folder.

auto-select

open-basic-element

Next, select the UI elements that you want to use. For this example, we will select the menu, share status buttons, radio buttons and checkboxes. Click on the selected UI elements and then move them to a new Photoshop document file.

menu-ui

Resizing UI Kit Elements

To resize UI elements, click on the Direct Selection Tool on the toolbar on the left section of the Photoshop.

direct-selection-tool

And then select the path on the right side of the UI element you want to resize. For this example, we will resize the menu element, press shift and drag the path to the right to resize.

resize

Changing the UI Element Color Scheme

To change the color scheme, you need to select the specific element you want change then click on the shape and select your preferred color on the color picker. For this example, we will change the background color of the menu. Go to the Menu folder and look for the shape layer that has the same background color of the menu. Change the background color of the menu to hexadecimal color: #00acc0.

change-color

Using Vectors and Glyphs

Vectors and glyphs add a touch of  creativity to web design elements. Let’s use the existing vectors and glyphs of the Flat UI kit. Create a new Photoshop document file. Next, create a box using Rounded Rectangle Tool with the dimension of 372px by 372px.  Now drag the retina vector icon and static green button on the box you created. Then drag the round check icon glyph to the left of the static green button. You just use the vectors and glyphs of UI elements.

vector-glyphs

Exporting UI Elements for Web

Now that we already know how to resize and change the color scheme of UI elements, let’s export them for web use. Simply drag your preferred UI element in the new Photoshop document file with a transparent background. Make sure you will only select the layers of that UI element, not the whole folders themselves. For this example, let’s use the paginator. Drag the UI element in the new Photoshop document and go to Image then choose Trim.

trim1

The Trim window will then appear. Next, select the Transparent Pixels radio button and make sure that all of the checkboxes are selected on Trim Away section (Top, Bottom, Left, Right) and then click OK.

trim2

Then Go to File > Save for Web & Devices. In the Save for Web & Devices Window, select the type of preset you want to use. For this example, PNG-24 is used since high quality image with no transparent background is preferred. Click Save to place it on your preferred location.

save-for-web

Congratulations! You just learned how to use, resize, change color scheme, apply vectors and glyphs and export UI kit elements for web used.

Conclusion

UI kits are very helpful to both web designers and web developers. If you are a freelancer, using UI Kits will save you a lot of time since you don’t need spend more time thinking for the design. It can please your clients too because you can deliver the project faster. You can explore more UI kits here. The web is composed of hundreds of UI Kits, both in free and premium versions. You just need to choose the UI kit that suits your needs. You might also want to try to apply it on your actual web or mobile design and then later on code it using HTML and CSS.

January 22 2014

15:00

Get ‘Layed’: What You Need to Know about Photoshop Layers

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

photoshop-layers-02

photo from Wallpaper Stock.net

Having said that Photoshop is a must-have software, it is also equally a must to master it. And that entails a great deal of effort. With all the tools, options and features of Photoshop, which – until today – is continually developing, it is very difficult to start training with the software. But never fret, you have us. What is 1stwebdesigners for, right?

photoshop-layers-01

Photo from Deviantart

One of the probably gazillion things you need to know about Photoshop is its layers. The importance of mastering this feature is, of course, pertinent for a web designer as a web design, before being coded, is most probably created through Photoshop.

Layers are free and independent elements in a Photoshop work space. They can be manipulated in scaling, color, effects, position, opacity and more. Layers often represent separate elements that a designer wants to tweak or customize. In the realm of web design, layers play an important role. They are used to represent the design elements of a webpage. They are made to imply a text box, an image, a background, the content and a lot more.

photoshop-layers-03

Photo from Designcontest.com

Most Photoshop users will agree to the notion that one of the key features of a software like Photoshop is its good layering options. Here are some of them that you need to know.

Fill and Opacity

Fill and opacity are two different things. Although they are commonly confused as the same terms and often connected as a single terminology (i.e. Fill-Opacity), they are completely different from one another.photoshop-layers-04

Fill is an option of a layer to customize how many percent of the background color is seen. This option is commonly used for shapes

.photoshop-layers-03

On the other hand, opacity is the option that dictates how transparent the whole layer relative to the other layers in the design.

The difference between the two is that the Fill option does not affect layer styles. For example, you put a stroke in the image. Notice that when you ticker down the fill percentage, the stroke is still seen unlike if you lower the opacity percentage, you see the whole image together with the layer styles is made transparent.

photoshop-layers-05

Grouping

This is one of the most rudimentary learnings a Photoshop user should have when it comes to layers. Grouping really does not do a lot of things in the design per se. Despite that predicament, the importance of grouping is never left behind. You see, grouping helps in the organization of layers. Aside from naming them properly, which is also very useful, grouping layers improves the workflow because you don’t need to search the whole design looking for a single pixel. Just find where it belongs and voila! You have it!

photoshop-layers-09

photo from elated.com

Masking

Masking is the act of hiding particular portions of the layer to show the layers below it. This technique is a very important skill in a designer’s arsenal as it is a good way of combining multiple photos in one seamless image.

Photoshop masks can be used at a very large amount on a single layer. According to TutsPlus.com, you can use up to 11 Pixel Masks and 11 Vector Masks!

If you want a good tutorial, better visit this.

photoshop-layers-06

Photo from Photoshopsupport

photoshop-layers-07

Photo from Amazon news

Selecting

Supposed you’re slicing up particular photos in a design. You have a lot of options to choose from. Either you click the layer you want to copy or cut, press CTRL+A and paste it wherever you want to, or use the lasso or quick selection tool. But you have a third option. That is quick selecting it by pressing CTRL + click the image desired.

photoshop-layers-11

Layer Styles

Layer styles give you the liberty to select specific options to enhance the design. There are some options to tinker on:

  • General Blending – here you can choose the Blending Mode. The Blending mode option allows you to customize background and image relationships and how to complement, contrast or both. Aside from that, you could also choose from advanced options where you are allowed to reduce the opacity of the layer as a whole or per channel.
  • Bevel and Emboss – this option gives your layers a 3D feel as they tend to pop out of the design. The Bevel and Emboss option add depth to the design, making it more ‘realistic.’ In this option, you could select from contouring options like inner bevels, emboss and more.
  • Stroke – this is one of the most used options in the menu. Stroke adds an outline to the main image. You can choose the opacity of the stroke, the color and its blending options.
  • Inner Shadow- gives you a subtle darkening of the layer. Inner shadow also provides depth. (Outer Shadow is the opposite of this)
  • Inner Glow – adds a shiny and feathered yellow design in the outline of the image within. (Outer Glow is the opposite of this)
  • Color Overlay – fills the whole image with a chosen color. It will totally forget what’s inside the fill. It will surely fill every spot of what you wanted it to fill with.

photoshop-layers-10

Conclusion

Layers are one nasty piece of business to study. It requires a lot of time and patience to do this. With the importance of layers highlighted, it is equally important to study them well. The key to this lesson is that you should try using them and commit mistakes. It’s where we really learn- from our mistakes. So next time, you’ll be dealing with layers, stand up and be proud that once in your life, you got ‘layed’ here at 1stwebesigner. Again, pun intended.

Sponsored post
feedback2020-admin
14:56

January 06 2014

14:00

70 Best Web Design Tutorials of 2013

2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.

Speaking of learning, were you able to catch some of the best web design tutorials of 2013? has given a lot of trends and knowledge that made tutorials prevalent as stars in the night sky. Well, for one thing, these tutorials will teach give you new knowledge and improve on what you already know. You’ll never know; maybe one day, the web design noob becomes the ninja.

Now, let’s look back at the top 70 tutorials that rocked the web design world in 2013. Some of these, you might have seen before. Others, you might have missed. But one thing is for sure, these tutorials don’t kid when they say they will teach you new cool things. So, for those who lived under the rock last year, let’s roll!

Graphic Design

The following tutorials highlights graphic designs. It includes typography and basic web mock up designs. These tutorials are aimed at making your website look better using graphic design elements such as fonts, shapes and a lot more!

Working with Types: Typography Design Tutorial for Beginners
This one discusses the basics of typography and how to create your very first design! For beginners, this one’s recommended.

70-tutorials-2013-typography

Your Logo as a Web Font Ligature
Create beautiful logos using types and not worry about CSS3 cross browser considerations (which is very, very tricky, messy and takes a lot of effort). This one shall render with better quality with the smallest effort and time.

70-tutorials-2013-ligature

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

This tutorial will teach you to create a very beautiful flat design portfolio landing page. Very easy to follow and tinker with!

70-tutorials-2013-portfolio-landing-page

PSD to HTML/CSS, SASS, CSS3, HTML5

Three of the best used platforms in web design are used in this section. This is a list of PSD to HTML/CSS tutorials and HTML and CSS tricks. Make your site look better using these easy-to-follow tutorials.

Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing [Part 1]

Talking about details, this one goes off the charts. Broken into parts, this comprehensive tutorial discusses the major facets of web design that you should know. Great for both beginners and experts.

70-tutorials-2013-wireframing

How to Create Your Own Custom Grid System in Photoshop

Grid systems are of great help in putting different elements in a page without becoming lost in pixels. This tutorial teaches you how to use a very simple tool (a Photoshop plugin called Guide Guide) to design using grids.

70-tutorials-2013-grid-using-photoshop

 Hide / Show Notification Bar With CSS3

Do you want to create a sliding notification bar? This tutorial is for you. Written in the simplest and most understandable way possible, you will be amazed at how easy it is to add a notification bar in your website design.

70-tutorials-2013-hide-or-show-notifications

Web Design: How to Convert CSS to SASS & SCSS

SASS and SCSS are pretty new to some designers. With CSS still known as a very plausible and useful language, learning how to convert CSS to SASS and SCCS is not bad for some knowledge that you might use in the future. When you read this tutorial, you will see how these languages are both alike and different in many ways.

70-tutorials-2013-css-to-sass

How To Style Google Maps

Putting maps on your website is great, especially for corporate clients. But styling them? That’s better. Now learn how to do this through this tutorial, and you’ll be able to look at maps in a whole new way.

710tutorials-2013-Style-google-maps

Getting Creative with the Google Maps API 

We’ve seen earlier how could we style maps. This one is another tutorial about this. The only difference is that it pushed further as it incorporated a lot of new elements that we thought we could never place in maps before. Amaze your clients at how you could design a map just for them.

70-tutorials-2013-googlemaps-creative

Web Design: Equal Column Height With CSS
What bugs most designers is unequal column heights. An OC designer will have a hard time tinkering with pixels and doing trial and error computations. This becomes a major headache for beginners as they still don’t know the tricks of the trade yet. So, this tutorial becomes a must if they need to add more to their skills. Look at this tutorial to see which of your methods is easier  to execute and which produces more accurate results!

70-tutorials-2013-unequal-height

How To Create a Web-Based Video Player

It’s always fun to customize all the elements you post in your website. It gives a personal touch to it. More so, you achieve uniformity in design. This tutorial is a proof of this perk. Learn how to create a web-based video player that you can really call ‘yours’.

70-tutorials-2013-web-based-video-payer

How To Use CSS3 Multiple Backgrounds
When I first read this tutorial, I never knew that having multiple backgrounds in one div or class is possible. Well, we all have our moments of learning, don’t we? This one is a great yet simple example of this. 

70-tutorials-2013-multiple-backgrounds

Creating Content Tabs with Pure CSS

In the early popularity of CSS3,  this tutorial has done wonders for me. Being able to create tabbed contents easily with CSS? It’s a pretty amazing thing to know.

70-tutorials-2013-content-tabs

Fun CSS Loading Animations

I’ve talked about loading animations before and how cool they are. They make your website more fun and makes your audience do (or see) something while they’re waiting. Interested? Learn from this tutorial.

70-tutorials-2013-loading-animation
Flat UI Pro Tutorial: How To Use LESS to Create a Sign-In Form

David East gives a very simple and detailed explanation on how he created a custom sign-up form using LESS and HTML. It’s very simple and easy to follow. You just need basic coding knowledge. That’s all.

70-tutorials-2013-custom-sign-up-using-css-and-less

Create an e-Commerce Web Element with CSS3
Have you ever had any e-commerce customers? Or you wanted to put up one? Well, this tutorial is a good kick-start. Learn how to put e-commerce elements in any site using only CSS3!

70-tutorials-2013-e-commerce

Create a Drop Down Menu with Search Box in CSS3 and HTML
Do you want to create a very simple and elegant drop-down menu and search box? This one’s for you. With its very trendy design and easy to follow steps, a drop down menu could never be created this easier.

70-tutorials-2013-drop-down-menu

Learn SASS on Treehouse
“SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.” So does the SASS website says. So where to learn this Syntactically Awesome Style Sheets? Nowhere else but on this tutorial!

70-tutorials-2013-sass

Creating Non-Rectangular Layouts with CSS Shapes

Sometimes it’s good to deviate from designing norms. A good example of this is non-rectangular layouts. It gives a refreshing look to the over-all design of the page. Give your clients and yourself a new view by trying this tutorial out.

70-tutorials-2013-non-rectangular

How To Create Flat Style Breadcrumb Links with CSS

Breadcrumbs are great tools for navigation. It lets you know where are you exactly on the website and prevents you from getting lost in the deep, dark woods. Learn how to save your viewers with breadcrumbs and learn how to do it creatively using CSS!

710tutorials-2013-bread-crumbs

Bring Your Forms U- to-Date With CSS3 and HTML5 Validation

Great for contact forms, this tutorial will help you create a simple but very useful contact form. I was amazed at how it matched with any design because of its awesome simplicity.

70-tutorials-2013-contact-form

Quick Tip: Don’t Forget the Viewport Meta Tag

Is responsive designing complicated? Or are you just complicating things out? It turns out that, most of the time, you’re the one complicating things out. Good thing you have this tutorial to clarify.

70-tutorials-2013-viewport

How to Customize the Foundation 4 Top Bar

Another navigation menu tutorial proves to be brilliant as it crosses over browsers and devices with simplicity, style and sense. Great tutorial.

70-tutorials-2013-ctopbar

Build a Freshly Squeezed Responsive Grid System

Using one of the many grid systems, this tutorial is aimed towards teaching designers to use grids for easy styling. This method is a very great tool, especially when doing responsive designs.

70-tutorials-2013-lemonade

Build an HTML Email Template From Scratch

Email templates could attract more traffic to your website. Once you send your subscriber cool emails, they will be awed at how good you are and might even hire you because of this. So learn how.

70-tutorials-2013-email-template

Quick Tip: Implement a Sticky “Back to Top” Button

One of the greatest advancements in web design is that “back-to-the-top” button which allows you to scroll into the top of the page in a single click. This tutorial lets you create that. Put it on your website now!

710tutorials-2013-back-to the-top

Quick Tip: Using Images as Fullscreen Faux-Gradient Backgrounds

I personally love full screen backgrounds. They give professional and neat-looking feel to your website. Try this on your designs and your client will surely love them!

70-tutorials-2013-faux-background

Circle Navigation Effect with Css3

This easy-to-navigate and use navigation effect gives a very clever method of presenting data in your website. Another quality tutorial for your convenience.

710tutorials-2013-circle-nav

Blur Menu with CSS3 Transitions

Another amazing navigation effects, this tutorial lets you create a very cool navigation that blurs unselected links. I recommend this for designers who want to design portfolios.

70-tutorials-2013-blur-menu

Animated Border Menus

Who would have thought that you could do something as clever as this? I love this tutorial because it lets me understand the greatness and coolness of using borders with animations.

70-tutorials-2013-animated-border=menus

Building a Circular Navigation with CSS Transforms

The world surely is both flat and round as this tutorial proves that something amazing can be achieved by fusing two opposing ideas in the literal aspect. With different effects to tinker on and with this conveniently written article, you’ll soon adapt this in your creative outputs.

70-tutorials-2013-circular-navigation

jQuery

Here’s for you guys who like to have a little bit of a challenge. Some advanced stuff! jQuery effects that will surely make your clients’ eyes pop! The list is easy to follow and comes with demos that you could download and tinker!

Beginner’s Guide to Working with jQuery Animation

This tutorial delves into jQuery animation basics and lets you understand these fundamentals while preparing you for more advanced stuff. For beginners, this is a yes-yes tutorial.

70-tutorials-2013-jquery

jQuery How-to: Creating and Inserting New Elements

Learn the basics of jQuery from this very comprehensive set of tutorials!

70-tutorials-2013-tutorial-part-1

Creating Touch-Enabled Slider With SwipeJS And jQuery

With the advent of mobile touch devices, doing jQuery sliders became a little bit more complicated. As we all know, it is very easy for web designers to use jQuery slider navigations. But it becomes difficult when transforming these into mobile as the navigation icons become cluttered in the tight screen resolution. The answer to this? Make the slider touch-enabled.

70-tutorials-2013-touch-enabled-slider

Customizing Browser Scroll Bar With CSS / JQuery

Does the default scroll bar bore you? Well, good news is, you could re-design them. Learn how from this tutorial.

70-tutorials-2013-scroll-bar

Building a Mobile Panel With jQuery Mobile

I first saw this mobile panel on the mobile version of Facebook. Well, for one thing, I knew that someday someone will do the re-creation of this panel. So, here it is!

70-tutorials-2013-mobile-panel

How to Implement Infinite Page Scroll Effect in Static Webpages

Are you into infinite scrolling? Or do you want your design to have one? You came to the right place because I will tell you where it is. It’s right in this particular tutorial. Learn how to seamlessly feed your future viewers with content.

710tutorials-2013-infinite-scroll

Smart (Auto-Hiding) Website Header & Footer Using jQuery

This tutorial discusses and demonstrates how you can build a sticky header bar that will auto-hide after a few scrolls. This is very advantageous because it allows you to achieve the ease of access capability of a sticky nav bar, and the convenience as well as lack of distraction in a regular nav bar.

710tutorials-2013-sticky-nav-bar

Sticky Position (Bar) with CSS or jQuery

Make your sidebar and other elements on your website always visible. Avoid scrolling them together with the content through this tutorial.

710tutorials-2013-sticky-nav-bar=02

Create an Awesome 3D Interactive Object Using Only Images and jQuery

Do you have a client who wants to put up an online shopping website? Do you need a 3d presentation of a product you want to place in your website? This one is perfect for you.

710tutorials-2013-3d-elements

Creating an Immersive Slider Experience with jQuery Immersive Slider

Sliders are still a thing in the world of web design. Be creative and try this tutorial out. Your eyes will pop at the fusion of simplicity and beauty at its finest.

710tutorials-2013-slider-background-blur

Creating a Parallax Scrolling Webpage Using Jarallax.js

Doing a videogame website design? Or a promotional website for a movie? Try this tutorial and let it help you using Parallax scrolling.

 70-tutorials-2013-parallax

Create a Smooth Jump To Sub-Navigation Menu in One JS Call

Navigation is a key element to any website. If you have the easiest to navigate design, more likely, you’ll get the money. Allow your users to still navigate even within posts using this tutorial.

70-tutorials-2013-jump-to

FancyScroll.js: Add an iOS/Android Overflow Scroll Effect

Are you a fan of Android or iOS scroll effects? Adapt them to your website and give it a feel of simplicity and professionalism.

70-tutorials-2013-overfow-scorll-effect

OnePageScroll.js: Creating an Apple’s iPhone 5S Website

One page scrolling has been a think this year. With the major companies like Apple following the trend, it becomes a bandwagon design as it epitomizes the functionality of all content within one page.

70-tutorials-2013-one-page-scroll

Notify Better.js: Creating a Dynamic Favicon and Title

Dynamic favicons are cool. Period. It gives a flare on your designs and lets you own every bit of it. Create dynamic favicons by following this tutorial and I bet you’ll have a very good time tinkering with this.

70-tutorials-2013-dynamic-notificaion

LoadingBar.js: Adding a YouTube-like Loading Bar to Your Website

When YouTube first adapted that loading bar, everybody’s eyebrows went high and wondered if they could re-do it and adapt the design into their website. Well, we can. Here’s the tutorial.

70-tutorials-2013-youtube-loading

Super Simple Text Rotator with Almost No Effort Required

Great for advertisements and short descriptions, this text-rotator will make your website more creative and adds flavor of movement and dynamism into it.

70-tutorials-2013-text-rotator

Create a Path-like Menu Button with WheelMenu.js

With the revamp of Path a few years back came a button like no other. It is very convenient and eye-pleasing. Learn how to create it through this tutorial.

70-tutorials-2013-path-like-menu

Creating the New Google Play’s Multi-Level Navigation from Scratch

Reeking with googliness is the next tutorial that borrowed the design of Google play. Learn how to create this eye-candy tutorial now.

70-tutorials-2013-multi-level-google-play-nav

Add Depth to Flat UI with Flat Shadow.js

Use long shadows using code? Yes, you can. I didn’t believe that too. Well, not before I have finished reading this tutorial. Read and see for yourself.

70-tutorials-2013-long-shadow

Creating a Swipeable Side Menu for the Web

Learn to recreate the behavior of side menus in smartphone applications in your website design. Both designs are suited for mobile and desktop versions. Learn how this tutorial works and become fun for both mobile and desktop users!

70-tutorials-2013-swipable-menu

Creating a 3D Interactive Gallery with CSS and jQuery

Imaginations are pushed further as this gallery is put into the limelight. Be amazed at how simple and yet awesome the output is. This is great for portfolio designs!

70-tutorials-2013-gallerry-using-jQuery

Making Draggable Webpage Elements Using jQuery

Draggable elements are very interactive. It lets your viewer see how your mind works by stretching your users’ imagination. Using this tutorial, you will learn how to put a little twist in your regular design.

70-tutorials-2013-draggable-elements

Make Pretty Charts For Your App with jQuery and xChart

Want to put something analytic in your website? How about trying charts using jQuery and xCharts? Be prepared for eyegasms as you will be pampered with good-looking data.

70-tutorials-2013-pretty-charts

Create a Beautiful Password Strength Meter

If you are planning to put sign-up forms, better spice it up using this tutorial. Add a beautiful password strength meter to ensure the safety of your users while adding a different look in your forms.

70-tutorials-2013-password-strenght-indicator

How to Build an iOS-Style Content Slider using jQuery

Create a cool slideshow using jQuery inspired by iOS. The good thing about this tutorial is that it allows you to drag the images to navigate them.

70-tutorials-2013-ios-style-slider

How to Create a CSS3 Login Form

Refurbish your log-in page through this very simple tutorial. Give your users a new look and make your website better.

70-tutorials-2013-css3-login-form

Create a Sticky Navigation Header Using jQuery Waypoints

This is another cool tutorial that involves the navbar. This time, it moves a few pixels down and becomes less opaque.

70-tutorials-2013-sticky-sidebar3

Quick Tip: Embedding New Google Maps

Maps are back on track as another tutorial is included in this list. Re-tweak your maps using this tutorial and revolutionize how people navigate in real life.

70-tutorials-2013-google-maps

Build a Dynamic Dashboard With ChartJS

This chart tutorial adds effect to the previous one as it provides with more samples and templates to choose from. Present your data using pie, line and hexagonal charts.

70-tutorials-2013-charts2

Draggable Image Boxes Grid

Do you have a client who wants a gallery type design? Well, this one might help you. Using grids and tiles as navigation tools, your client will surely love your work.

70-tutorials-2013-draggble-image-boxe

Medium-Style Page Transition

Showcase your posts in a totally new way using these transitions. With both simplicity and elegance, this tutorial will surely help you impress your clients, now and in the future.

70-tutorials-2013-medium-transitions

3D Shading with Box-Shadows

3D-looking boxes are not an abomination in the flat design trend. In fact, adding a 3D effect in your designs will accentuate the message you are trying to convey. Learn how it works on this tutorial.

70-tutorials-2013-box-shadows

Google Nexus Website Menu

Want to tinker more on menus? This Nexus-looking menu is great for a start. It is totally refreshing to see and amazingly easy to navigate. Try it.

70-tutorials-2013-google-nexus

Caption Hover Effects

Hovers have never been this awesome. I admit that I was pretty impressed with this tutorial. Clever as it may seem to be, reading this will make you realize that it’s not that difficult to do after all.

70-tutorials-2013-hover-effects

Responsive Retina-Ready Menu

Inspired from the colors of the Maliwan Borderlands Game, this menu is both retina-ready and colorful. Try to resize the page and see if the images become pixelated.

70-tutorials-2013-retina-ready

Thumbnail Grid With Expanding Preview

Another gallery tutorial that lets you enlarge the image for a better preview by clicking on the thumbnail.

70-tutorials-2013-Thumbnail-grid

How WordPress Plugins Work

Perhaps one of the best WordPress plugin tutorials there is. This one introduces you to the magical world of plugins and teaches you step-by-step to become a plugin developer.

70-tutorials-2013-wordpress-plugin

Killer Responsive Layouts With CSS Regions

Still in responsive layouts? Smashing Magazine gives an option using CSS Regions. Read this tutorial and become free from the limits posed by CSS elements.

Conclusion

And there you have it, guys. Seventy tutorials that highlights 2013. As 2014 comes right into our doorsteps, read these tutorials to refresh and to learn new things for the next year will surely be a bang! More tutorials to come, more design trends to be inspired from, more clients to ask for your help and hopefully, more money to fall right into your pockets.

December 12 2013

14:00

How to Create Flat Icons in Photoshop

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOS and even Windows now adapting this design scheme, it will not be any longer when almost (if not all) all websites in the World Wide Web adapt this design scheme. You would just be baffled to know one morning that as you woke up, opened your browser and typed in your favorite website (we hope it is 1stwebdesigner, just kidding!) and be surprised to see that it followed with the trend of flat design! So you would immediately re-code your website or blog, for that matter, to be ‘in’ with the trend, and that would entail a lot of grueling hours again.

So why not start today? Why not start your web motif revamp today? Try to be there before it happens. Try to be cool before being cool is cool. Be a hipster!

You may be thinking, “Where will I start?” Of course, revamping your website design is hellish as hell is. But that’s why we are here – so that you’ll have a helping hand in going with the flow of design. Right?

A good start for reconstructing your skeumorphic-designed website is to render the images you used in the interface to flat. This is probably the easiest because it does not require a lot of coding. What you really need is creativity and knowledge of a graphic designing software. There are a lot of images to ‘flatten’. It could take a lot of time to do this. But, of course, it is imperative to transform the more important images first. This will give you a sense of alleviation because these images will be present in every page on your website. You could start with your logo, or better yet, with the navigation icons.

In this tutorial, I will make that trouble less troubling. I will try, with my best efforts, to try to teach you how to make flat-design-inspired navigation icons. We will be creating navigation icons for your website or blogs. This tutorial will be using the Adobe Photoshop CS6 software. (You could use previous versions too) So brace yourselves, flat design interfaces are coming.

Here’s what we will be working on:

fnal

Open Photoshop. Create a new file using the preset photo (10inches x 8 inches, 300 DPI, transparent background, RGB color)

flat-icon-tutorial-home-icon-1

Use the Rounded Rectangle tool and create a new shape with the dimensions of 1736 pixels x 1736 pixels, radius 83px, color #82d8b5 (Or you could use your own color for this.) Do it according to the color motif of your website.

flat-icon-tutorial-home-icon-2

Using the Pen tool, draw something like the shown image below. Use the color #a30d00. This will serve as the roof of our ‘Home’ icon.

flat-icon-tutorial-home-icon-3

Next, still using the Pen tool, draw a rectangular shape like the image shown below.  Use the #ffffff color. Also, draw a small square using the Rectangle tool and color it #3498db.

flat-icon-tutorial-home-icon-4

Next, using the Rectangle tool, draw a 248px by 396 shape with the color the #fcab3a color fill.

flat-icon-tutorialhome-icon-5

(You could save it as an image in this part. This could actually be considered as a flat Home icon. But, I would still want to add a long shadow, so keep up.)

Next, using the pen tool, with the #000000 color fill, draw a shape. Start it with the right edge of the roof. (At the edge where the red and white and red colors intersect) Extend the drawing to the outside of the bounding rounded rectangle and close the shape in the bottom-left edge of the house image. You’ll arrive into this:

home-icon-7

Send the shadow backwards. Rasterize the layer of the shadow. Using the magic wand tool, select the whole bounding rounded-rectangle layer and inverse the selection (you can use the shortcut CTRL+Shift+I). With the selection (marching ants) still on, click the shadow layer and press delete.

home-icon-8

home-icon-12

Your icon is done. To save it, click on File>Save for Web (Shortcut is CTRL + Shift + ALT + S). Save it as PNG-24, with transparency checked. We would be wanting everything to be saved as PNG-24 as it supports transparency.

home-icon-13

flat-icon-tutorial

Next, we’ll be working on with the Post icon:

1. I opened Photoshop and repeated steps one and two of the tutorial.

flat-icon-tutorial-home-icon-1

flat-icon-tutorial-home-icon-2

2. Draw a rounded rectangle with the size of 929px by 929px and a radius of 38 px. I used the color #f5ea74 to resemble a sticky note.

post-icon-final-1

3. Draw a 1px line with the color #5d5608. Place it in the top of the sticky note.

post-icon-final-2

4. Draw 15 pixelated lines as shown below:

post-icon-final-3

post-icon-final-4

post-icon-final-6

post-icon-final-5

Take note of the spacing. I spaced them a little bit wider to give a minimalist feel on the icon. Minimalism is a characteristic of the flat design trend.

5. Draw a rectangle to symbolize an image in the sticky note.

post-icon-final-7

6. Draw the shadow as you did in the Home Icon Tutorial.

post-icon-final-9

post-icon-final-8

7. Save it!

post-icon-final-10

Here are the About Me and Contact Me Icons:

Download the entire pack here.

post-icon-final-final-about

post-icon-final-final-contact

I just hope that after these tutorials, you’ll start revamping your websites. I tell you this is a very difficult process but change is inevitable, so might as well go with it. And besides, the flat design scheme is designed to be appreciated not only for its beauty but for its purpose. So you’ll hit all whammies at once.

I remind you that these are just tutorials. You could experiment with these. Try to be as creative as possible. Your mind is your limit. You’ll never know how far it will take you if you won’t stretch it and make it work.

November 05 2013

14:00

10 Extremely Beautiful Websites for Your Inspiration

Browsing the Internet is fun. Aside from the seemingly limitless information that is available for the taking, you could see art concocted with usability almost everywhere. Web designers have immensely evolved in their creative means to get through you. They have devised new designs to make the content of the website juggle with its design. This makes their clients and the market of their clients benefit from the art and the content that is spilled beautifully in the canvas of the World Wide Web. But the clients and the market are not the only people who benefit from this artistic explosion. Other web designers also benefit from this. The inspiration that has overflowed on the Internet has made a lot of artists do better, and learning, in this particular case, is through modelling.

I managed to gather a list of eye-popping and beautiful websites that would surely give you inspiration for the next project you’ll be working on. These sites are, in my humble opinion, well-designed for their cleanliness, usability, cleverness and aesthetics.

1. Ogilvy One Worldwide

When I first came across this site, my eyes figuratively popped out of their sockets. The simplicity of the design is amazingly shown while it focuses on the main use of the website. It does not involve any 3d images or skeumorphic design. It focuses in the content and how is it delivered in the simplest yet prettiest way.

As you lay eyes on the site for the first time, a beautifully shot header image will welcome you. It’s purposively blurred to emphasize on the tag line of the company. The designer did not use any fancy 3d scheme or used drop shadows. He was content in superimposing the text as it is and it produced beautiful results.

10-webistes-that-will-make-your-eye-pop01

Then, as you scroll down, you will be awed at how each item just fades in. They appear as if you are literally taking a walk in their office, or watching a very expensive TV ad. In addition, the content is presented in a readable and logical way. How it is easy to navigate makes it better. You can browse each segment of the page by clicking on the diamond shaped bullets found of the right edge of the screen. This ensures sure that the content is surely delivered and understood by the reader. It also used flat design images and a minimalistic approach in arranging the data. Ogilvy’s site is also responsive; meaning any given size of the browser will not affect its scaling and positioning. This made it more beautiful and trendy.

10-webistes-that-will-make-your-eye-pop03

10-webistes-that-will-make-your-eye-pop04

What I love the most about this is the footer area (or the most-bottom part of the page). Triangular and diamond-shaped images appear and are arranged in a good way. It just gives a sharp and intelligent feel in the whole site.

2. Juliana Bicycles

If you prefer to pop eyes with photography-infused web design, this site is a good candidate. The owners invested on photography as their slideshow. This site is a good inspiration for people who are good in both photography and web design.  The photos they took are exquisite and truly manifests majesty in the simplest way imaginable.

10-webistes-that-will-make-your-eye-pop05

It also has a trendy navigation button. This is located at the top left corner of the page. This is very good thinking because it does not, in any way, block any image in the header section because it is hidden in a button. Also, like Ogilyv’s page, this one is responsive, which makes it good for touch phones and tablets too. (I loved it!)

3. How far is it to mars?

All that I could say with this website is it’s clever. It used pixels to measure the distance of the Earth to the moon and to Mars. Well, it’s pretty geeky for someone who loves the outer space. But for web designers? Well, it’s a good wake up call to use the theme of the website to produce clever designs. It’s a wakeup call to think more and think beyond the design.  The designs that will make your viewer go like, “Oh my goodness! Why didn’t I think of that”.

10-webistes-that-will-make-your-eye-pop10

4. Etch Apps

Etch apps is my personal favorite. It’s uniquely designed. The website is influenced by the Metro style. This mainly popularized by Windows 8 and is derived from the Swiss-style design. It is usually characterized by square blocks acting as containers for menu and content.

10-webistes-that-will-make-your-eye-pop11

In this website, the principles of simplicity and minimalism are very much reflected. The whole layout suggests organization of data and the website’s function to bring content. It focused more on directing the flow of information rather than using complicated images. It also used eye-relaxing images to sustain readership even for a long time.

What I like about this website is how everything fits in a single web page. Unlike the conventional home pages, which mainly act as a portal to different links within the website, Etch’s home page presents all elements at once. As you scroll through the page, you will be amazed at how they managed to place all content in the shortest and artisitic way possible.

Bonus: that contact icon located at the upper right corner of the page rocks!

10-webistes-that-will-make-your-eye-pop12

5. Boat Studio

This page literally brings color to toneless images. The website also showcases amazing photography in their layout. These images are arranged in the Metro style like etch. The only difference it has is that it used the hover option very ingeniously.

As the website loads in your browser, you will be able to see monochrome images arranged in block. They may seem boring, except that they are taken artistically. But they still could be boring because of their lack of color.

10-webistes-that-will-make-your-eye-pop14

Not until you hover them. You’ll see the pictures breath life. They will slowly have colors and be more beautiful.

6. Black Virgin

This is not some racist porn stuff. It’s a creative website designed to make your ears and eyes pop out.

Black Virgin’s feature starts with the cool lightning-bolt-enclosed-with-a-diamond-shaped-container loading screen. It gives you a forethought of how the site looks like. What I also like with Black Virgin is that everything that you could ask for is located within one page. You won’t go looking anywhere, or waiting for the page to load up. Everything’s in one page.

10-webistes-that-will-make-your-eye-pop15

7. LayerVault

LayerVault is one of those website where I could tell myself, “I wish I had the mind that designed it.” It’s simply alluring to the eye. Layervault’s use of green colors topped with flat design sprinkles. The website clearly used the flat design principle to their advantage.

10-webistes-that-will-make-your-eye-pop17

10-webistes-that-will-make-your-eye-pop16

What makes LayerVault a member of this list is that it uses animations that are cursor sensitive. The animation follows where you point it. This is to induce some interactivity between the site and the user thus ensuring more content reaching him.

8. Builtbybuffalo

When the world goes for circles, squares and triangles, builtbybuffalo used hexagons. He tried to be different with his flat design principle. The designer tweaked the design making it a more attractive page. It did not go mainstream with the conventional shapes used in web design but explored it at took  it to a better field.

10-webistes-that-will-make-your-eye-pop20

I also like how the site displays its stats! The use of circular data panels gave touch and a creative pinch to the whole page. It’s like seeing a car dashboard where you could see if how fast you are going, the fuel rate of your car and the like.

9. Lorenzo Verzini

This sign is drawn in flat all over. It manifests how a designer is able to use flat design to his advantage. In this website, Lorenzo was able to apply all the elements of the flat design. He had used simple images with no 3d settings or so. This was manifested on how the images look simple and easy to make. It also was able to use the colors well as they blended perfectly, producing a sense of consistency in the whole site. Spacing was not a problem as well because the site is clearly able to breath because of the ample white space it gave.

10-webistes-that-will-make-your-eye-pop18

10. Stuart Regan

If you want simple, this is the perfect guy. His site is built to manifest extreme simplicity as the menu is located within a few pixels of space. It also gives you a very minimalistic feel as not all the space was bothered to use. This just proves how this site is simple, both in design and in purpose.

TIP: click on the center image on the web

10-webistes-that-will-make-your-eye-pop19

These designs should always act as guides to improve your design. Sometimes, all you need to make that creative brain of yours to work is some inspiration! Keep trying until your eyes pop, or more so, until you make other’s eyes pop too!

October 05 2013

13:00

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning. If you’ve missed it, check Basic Web Design Video Course.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wireframe into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!

The Final Product

dipped-design-preview

Resource you will need to complete this tutorial:

The Designing Part

Finding Inspiration & Wire Framing

Let’s assume that we already know what is the goal of the website we’re going to make. The first step is to gather some inspiration that suits your taste for your website and start doing some rough sketches using your pen and paper.

The next thing you will need after finding inspiration is to create a wire frame based on your ideas.

Wireframe to Photoshop

Basing on our wire frame, we will start transferring it into Photoshop to have a much clearer vision of what exactly the website layout will look like. What’s good about doing this is we can focus only in placing the elements like buttons, text headings, and paragraphs in the right position and the right size.

Applying Styles

Here is the exciting part, and that is, applying styles to all of the elements, buttons, fonts and background. In here, we can play around with a lot of stuff, for example, applying filters to images, playing with curves, putting contrast, creating our own shadows to make the elements pop out more.

So that’s it, guys, for the designing part. It’s a matter of trying and playing to come up with a great outcome. Just remember to search for inspiration because designers of the 3 design communities I’ve mention are following the latest trends of web design. It’s not copying but learning from their works. I think there is nothing wrong with that as long as we don’t copy their overall design. So if you’re planning to create yours, please take time to think and plan what’s best for you, gather some inspiration, create a wireframe, choose the right fonts and colour scheme for your brand and, lastly, rock the Photoshop until you have come up with great results.

PSD to HTML using Bootstrap

In the first part of this tutorial, we are working mostly on the graphical part. We’ve also talked about where to find inspiration, colour schemes, grid and much more.

In this 2nd section of the Elegant Landing Page Design in Photoshop tutorial, we will be working on the coding part. In here, we will talk about how to use Twitter Bootstrap for transforming our PSD design into a working website. I will divide this into 3 videos: first one will be about marking up the HTML; the second will be about applying CSS styles and the last one will be taking care of the responsive part. This will take much of your time but if you’re a beginner and willing to learn to transform your own design into a working website, I know you will find time to learn this. Let’s get started!

Resources you will need to complete this tutorial:

HTML Markup

Here, I will walk you through on how easy it is to use Twitter Bootstrap by just linking the appropriate file path to make it work. Then I will guide you step-by-step on how to mark-up properly the HTML base on our design, starting from the header down to the footer.

Applying CSS Styles

Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.

Responsive Part

Alright, you’ve done a lot. Have a break; get some cup of coffee. Done? Finally, we reach the last part of this tutorial, which is to make every section responsive. And also, we will make the banner and testimonial section working as a carousel.

Conclusion

That’s it guys! Imagine how easy and powerful Bootstrap is by the pre-made classes provided for us to use. All we need to do is to properly adjust some padding and margins to make everything look good and balanced.

You’ve done a great job, guys! You just completed the tutorial. I hope you can apply this in your future projects. I wish you learn something from this. Make sure to share it with your friends. If you have comments or suggestions, feel free to drop them below. I’m excited to hear from you. See you guys on the comment section. Cheers!

Need a Host for Your Website?

Free domain and get a 20% discount when you sign up on Bluehost for as low as $3.95 per month!

July 27 2013

13:00

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content and it’s very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page. Almost an hour long free video tutorial!

PSD Download

It doesn’t matter if you just started using Photoshop. I will guide you throughout the video, step by step using the basic Tools and Techniques like using Text Tool(T), Shape Tool(U) and quick tips to align elements and masking and manipulating an image.

Resources to complete this Tutorial:

Make sure you download all the resources! Are you ready? Let’s get started!

Flat Web Design Portfolio Landing Page Tutorial

That’s all guys, we’ve just finished our awesome portfolio. We hope you learned something from this tutorial. If you have questions feel free to drop them below. Don’t forget to share this article. Thanks!

July 02 2013

13:17

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

In this tutorial I’m going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Video Tutorial

And in case you prefer to do it the rough way, here’s a text and screenshot combo tutorial for you!

Step 1

Create a new document in Photoshop 730px by 410px and then let’s create guidelines by just dragging some guides from the Ruler Tool and placing them at the center of the canvas horizontally and vertically.

Step 2

Using the Ellipse Tool (U) create a 120px by 120px shape and place it in the center. Hide the fill layer and a stroke of 5px, color to #e1e1e1.

Step 3

Zoom in about 1200% and create a 1px line using the Line Tool (U) starting from the top edge of the circle down to the middle.

Step 4

Press Ctrl + Alt + T on the keyboard and you will see a transform control. See that Pivot Point (something like the crosshair of a sniper) on the center of the line? Let’s move that to the bottom edge of the line by holding the Alt key on the keyboard and clicking and dragging it to the very bottom.

Step 5

Don’t press enter yet. While the transform control is still there change the value of the Rotation to 10 degrees and press enter twice.

Step 6

Now press Shift + Ctrl + Alt + T on the keyboard, what this does is copy what we did in Step 5. Just continue pressing the keys until you have a spiral line shape.

Then change the color to white.

Step 7

Duplicate the base first/base shape that we’ve created and place it at the very top of the layers panel. This will serve as the rotation indicator.

Apply this gradient overlay.

Step 8

Mask the part you want to hide and make sure it matches with the desired day, time, min, sec that we will put it.

Step 9

Using the Text Tool (T) add a number for the desired day, time, min, sec and add the right label to it.

Final Step

Group the layers that we’ve created and duplicate it 4 times and align them horizontally by adding a 20px gap between each timer.

Look what I did here. With the timer that we’ve created I put an iOS7 wallpaper and blurred it about 15%. Then I played with the layer mask to hide the unnecessary parts, added some drop shadows and Boom! I came up with image you see below.

It’s a challenge for you to take this tutorial and go to the next level by just playing with layer mask and adding touches to make it look interesting, yet still minimal.

The Wallpapers

Man Of Steel


Download

Flying Paper Plane


Download

Windmills


Download

Hot air balloon


Download

Hot, Ice, Cozy and Frapp


Download

The Evolution of Man Geek


Download

Paper Plane


Download

Vintage Camera


Download

Air Plane


Download

Space Shuttle


Download

iOS7 Wallpaper

Image from Ihponehacks
Here is the iOS 7 Wallpaper from WWDC 2013. You can download the wallpaper here.

That’s it guys, I hope you learned something from this tutorial. It will be awesome if you share your results below. If you have questions feel free to drop them below. I would love to hear your thoughts and I am willing to answer your questions. I’ll catch you guys in the comments. Peace!

June 24 2013

13:00

Free and Premium Photoshop Tutorials for Graphic and Web Designers

Premium membership websites have become popular in recent years, by following the tutorials these sites offer you can teach yourself graphic and web design. However, if you’re having a hard time learning by yourself another option is to subscribe to premium courses. Sounds good right? You will become a graphic/web designer without having to spend the money on a degree from school, and many people are doing that.

School is not an option regarding this matter. Read Learn Web Design The Right Way: Quit College And Start Sucking Blood to learn more about this. Our Freelance Sergeant James Richman will explain everything about why you need to start sucking blood from now on and become a freelance web designer.

Okay, continue reading to check out both free and premium video courses for graphic and web design!

Tuts+Premium

Tuts+ is a fantastic network of educational websites. They offer tons of high quality and in-depth written and video tutorials. Tuts+ is composed of amazing sites where you can learn different kind of skills like web design and development, graphic design, motion graphic, photography and many more.

Price

  • Monthly: $19
  • Yearly: $180

Ledet

Ledet is a place that focuses on tools such as the Adobe Creative Suites and Auto Cad. Members have access to classes that cover Photoshop, Illustrator, Dreamweaver, and the rest of the gang.

Price

  • One time membership: $1,595

Lynda

Lynda is a place where you can learn everything about the web, they offer tons of high quality instructional video training for creatives. The instructors are professionals and some of the best in the web design industry such as Chris Coyer, owner of CSSTricks.

Price

  • Monthly: $19
  • Yearly: $180

Train Simple

Train Simple is a good place to learn Photoshop CS6 Fundamentals, tackling the power of Photoshop CS6 and learning how to create superior images and artwork. Learn how to perform key image editing tasks, including retouching, sharpening, and color correction. In the course you’ll see how to effectively work with layers, blend modes, masks and so much more.

Price:

  • Monthly: $9.99
  • Annual Membership: $99.99

Barryhuggins

A professional training course by Barry Huggins tackling Photoshop for web designers. Courses cover topics like defining colour settings for Web design work, designing buttons, saving images the right format and much much more.

Price

  • Monthly: £9.96
  • Annual Membership: £99.58

Photoshoptopsecret

Photoshop Top Secret might just be the most advanced course ever put on DVD, but now you can watch online! Your personal trainers Mark Monciardini and Melanie Stimmell will push you past your limits. Over 20 hours of jam packed training with surreal graphics and Hollywood special effects!

Price

  • Annual Membership: $179

Photoshopuser

If you’re tired of boring, basic training Photoshop User is the best place to learn in-depth Photoshop techniques. Once you feel comfortable with Photoshop, these courses will help you get up to speed on the areas you want to learn more about. Like, Path and shapes, layer styles, blending modes, types and much more.

Price

  • Yearly: $99

Adobe Creative

Adobe Creative Cloud is the place to go if you’re really looking for a more professional approach to teaching. Their premium membership will get you access to all the latest web-standard tools as soon as they release them. Learn new skills with their exclusive library of free tutorials. And never worry about being equipped for the future. You already are.

Price

  • Yearly: $49.99

NAPP

Photographers, designers and enthusiasts of all skill levels look to NAPP for the best Photoshop tutorials on the planet. Their 71,000+ members know how to take an ordinary image and turn it into something extraordinary. You can too.

Price

  • Yearly: $99.99

Kelbytraining

Kelbytraining offers tons of video Photoshop tutorials that are really high quality and in depth video training that you can learn from. Check out their video sample on their website and find out yourself.

Price

  • Monthly: 24.95
  • Yearly: $199

Totaltraining

Total Training’s Adobe CS6 course will help you know the key new features in this version and teach you about the tools, palettes, and menu bars, as well as the major features like layers, selections, image editing, compositing, using Adobe Bridge, type design, drawing and painting, and creating a web photo gallery.

Price

  • Monthly: $24.99
  • Yearly: $239.88

Before & After Magazine

Before & After Magazine is really good for learning design theory, ideas, tips, quick fixes to turn your project from blah into bravo. You can apply this to both print and web which is really helpful especially in doing layouts and placing elements.

Price:

  • Print Course: $49.00

Free Video Tutorials

Here is a list of helpful free premium-like videos tutorials that can help you learn how to design everything from UI elements and layout to effects, backgrounds and more.

Background and Effects

Here you will learn how to create Pattern and lighting techniques that can be applied to the background for a website or other graphic elements needed for banners or ads.

Beautiful Lady with Flowing Light Effects

Textures and Patterns

You definitely must know how to create patterns. In this Photoshop tutorial you will learn how to create texture patterns. This saves your website loading time by just repeating the original pattern using CSS.

Create Custom Shadows

Creating shadows is great, especially if you want to make an element to capture your viewers attention. In this tutorial you will learn how to create different shadows.

Fancy Dimple Background

Linen Texture

Wood Texture

Logos and Icons

Here you can learn various techniques on how to create logos and icons. I also included a time lapse video to show you a quick overview process on how the spotlight icon was created from scratch.

Cloud Icon

If you’re making a 3D icon this tutorial will help you turn you 2d logo into a superb sexy with light effects icon.

Hand-Stitched Social Media Icons

Stiched is designed buttons or icons is very nice to look specially when you crafted it pixel perfect that will turn you simple social icon into a WOW!

Vibrant Color Ring

Most of corporate agencies logo have this type of logo that has 3-4 different colors but it still blends well. So in this tutorial you will learn what is the process of creating those.

How to design a logo fast

Having trouble in designing a logo? Here is a great tip on how to design logo fast in 3 different ways.

Spotlight Icon

Getting bored in long detailed tutorial? In this time lapse video you will see the process on how he created a stunning spotlight icon from scratch.

UI Elements

I’m pretty sure this video ui tutorials will really help you boost up your creativity in creating some UI elements like buttons, navigation, search bar, login box and much more, which is very useful in designing a website.

Glazed arched Menu

This tutorial will help you understand how to play with blend modes to turn a simple navigation menu into a superb glazed areched menu.

Shiny Glassy Buttonv

What you have learn in above tutorial can still be applied here in creating Glassy Button effect.

Login Box

A great tutorial guide on how to create a 3d looking login form with the help of shadow and that curved lock icon on top right side.

Creating a Knob in Photoshop

Volume Control

A great way to learn how to create a volume control & knob to apply it in your music instrument app.

Coming Soon Timer

This tutorial will guide you on how to create a countdown timer. You can apply this if your portfolio is on progress and the launch date will be on that designated time.

Loading Circle Animation

A great Photoshop tutorial on how to design a pre-loader and animate it.

Create Slick Web Tags

Turn your ordinary tags into a trendy looking one.

Sleek Calendar Photoshop Tutorial

If you have an old looking or default calendar in your sidebar it’s time to turn it into a eye catching gorgeous calendar.

Minimal Loading Bar

A cute way to turn you loading/progress bar into a nice looking striped bar.

Search Bar

This will give you an idea how to create a great search form.

Chat Bubbles

You will learn how to create cute and glossy chat bubble that can be used also in Testimonials section.

Mp3 Player

Love of Music? Here is a great tutorial on how to create a simple Mp3 player yet very catchy with that shiny cover.

Countdown Timer

Here is another Countdown Timer gorgeous dark with shiny string holding the fold.

3D Button

This effect is great for Call to action buttons.

Facebook and Twitter Buttons

A well designed social media buttons to trigger the viewers to click that social media buttons to gain more followers.

Web Layout

Here you will learn to create website layout and structure it in a proper way like were to place header, banner, sidebar, content and footer.

Website Layout Tutorial

Here is a simple tutorial on how to create a dark toned website you will learn how to apply patterns, highlights, shadows and more.

Web Design Tutorial Part 1

Web Design Tutorial Part 2

Another great tutorial on how to create a fresh looking website from scratch to finish.

Basic Photoshop: Designing a website

Lifehacker shows how to create a website from scratch, gathering what are the important elements and placing it into Photoshop and giving it a try and try until it came up with a great outcome.

I have another option for you. Are you one of those individuals who really want to learn but you can’t afford the monthly membership? well that is not the problem 1stwebdesigner is here to help you. It’s your chance to learn and become a web designer for free.

Basic Web Design Video Course

In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.

You’ll learn all the steps I use including:

  • Planning
  • Wireframing
  • Using basic tools and panels in Photoshop
  • Designing Simple Blog Page
  • HTML
  • CSS

The Course:

Part 1

  • Planning and Wireframng – 13:19
  • Phothsop Basic Tools and Panels – 12:51
  • Designing In Photoshop – 36:36

Part 2

  • Preparation – 09:15
  • HTML Basic Tags and Structure – 20:38
  • Basic CSS Properties – 18:54

Part 3

  • Complete HTML Markup – 23:17
  • Applying CSS Styles Part 1 – 23:05
  • Applying CSS Styles Part 2 – 25:28

That’s it! I hope the course will help you out specially for those individuals who are just started. As we know we individuals are different some can’t learn from their own and some can learn by them self. But I think the best way is to push hard and learn one step at a time and by that I’m sure that you will become the career you’re dreaming about. Cheers!

August 25 2012

13:00

Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop

Hey Guys! Were you ever asked to design a Desgin Agency website and you’d run out of ideas? Well, this tutorial is just for you. I will show you how to create a stylish looking landing page using Adobe Photoshop. Don’t worry, this design will not take too long and don’t be afraid of doing this if you are a beginner I promise to guide you all the way through. So what are we waiting for? Let’s get started!

Here is what we will be making, click on the image for full preview:

PSD Download

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1820px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels to the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide but now change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Header

Our header will contain a logo, call to action, navigation, search.

Step 2.1

Using Rectangle Tool(U) with a fill color of #4d9543, create a 100px by 10px shape and place it on the very top of the canvas.

Step 2.2

This is a personal logo that I’ll be using in this tutorial. For the Burnstudio text I used Myriad Pro 30pt, color #4d9543 and #4a4a4a. Feel free to create your own brand name using these font settings. Once you have finished it, place the logo 40px below the green shape.

Step 2.3

On the other side let’s add the call to action. The font I used for this is Kozuka Gothic Pro, 24pt. If you don’t have this font try to use Helvetica Thin/Light. Color will be #333333 and #4d9543. Now, add your number and Call us now text using Text Tool(T). I also added a 1px #c8c8c8 solid line 20px from the right side of the text. You want to align it with the logo.

Step 2.4

Next we’ll create the navigation. Select Rounded Rectangle Tool(U) and set the Radius to 30px. Now, create a 960px by 50px shape with a fill color of #4d9543. Place it 40px below the logo.

Step 2.5

Apply these Blending Options

  • Stroke

  • Inner Shadow

  • Gradient Overlay

Step 2.6

First you will need to add the home icon, followed by the links. The font I used is Helvetica Light, 15pt. Using Text Tool(T) add the following links. Note that each link has a 30px distance from the divider, so measure it using Ruler Tool(I).

Step 2.7

Duplicate the divider and move it 1px from the right and apply this Blending Option.

  • Stroke

Result

Step 2.8

To create the search bar, create a 225px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #4b9241, place it 55px to the left. Add the (search) text using Text Tool(T), font is Helvetica 14pt. Then, place the Search Icon 20px to the left.

Step 2.9

Apply this Blending Option to the search bar

  • Stroke

  • Drop Shadow

Last step in this part is to add Drop Shadow on the icons and text to make it more crisp.

Step 3: Working on Slider

Step 3.1

The slider part will be 300px high and 40px below the navigation, so go ahead and measure it with Ruler Tool(I).

Step 3.2

Once you’ve done it. Select Rounded Rectangle Tool(U) and create the same shape as shown in the screenshot below. All you need to do is first create a 550px by 250px shape and customize the bottom right corner the same in the screenshot below using Direction Tool(A).

Step 3.3

Next using Ellipse Tool(U) create a 160px by 160px shape. Fill color for this one doesn’t matter because we’ll be masking an image above it later. Place this shape at the center of the bottom right corner.

Apply these Blending Options

  • Stroke

Result

Step 3.4

Create another shape using the same tool. Make sure the fill color is #000000 and change the opacity to 80%. For the purpose of the presentation I made it a green so that you can see how the shape will look. The shape size is 575px by 88px.

Step 3.5

Next we will be adding the slider controls. Using Ellipse Tool(U) create a 3 13px by 13px shape. the normal state color will be #f5f5f5 and for the active is #4e9643. Place it as shown in the screen shot below.

Apply this Blending Option

  • Stroke (Normal)

  • Stroke (Active)

Result

Step 3.6

Next is the previous and next button. I created this using Pencil Tool(B). Normal state color will be #4f4c4d and for the Active the same green color. Place this as shown in the screenshot below.


Step 3.7

Now that we have all the shapes together let’s fill it with text and add an image. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask. Do the same on the ellipse shape. I will leave it up to you what image you use.

Step 3.8

Next let’s add the text. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, #555555 and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool(B) beside it. And that’s it for this slider part.

Step 4: Working on Services Area

Step 4.1

The service area will be 240px high and 40px below the slider, so go ahead and measure it with Ruler Tool(I).

Step 4.2

Using Rounded Rectangle Tool(U) with a fill color of #f9f9f9 create a shape as shown in the screen shot below.

Apply the following Blending Option

  • Gradient Overlay

Step 4.3

We will be dividing the shape into two so that we can align our service blocks properly. 960/2 is 480px, so go ahead and measure it with the Ruler Tool(I). Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did  previously. Also the distance from the shape left and above is 30px.

  • Web Design

  • Vector Design

Step 4.4

Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color #000000, place it below the original shape layer. Next, Go to Filter – Blur – Gaussian Blur to 7.0, create a mask on the layer and brush over the part that we don’t need.

Step 5: Working on Media Section

This part will be divided into 3 sections Video, Twitter & Facebook.

Step 5.1

We will work first on the Video section. The video will take up 305px by 220px and the same distance from above. Go ahead and measure it with Ruler Tool(I).

Step 5.2

Using Rounded Rectangle Tool(U) create a 300px by 145px shape as shown in the screen shot below with the same green color.

Apply this Blending Option

  • Gradient Overlay

Step 5.3

Next let’s create a play button. Using Ellipse Tool(U) create a 45px by 45px shape with a fill color of #f5f5f5.

Apply the following Blending Options

  • Drop Shadow

  • Inner Shadow

  • Gradient Overlay

I also added a play icon I created using the Pencil Tool(B) with the same green color.

Step 5.4

Add some text with the same font, the size will be 18pt and 14pt. Lastly add the macbook air icon and place it as shown in the screen shot below.

Step 5.5

Now let’s design the Twitter feed. Select Rounded Rectangle Tool(U) change the Radius now to 20px. Create a 105px shape of width, the height will not matter. Now customize the shape by using Pen Tool(P) and Direct Selection Tool(A) and make a shape as shown in the screen shot below.

Step 5.6

On the layers panel make the shape fill color to 0% and apply an inside stroke 1px solid #c8c8c8.

Step 5.7

Now let’s add text and the Twitter icon. Place it as shown in the screenshot below. Heading font size is 18pt, paragraph 13pt and for the link color and the hours color is #6767c9, #999999.

Step 5.8

For the Facebook widget there’s nothing special I just took a screen shot in the widget page.

Step 6: Working on Links, Blog, Location Section

Step 6.1

The footer will be 100px by 320px and 50px distance from top, so go ahead and measure it with Ruler Tool(I). Then, Fill the whole space using Rectangle Tool(U) with a fill color of #333333.

Apply this Blending Option

  • Drop Shadow

Step 6.2

Let’s create a dotted pattern to apply in the shape. Create a new 5px by 5px transparent document and create a dot on the bottom left part of the canvas as shown in the screen shot below. Go to Edit – Define Pattern and apply this to the shape with a 30% Opacity.

Result

Step 6.3

Now let’s work on the links section, the total width for this will be 225px. I used the same font style and size, the links have a distance of 25px from each other. The distance of the heading from the top is 50px and 30px below. Also, I create an arrow shape using Pencil Tool(U) and add it beside the links.

Step 6.4

Create a 225px by 29px shape with a fill color of #000000, lower down the fill color to 20%. Place it as shown in the screen shot below.

Apply this Blending Option

  • Drop Shadow

  • Inner Shadow


Step 6.5

Now let’s proceed to blog section. Using Rounded Rectangle Tool(U) create a 292px by 58px shape as shown in the screenshot below. Fill color will be #ffffff and lower down the opacity to 10%. Distance from the links section is 77px.

Step 6.6

Add the icon and fill it with text using Text Tool(T). For the date color #cccccc and for the link is #ffffff.

Step 6.7

For the location just duplicate the heading and change the text to (Our Location). Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be #cccccc and for the line #484848.

Step 6: Working on Clients

Well, this part is very simple just take some sample Icons and desaturate it by going to Image – Adjustment – Desaturate or by pressing Ctrl + Shift + U. This section will take up 145px of height so, place the icons accordingly and make sure it is centered. Last thing is to add a 1px #c8c8c8 below and we’re done.

Step 7: Working on Footer

Step 7.1

Text size 12pt, paragraph color #666666, distance from top 30px, distance from text 15px.

Step 7.2

Text size 12pt, link color #666666, 2px #c8c8c8 bottom line border.

Step 7.3

For the back to top button. I create it using Ellipse Tool(U), 30px by 30px shape. I apply 1px #bdbdbd inside stroke and crate an arrow facing top using Pencil Tool(B).

We’re done!

And that’s it for this tutorial. I hope you liked this one! If you have something to ask feel free to drop me a line in the comments. Keep coming back because I’l be writing more tutorial like this. I’m planning to create another eCommerce landing page tutorial soon.

Have a great day! :)

July 31 2012

13:00

Create a Charity Website Layout in Photoshop

In this tutorial we will be creating a minimal, yet very elegant, layout in Adobe Photoshop. The main purpose of the template will be for charity and NGOs who needs a specific kind of design, with more call-to-action buttons which would increase the number of contributions to their charity/organization.


This tutorial is an exception because you will not be getting the final PSD file for download, because this page, along with the others is part of a template available for sale at ThemeForest. If you would like to grab the full template, which consists of 5 layered designs then you should click the final product image to be redirected to the ThemeForest item page.

Charity Website Final Product

Click for full resolution and other pages.

Note: this tutorial covers the home page of Charity, a PSD template for a full website that you can check out on ThemeForest if you want the whole package.

Step 1 

We will start our layout by creating a pretty large canvas in height. Set the width at 1020 pixels and the height at 1725 pixels. We will be working with a 960 Grid System. I recommend Nathan Smith’s 960 grid system, which you can grab for free, right here.

Step 2 

 

We’ll be adding a really subtle pattern so we won’t have to work on a white, plain canvas. The best source for free subtle patterns is SubtlePatterns.com, where you’ll find hundreds of awesome textures. Grab any light texture you think will be suitable, and apply it to our background, so it would cover all the canvas space. We don’t want it to be really visible that is why we will give it an opacity of 15 percent.

Leave 70 pixels in height (count from the beginning of the header) for our navigation, and then create a gray shape, which is 500 pixels in height and will be the base for our slider section.

Step 3 

Fill the space we left blank with a dark-gray, almost black color: #272727.

For this layout, i chose 2 font families. Helvetica in Regular and Bold and League Gothic are the fonts we will be using. If you do not have Helvetica, you can always use Arial, which is pre-installed on windows computers, and barely differs from Helvetica Neue. The font for our logotype is Coffee Script Italic, 36pt. The font for navigation is Helvetica Neue Bold, 12pt. The color used for the font and navigation text is white. We’ll add an almost visible black slash sign, between each navigation link.

Step 4

At the right side of the navigation we will place 2 small “Call to Action” buttons. By using the Rounded Rectangle Tool (U) create an orange-colored shape (#e26424). Apply a soft light gradient overlay effect, with an opacity of 30 percent.

Step 5

We continue our button by adding an inner shadow effect, the blend mode being soft light as well, and the opacity: 75%.

Step 6

One more touch for our button will be a drop shadow effect. Set the size to 2 pixels, the distance to 1px and give it a gray color: #a3a3a3.

Step 7

Finish the button by applying a gradient stroke effect. Start with a very dark red (#491803) and finish with a brighter one (#8a2800)

Step 8

Grab the IconSweets2 free icon set, and grab the “cloud-download” icon and then input some random text near the icon.

Step 9

Result So Far:

Repeat the same exact steps, the only exception is the color of the button base shape, which is now a dark-gray:  (#4d4d4d).

Step 10

Grab the Rounded Rectangle Tool (U) and create a shape of about 340 pixels in height, and 700 pixels in width. Give it the usual dark-gray color: #282828.

Step 11

The rounded corners shape looks plain and too simple, that is why we will be adding a nice ribbon to it. Creating a ribbon similar to the one you can see on the screenshot above is pretty easy, but we will not cover it’s creation as it is beyond the scope of our main tutorial. Webdesign.Tutsplus have published a very good and detailed tutorial on how to create such a ribbon.

Use the Helvetica Neue Bold font in 14pt and add some random text. Find the “globe” icon in the IconSweets2 icon set, give it a gray color, and place it near the left border.

Step 12

Grab any image or picture of 430 pixels in width and 240 px in height. I personally prefer Flickr for images licensed under the Creative Commons licence.  We will write some text near the image, by using League Gothic (24pt) and Helvetica Neue Regular (12pt). Copy the orange button we created in the header, remove the icon and change the text to “Read More” and align it with the text.

Step 13

By using the League Gothic font (72pt), input some text. In my case, it’s a donation-related message. The color of the font must be #272727 and give it a white drop shadow effect.

Step 14

Create 3 rectangles.  Let them be 250×150 pixels and position them accordingly. By using a nice orange color (#dc561d) and the rectangle tool create a simple bar which would connect those 3 boxes. Use the same color to create three vertical bars with triangles, which would cover the left part of boxes.

Step 15

Now start inputting text in the boxes. First box would have some simple text in it. The second would contain a list of items. By using the Elipse Tool (U), create a few dark circles and apply the Gradient Overlay effect you see in the image.

Step 16

Find any payment icon set you would like and grab 4 random icons and place them in the bottom part of the box.

Step 17

Take the Rounded Rectangle Tool (U) and create a shape. Apply a Gradient Overlay effect with an opacity of 20 percent. Give it the same inner shadow and drop shadow effects we have applied to other buttons during the creation of this layout.

Step 18

Grab the “finance” icon from the IconSweets 2 set and then input some text. I used Helvetica in two weights(bold/regular) and 2 sizes (18/12px). Apply the drop shadow effect you see on the image.

Step 19

Create 2 buttons and position them under the second box. By this time, you will be able to create them on your own. If not, refer to previous steps.

Result so Far:

Step 20

We move on to creating another section. It will be really simple and basic. Will consist of a text block, one image and a button. By using the “League Gothic” font, 36px, input “Browse All Charities” and center it.

Step 21

Use the Elipse Tool (U) to create an orange circle. Apply a stroke effect with a darker orange color. Use “League Gothic” to input the date.

Step 22

Duplicate the circle two times so you would get “3 upcoming events”. Use Helvetica to input event names and locations.

Step 23

Grab the “pin” and the “phone” icon from the IconSweets set and give them a really nice, subtle gray color. We’ll be creating four small widgets. For the first two, we’ll be using Helvetica (uppercase/lowercase) of 14 and 12 pixels accordingly.

Step 24

Use the Rounded Rectangle Tool (U) to create a white shape. Apply a gray stroke (#c6c6c6) and then take and cut a screenshot of any google maps location. Place it accordingly.

Step 25

The last thing would be a “box” with social icons. By using the Elipse Tool (U) create 6 equal circles. Five of them must be gray, #c6c6c6 will work perfectly. One circle must be orange, it will represent the “hover/clicked” state.  Finish it by adding a gray button (refer to previous steps for details).

Result so Far:

Step 26

Let’s finish our layout by adding a “footer bar”. It’s nothing complicated. Just a simple, dark gray (#272727) bar which is supposed to contain some copyright information or something similar.

July 26 2012

13:00

Create a Minimal Coming Soon Page in Adobe Photoshop

In this tutorial we are going to create a minimal Coming Soon page using Adobe Photoshop. The trend of using coming soon pages has increased in recent years, as I hardly remember anyone with a splash page in the 2000s. A lot of people and organizations have started using them to give some brief information about their upcoming (website/company/service). This way you can be “prepared” and “ready” for their launch. There is another, equally important, reason behind the coming soon page as well. You can set up a subscription or newsletter form and collect e-mails and use them for your (spam-free!) marketing campaign.

Final Coming Soon Page

Click for full resolution.

Resources for this Tutorial:

Download PSD Here

Step 1

Create a new document 1020 pixels width and 700 high. This size is great for coming soon/error and other similar pages. Make the background a light grey and apply some noise to it (Filter->Noise->Add Noise).

Step 2

Create a 700×400 pixel white shape. Set the Fill to zero and apply any seamless (transparent) pattern.

Step 3

Use Helvetica in two weights (regular and bold) and two sizes (30 and 12pt) place two catch phrases/slogans. The best thing is to write down some info that will describe your upcoming website.

Step 4

By using 12px lowercase Helvetica and icons from the IconSweets2 set, create two horizontal groups of elements. Each element must consist of one icon and one link. I’ll set it with three elements for each row.

Step 5

We move on to creating one of the most important elements in a coming soon page, a countdown counter. By using the Rounded Rectangle Tool (U), create a shape of 140×140 pixels. Apply a Drop Shadow with 15% of opacity.

Step 6

Apply some Inner Shadow. Even if the shape looks blurry at the moment, the Inner Shadow will be visible when we finish the shape.

Step 7

Add a Gradient Overlay effect with the blend mode set to: Soft Light and 55% opacity.

Step 8

Finish the shape by adding a stroke. Set the Fill Type to Gradient and the Angle to 90 degrees.

Step 9

By using the League Gothic font, 92px, input a random number. This will show the number of remaining days until the website launch. Apply some Drop Shadow to the text and numbers.

Step 10

Duplicate these boxes three times and place them accordingly. By using the Elipse Tool (U), you can create small dark circles which would work as dividers for the boxes.

Step 11

Under the countdown widget we will be creating an input form. It will allow visitors to input their email so they can be notified when the site launches. Create the form by using the Rounded Rectangle Tool. Set its color as gray and apply some inner shadow effect.

Step 12

Apply a Gradient Overlay effect. Apply the same blend mode, with an opacity of 20%.

Step 13

Finish the form by adding a gray stroke.

Step 14

We’ll have to finish our “subscribe” widget by adding a button which would submit the information in the form. By using the Rounded Rectangle Tool (U), create a shape which will be the base of our button. Apply some inner shadow effect.

Step 15

We can apply a nice touch to our button by using a bit of Bevel and emboss. This will make the second half of our button a little bit darker, a pretty nice effect. Set the size to 2px, set the opacity for white to zero% and set the opacity for gray to 15%.

Step 16

Apply the same Soft Light Gradient Overlay effect we’ve been using for various elements in this layout.

Step 17

Finish it by applying a stroke effect, with some really dark gray colors.

Step 18

By using the Type Tool and Helvetica font, input some text on the button.

Step 19

Under the button we will place a few social media icons. I grabbed mine from the IconSweets2 icon set. Gave them a really nice bright color. To achieve the “handwritten” effect, we will be using the Journal font. To bend that line, you will have to create a slash and apply the Warp Text feature with an  Arc. It is a lot easier than you can imagine, and it will take you only a couple of seconds to achieve that effect.

Final Result (Click for a Larger Version)

July 18 2012

13:00

Create a Pricing Table using Photoshop in about 20 Minutes

We are used to presenting data using different graphics, modules and tables so that the information is easier to understand. Pricing tables have been, and still are, used by a lot of companies and individuals to display their available plans. It’s pointless to use a pricing table if you only have one plan to offer. But if you have more, then it is a very useful and attractive way of displaying information about each of your plans. We’ll be using Adobe Photoshop to create a pricing table which will only take about 20-30 minutes.

Are you ready?

Pricing Table

Step 1

Create a new 1200x600px document. Our pricing list itself will be 1000x340px but we need some work space that’s why our main document is larger.

Step 2

By using the Rounded Rectangle Tool (U), create a shape of 1000x340px. Apply a barely visible outer glow effect as well as a 1px stroke. Set the stroke color a little bit darker than the color of our shape.

Step 3

We’ll divide our pricing table into 3 sections. The “header”, the “content” and the “CTA” zone.  Our “header” section will only contain the name of the plan. By using the Rectangle Tool (U), create a shape that is 1000pixels wide and 70px high. Give it a dark gray color (#e0e3e3) and apply some Drop Shadow to achieve the effect we would get by applying “Outer Glow”, the only exception is that we can set a direction (by changing the angle).

Step 4

Our Pricing Table will contain 4 plans which you can sign up for. It is a common thing to highlight one of the plans, and mark it as the “Best Deal” or something similar. Use the Rounded Rectangle Tool (U) and create a shape of 250x290px. Your shape must have the same effects applied as our base layer.

Step 5

Repeat the third step, the only exception would be the header. Give it a darker gray color (#d1d1d1).

Step 6

In our pricing plan, we will be using 2 fonts, “Open Sans” and “Helvetica”. Use the Semibold weight of “Open Sans” for the plan names in the “header” section of our table.

Step 7

Use “Helvetica” for the price of each plan. As we want to highlight our “Advanced” plan, we will make the price tag a brighter red.

Step 8

We move on to the “content” section. It will consist of 3 features that you are going to provide your customers. It has a pretty simple structure. We’ll be using “Open Sans” as our font. The numbers are 24pt Bold. The text is 14pt Regular. Each feature is divided by a “dotted line”, but can be easily changed with a simple line.

Step 9

Each plan must have a CTA Button which would allow customers to take an action. Whether it will allow them to find out more, or proceed to pay, the button must be there. By using the Rounded Rectangle Tool (U), create a gray shape and apply a dark gray Drop Shadow effect.

Step 10

Apply the Gradient Overlay effect with the Blend Mode set as Soft Light, and the Opacity: 40%.

Step 11

Finish the button by adding a Gradient type of Stroke.

Step 12

By using “Open Sans Bold”, 24pt, input some text on the button. “Choose Plan” looks good to me. Now duplicate the “content” and “CTA”  sections twice that we have just created and place them accordingly. Refer to the final version if you feel a little bit confused.

Step 13

The “Advanced” plan does not differ much except the brighter price tag and the CTA button. The red button is pretty similar to the gray one, the only exceptions are its base color which is: #ed161c and the stroke colors which you can see below.

Step 14

Change the stroke colors from the gray ones to the following red ones and finish the button.

Final Result


Want To Check Details Yourself? – Download PSD


What do you think about this tutorial? Share your thoughts!

July 16 2012

13:00

Create an All-Purpose Advertisement Banner in Photoshop

In this tutorial you will learn how to create an advertisement banner in a few easy steps. We’ll take you through the process of creating a banner from scratch in a few minutes. We’ll do our best to make it for general purpose so you could use it to advertise almost any project of yours.

Step 1

One of the most basic and common size for ad banners is: 300x250px. Open Adobe Photoshop and create a new document that’s larger than that. I’ve used a simple grunge texture on gray for the background.

Step 2

By using the Rectangle Tool (U), create a dark gray rectangle. As we said, the rectangle must be 300×250 pixels. Apply an Outer Glow effect to it (#343434).

Step 3

Apply an Inner Glow effect as well. Even if it looks blurry at the moment, the inner glow will be a nice touch to our rectangle when we finish it.

Step 4

We will apply a seamless (transparent) pattern to our shape. We want it to be barely visible, that’s why I’ve set the blend mode to: Soft Light and the opacity to 5 percent. The pattern I used is a part of this set.

Step 5

We’ll finish the rectangle with a stroke effect. It must be 1px in size and darker than the base color of our rectangle.

Step 6

Grab any ornamental vector set you can find on the web. There are plenty of them available for free on the internet, with lots of elements. I used 2 identical ornamental shapes I have found on the web, and placed them accordingly. For our headline, we will use the “Bebas Neue” font, 48px. Apply a drop shadow effect to the headline and to the ornamental shapes as well.

Step 7

Grab the Rounded Rectangle Tool (U), set the radius to 2 pixels and create a shape of 260×125 pixels. Apply a drop shadow effect to it. You’ll have to duplicate the shape two times, and reduce the size of the first by 1 percent and the second one by 2 percent.

Step 8

Input some text by using the “Museo Slab” font (#887e7e). Grab any 16×16 px icons from the IconSweets 2 set and place them accordingly. By using the Line Tool (U), create two subtle lines (#e6e6e6) which will work as dividers for the text strokes.

Step 9

By using the Rounded Rectangle Tool (U), create a red shape (#dc4027). This will be the base for our call-to-action button. Apply a drop shadow effect.

Step 10

Apply a subtle inner shadow effect. Set the opacity to 15 percent.

Step 11

Apply a gradient overlay effect with a soft light blend mode applied. Set the opacity to 35%.

Step 12

Finish the button by adding the stroke effect. Set the Fill Type as Gradient so you can apply a darker red color for the bottom part and a brighter one for the “first half” of the button.

Step 13

Use the “Bebas Neue” font again to input some text on the button. It can be whatever you’d like, i chose “Sign Up”. Apply some drop shadow to the text as well.

Step 14


If you wanted to get PSD file, you can get it right here!:



Finish the button by adding some “hand-written” text under the CTA button. Use “Journal” to achieve that handwritten-like effect. It’s really easy to create the arrow as well. You will have to create any shape, like a slash and then use the “Warp Text” feature to achieve the desired result.

May 06 2012

13:00

Recreate Google+ Pages Using Adobe Photoshop

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Google Plus fans out there all know that Google+ got a redesign that makes it prettier and simpler to navigate. We are going to recreate the whole design. Imitating  a design is a way to learn new things and apply it to future projects. What beginner’s will learn from this are how useful Direct Selection Tool(A), Pen Tool(P) and Shape Tool(U) can be in making a website design in Photoshop. If you haven’t added yet 1stwebdesigner into your Google+ circles add it now!.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

As we all know with the Google+ redesign, there is a big white space on the right side that wraps the content, depending on the resolution of the screen you’re using to view it. For this tutorial we’re working with a 1366 x 768 resolution.

Instead of 1366px let’s make a 1400px x 1300px document in Photoshop.

The Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using the Ruler Tool is the Info(Information) Panel. Use the Info Panel to see the ruler information in the information panel. Make sure this panel is visible on the right. If it is not shown you can access this by going to Windows – Info.

As you can see in the Google+ layout the navigation was placed on the left side and the content and chatbox placed on the right. As I mentioned earlier, if you’re working on a higher resolution there will be a big white space on the right side wrapping the content. The white wrapper has a 20px margin from the chatbox. Take a screenshot by pressing Print Screen on your keyboard and paste it in Photoshop and try to measure the width using Ruler Tool(I).

Here is the result of what I measured. Don’t forget to add guidelines in every measurement.

  • Navigaiton: 100px
  • Content: 1035px
  • Chatbox: 212px

For the background fill it with #f1f1f1.

Step 2: Working on Top Header (Links, Google+ Logo, Search, Profile Notification Area )

Links

Using the Rectangle Tool(U) with a fill color of #2d2d2d create a 100% by 30px shape.

Apply this Blending Option:

  • Drop Shadow: #000000

Next, using the Text Tool(T) add the top links and follow the text format as shown in the screenshot below.

  • Active Color: #fff
  • Normal State: #bbbbbb

As you may have noticed, there is a Plus icon and little arrow facing down. Do this by simply using the Pencil Tool(B). Refer to the screenshot below.

Google+ Logo

For the Google+ logo,  just grab a copy of their original logo and place it 27px from the left.

Search Bar

Using the Rectangle Tool(U) create a 512px by 30px shape 57px from the logo with a fill color of #fff

Apply this Blending Option:

  • Stroke: #d9d9d9

Next will be the search button. Using the Rounded Rectangle Tool(U) create a 70px by 30px shape.

Apply this Blending Option:

  • Gradient Overlay: #3079ed, #4d90fe

  • Stroke: #3079ed

Let’s create that search icon. Select Ellipse Tool(U) create a 10px by 10px shape and make the Fill color on the layers panel to 0%.

Apply this Blending Option:

  • Stroke: #fff

Next select the Rectangle Tool(U) and create a 2px by 4px shape with a fill color of #fff. Rotate it to 145 degrees and place it as shown in the screen shot below.

Profile Notification Area

The notification area (or whatever you call it), is aligned with the chatbox. Using the Rounded Rectangle Tool(U) with a Radius of 2px create the following shape with desired sizes mentioned below. Every shape will have a distance of 15px.

  • 1st Shape: 30px by 30px
  • 2nd Shape: 74px by 30px
  • 3rd Shape: 40px by 40px

As you can see the second shape which is the Share Button has an arrow in the middle of the right side of the shape. To create, this we need to modify and add the Anchor Points of the shape.

To do this you must:

  1. Select the Vector Mask of the shape on the layers panel.(You should see a thin black line on the shape)
  2. Select the Direction Selection Tool(A) and click on the black line.
  3. Select the Pen Tool(P). With the help of this tool we can now add or remove anchor points. Also with the help of the Direct Selection Tool(A) we can move the points and change the look of the shape.
  4. Add these anchor points using the Pen Tool(P). The distance of each point is 5px.
  5. Using the Direct Selection Tool(A) move the anchor point 5px to the right. Pull the point(black circle) by 1px to the anchor anchor point.

Apply this Blending Option:

  • Gradient Overlay: #ededed, #f7f7f7

  • Stroke: #c6c6c6


There you have it! We successfully modified and styled the shape. Take note that we will be using this step a lot in this tutorial. I will not walk you through every shape we will be creating later on, so it’s my challenge to you to do it on your own.

Fill the Shape with text using the Text Tool(T) using this format.

  • Arial Regular 13pt #666666

For the Plus icon use the Pencil Tool(B) 2px and for the arrow down just duplicate the one we create earlier and change the color to #909090.

Step 3: Working on the Sidebar (Hangout Button, Chatbox)

Hangout Button

Using the Rounded Rectangle Tool(U) create a 212px by 36px shape with a radius of 2px.

Apply this Blending Option:

  • Gradient Overlay: #f8f8f8, #ffffff

  • Stroke: #d7d7d7


Next we need to create that Hangout Icon. The shape color will be #6d6d6d, as I said, I will not go into detail, just follow the screenshot below to see where I put the anchor points.

When you’re done, create another shape with a fill color of #ffffff.

Now that we’re finished with these shapes. we will be using it again in doing the chatbox so we need to make the shape as custom shape. To do this right, click the shape using Direct Selection Tool(A) and click on Define Custom Shape, make sure to name it appropriately. Do this for both shapes. If we want to use this shape we can find it by using the Shape Tool(U) you should see the shape by scrolling down to the very bottom of the selection.

Lastly add the hangout text

  • Arial Regular 13pt #555555

Chatbox

As you can see in the screenshot above in my layers panel everything is organized by group. I started by creating a shape using the Rectangle Tool(U) with a fill color of #fff and in that shape I apply a stroke #d7d7d7.

Next I add those line separators using the Line Tool(U). The first one is 70px distance from the top and the color is #d7d7d7. Then the rest is the separator for each person who is online or whatever their status is. The distance of each separator is 42px, color #eeeeee, width 194px.

.

Next I add the chat with box. I create a 200px by 26px shape using the Rectangle Tool(U) with the same stroke color and place it on the center 7px distance from the divider. For the chat bubble icon I used the one we created using Shape Tool(U) and change the fill color to #909090. For the text the same text format we did in the share button.

Next I add the y-scroll. I create a 9px by 226px shape using the Shape Tool(U) with a fill color of #cbcbcb. On top of it I add line on every edge except the right side using Line Tool(U), 1px, color #b6b6b6. The shape is placed 1px from the right.

For each thumbnail picture the sizes are 32px by 32px. The distance of the name from the thumbnails is 25px.

Text Format:

  • Arial Regular 13pt #000000 (For your name)
  • Arial Regular 13pt #333333

Next is the status. Each person on my online list has a different status. Some are online, away, idle, busy. I will list the layer styles of each icon for you to follow and create your own.

10px by 10px shape.

Apply this Blending Option:

  • Inner Shadow: #6cd04d

  • Gradient Overlay: #36a226, #50b839

  • Stroke: #40a129

Apply this Blending Option:

  • Inner Shadow: #5dc443
  • Gradient Overlay: #39a529, #4db636
  • Stroke: #2b7c18

For this icon just add that 2 lines using Line Tool(U), 1px, colro #ffffff

Apply this Blending Option:

  • Inner Shadow: #f2c40c
  • Gradient Overlay: #e9a007, #eeb40a
  • Stroke: #a17802

Apply this Blending Option:

  • Inner Shadow: #f6d60f
  • Gradient Overlay: #e89d06, #edb20a
  • Stroke: #9c7402

Apply this Blending Option:

  • Inner Shadow: #dedede
  • Gradient Overlay: #aaaaaa, #c1c1c1
  • Stroke: #8b8b8b

And the last thing we will add is the drop down icon. Just duplicate a copy of the arrow down icon. Below that layer create a 12px by 12px shape using the Ellipse Tool(U) and apply a 1px stroke color #cdcdcd.

Step 4: Working on Main Navigation

I’m sure you have the G+ Freebies Icons now, place it at the center according to the screenshot shown above. The Icons have 35px between them. Also, the distance of the text from the icon is 10px.

  • Tahoma Regular 11pt #a7a7a7

For the more icons just create a 8px by 8px shape using Ellipse Tool(U) and copy the layer style of those icons.

Step 5: Working on Main Content(Page Title, Pots, Tabs, Profile Pic etc..)

To start, create the base layer or the wrapper using the Rectangle Tool(U). The width will be 1035px and apply 1px #d7d7d7 stroke.

Page Title

Create a guideline 20px from the top and from the left. Then, using the Text Tool(T) add the page title. Also grab a copy of the pages icon from the freebies and resize it to 15px by 15px.

  • Arial Regular 20pt #222222

Button

Create a guideline as shown in the screenshot shown above. Next using the Rounded Rectangle Tool(U) with a Radius of 3px, create a 78px by 30px shape with a fill color of #3d9300. Apply a 1px #29691d stroke. Lastly place it 30px from the guideline.

Label it with text Arial Regular 11pt #ffffff. Next create a 13px by 13px shape using the Ellipse Tool(U) make the Fill in the layers panel to 0% and apply a 2px #fffffff stroke on it.

Banner

For the banner create a 890px by 180px shape using the Rectangle Tool(U), place it 20px below starting from the button. Lastly add a 1px #d7d7d7 line above the shape that will cover the entire wrapper.

Profile Picture

First you need to create this guide as shown in the screenshot below.

Using the Rounded Rectangle Tool(U) with the same Radius, create a 260px by 260px shape with a fill color of #ffffff.

Apply this Blending Option:

  • Drop Shadow: #000000

  • Stroke: #cccccc

Create another shape above it using the Rectangle Tool(U) the size will be 250px by 250px align it on the center.

Below that shape create another 250px by 90px shape using the Rounded Rectangle Tool(U) with a fill color of #f9f9f9.

Apply this Blending Option:

  • Drop Shadow: #efefef

  • Stroke: #cccccc

Using the Line Tool(U) create those 1px #cccccc lines as shown in the screenshot below.

For the +1 button I create a shape using the Rounded Rectangle Tool(U) with the same Radius and modify the anchor points except the bottom left.

For the +1 Icon I create it using the Pen Tool(P) just refer to the screenshot below. Then, I apply a 1px Drop Shadow color #621e12.

Next we will create the share icon. Still use the Pen Tool(P) for this one, just refer to the screenshot below. The fill color for the shape is #c1c1c1.

Apply this Blending Option:

  • Drop Shadow: #ffffff

  • Inner Shadow: #000000


For the link icon I used the Rounded Rectangle Tool(U)  and a combination of 4 shapes. 1st 2 shape is 8px by 8px color #e4e4e4, one at the bottom and other one is on the top with a distance of 2px. 3rd shape is 4px by 9px color #f9f9f9 and place it on the center. The last shape is 2px by 5px and place it in the center again. I group it in a folder and rotate it 45 deg. and lastly add a 1px by 6px line using Line Tool(U).

Using Text Tool(T) add the following text as shown in the screenshot below.

  • Arial Regular 13pt #333333
  • Arial Bold 16pt #333333

Tabs

Create a 264px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #fdfdfd and apply 1px #dedede stroke.

For the active tab create a 63px by 30px shape with a fill color of #fcfcfc.

Apply this Blending Option:

  • Inner Shadow: #000000

  • Stroke: #cbcbcb

Add a separator for the non active tabs using Line Tool(U) color will be #dedede, distance 62px.

Lastly add the text using Text Tool(T).

  • Arial Regular 13pt #000000(Active)
  • Arial Regular 13pt #333333

Posts

Create a 48px by 48px using Rounded Rectangle Tool this will be for the thumbnail pic. Next create a shape as shown in the screenshot below the total size is 504px by 584px.

Apply this Blending Option:

  • Drop Shadow: #000000

  • Stroke: #cccccc

Next we will going to add the text. Follow the format as shown in the screenshot below.

Make the +1 icon and share I con as custom shape or just simply duplicate it and apply the same layer style as we did on the share icon. Place it as shown in the screenshot below.

Below the base shape create a 493px by 64px shape with a fill color of #f8f8f8.

Apply this Blending Option:

  • Drop Shadow: #efefef

  • Stroke: #d5d5d5

For the comment text box create a 460px by 30px shape with a fill color of #ffffff and apply a 1px #dddddd stroke. Lastly label it with text.

Sidebar

This part is pretty easy just follow the screenshot below.


Finally we’re done. I know this tutorial is not that interesting because we just copy the Google+ page design. But the point of this tutorial is copying what new or let say a design that you like that you want to know how it is designed on photoshop. I hope beginners who followed this tutorial learn something new and hopefully you can apply it to you future projects. If you have questions, comments and suggestions just drop it below. Also kindly answer this question “If I would make another web design tutorial what would it be?”. Thanks for reading till next time. :)

April 26 2012

13:00

How to Design a Sleek Downloader Interface Using Photoshop

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

I’m back once again with another cool web interface tutorial. Today we’ll be making this sexy file downloader with crisp and clean details. This can be used for web and mobile applications, perfectly cool for smartphones and tablets too!

As you will see there are quite a lot details in here, the whole point and also the hardest part of adding details is to make them noticeable, but not TOO obvious. Make them soft, clean and smooth. Pick colors with not too much contrast and especially play around with the opacity until it feels right.

You’ll also learn how to create a simple pattern in your design with the use of the pen tool.  Patterns can be a key to perfection in your designs. Use them wisely, too many patterns can destroy a design.

Now, let’s see what we are going to make:

As you can see, there’s a lot of detail in there. But the level of contrast and cleanliness is still perfectly balanced.

Alright, let’s start this off!

Step 1 – Building the main shape

First we have to make the base shape of this file downloader.

This shape exists on 4 separate layers.

Reference:

We start off with the “List bg” layer.

Create a (about) 308px by 130px big rectangle with the Rectangle Tool.

Once you have that you’ll need to add some style to that thing!

This is what it’s gonna look like:

Layer styles:

Gradient Overlay:

Stroke:

Inner shadow:

Drop Shadow:

Your shape should look similar to mine by now. You may have noticed the gradient I used in the stroke. This is because of the gradient I had in the background. To keep the contrast even on every spot I had to make that gradient.

Next we’ll make the background for the downloading file.

Reference image:

This shape is also 308 px width, but only 50 px high.

Layer styles:

Gradient Overlay:

Stroke:
 

Inner Shadow:

Drop Shadow:

I made the lines on there with the pen tool. Use the shift button to make perfect 45○ angle lines.

After you made the correct shape, use ctrl + click on the layer thumbnail to load up the selection. Then make a new layer and fill up your pen tool shape with a solid white.

These lines could move from the right to the left when the file is actually downloading to show some activity.

After this, duplicate a few times until the whole thing is filled.

Only thing left for the main shape is the bottom part. This shape makes the whole downloader way more dynamic. It gives it a sort of 3D effect.

Grab the Rectangle tool again and make a new layer called ‘Bottom’ see layer reference image on top for how to stack the layers.

The shape:

The layer styles:

Gradient overlay:

Stroke:

Drop Shadow:

That’s it.  The main shape is there.

Step 2 – Let’s get some content in there

Before we’re gonna add the text and icons, we have to create the yellow progress bar. This bar visualizes the progress of the download.
2 Layers here. The full width progress bar. And the yellow bar on top of it.

The full width bar first.  #343434, pick yourself a nice height.

Layer styles:

Inner shadow:

Drop Shadow:
 

Then, the yellow bar, of course, having the same height.

Some layer styles:

Gradient Overlay:

Inner Shadow:

You can play with some patterns on this or anything you want. Bring out your creativity ;)

That’s it for the progress bar.

2 Things left to do:

  • Fill in the active downloading file
  • Create the list of the files to be downloaded.
The top:

Font: Open Sans download here.

Size: 10 pt.

Light grey color.

Next is the active state of the download.

Layer styles:

Gradient Overlay:

Inner Shadow:

Drop Shadow:

Applaud yourself, you are almost done ;)

Last bits: (For the cancel icons, mine came from the iconsweets icon pack. you can pick your own though.)

That’s it guys. You’ve just made a sexy file downloader! The details look awesome, don’t they? Thanks for following this tutorial and if anything is unclear, feel free to leave a comment!

Final image:

April 23 2012

13:00

40 Creative Examples of Pricing Page Design for Your Inspiration

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

At the moment, we are presenting some excellent examples of effective pricing pages that not only perform their job well, but also add a visual appeal to the overall web design. With the help of an appealing pricing page, you can certainly increase your sales to a greater extent. A pricing page is the first thing that your visitors or potential customers check when they want to sign up for your service. Therefore, the pricing page design along with the way it is displayed can have loads of determining factors on whether those interested visitors sign up or not.


We have previously posted a collection about Pricing Pages in Web Design but in this post we have collected the most creative and amazing pricing pages that we could find. In this round up, you will see how you can design pricing pages that are visually appealing, simple and let your visitors easily identify different types of packages you are offering. Let’s have a look and be inspired!

1. Yast

Simple and minimal design for the pricing page highlighting the personal package which is free and the business package that charges $4 per user per month. For custom package, you can contact them at any time.

Yast

2. Invoicera

This is a very colorful and visually appealing pricing page design. The use of different colors for different packages makes this design a visual treat.

Invoicera

3. 5pmweb

5pmweb makes use of a very brilliant approach to design their pricing page making it stand out in the crowd of dozen of ordinary pricing page designs.

5pmweb

4. Launchlist

Launchlist uses a very brilliant and catchy background for their pricing page design and makes it even more enticing with the graphics and presentations.

Launchlist

5. Volusion

This exclusively designed pricing page not only compares different packages but also highlights their most important and economical package.

Volusion

6. Getsatisfaction

This website has a very minimal kind of design for its pricing page which is good from the customers’ point of view as it helps them to choose the right kind of package for themselves.

Getsatisfaction

7. Ballpark

Ballpark presents four different plans with relevant information; however the same color used makes it difficult to distinguish between different packages.

Ballpark

8. Are My Sites Up?

In this design, you will see the use of different graphical element to add visual appeal to the overall page design while highlighting different packages with the help of different shades.

Are My Sites Up?

9. Zendesk

Among the four packages offered, they highlighted the Plus package as it offers additional features to the customers and they may be interested in testing the free trial prior to ordering.

Zendesk

10. HootSuite

Enjoy the refreshing color combination of this pricing page design along with fine use of typography.

HootSuite

11. LightCMS

A simple, effective design for a pricing page. In this pricing page design, you can see the use of different colors distinguishing different packages and their costs.

LightCMS

12. Business Catalyst

In this design, you can see creativity in the way the pricing of their packages are shown. The design is made for easy comparison between different packages as well as levels.

Business Catalyst

13. VSP.NET

In this pricing page web design, simply two packages are shown and that is one daily package with $6 per day charge and one is a monthly package that is $90 per month.

VSP.NET

14. Harvest

Three well defined and easy to compare packages are presented in this pricing page design with a pleasing design and color selection.

Harvest

15. Strutta

Simple and uncluttered page design that successfully compares two packages and makes selection easier for prospective customers.

Strutta

16. Ronin

Ronin makes use of a simple and elegant color for their pricing page design and highlights its most important package by bringing it to light while also focusing two other packages apart from the free one.

Ronin

17. Goplanapp

A very simple and professional way of presenting their rates and different packages while also highlighting the most affordable package.

Goplanapp

18. Media Temple

Images are added to create visual appeal. Monthly and yearly subscription charges are shown with a very captivating call to action button.

Media Temple

19. Pagelime

Here, they highlight their professional package with fewer charges but with adequate services that makes it an ideal one to pick. Color selection is good and matches with the overall theme of the site.

Pagelime

20. Dropsend

In this pricing page design, Standard package has been highlighted most among four other packages as it is economical and offers a good range of features.

Dropsend

21. Slidedeck

Slidedesk differentiates their packages with different color themes as well as with different content. This is quite a unique approach towards designing pricing page design.

Slidedeck

22. Rocket Theme

A very classy and elegant looking pricing page design that highlight three packages with respect to their cost, number of days the package is valid as well as the entitlements.

Rocket Theme

23. Eleven2

The use of graphics in this pricing page design truly stands out. You can see how all four packages look different from one another though they are the same color.

Eleven2

24. GoSitewave

They just present three packages with their monthly charges that are highlighted at the top in order to make the selection process easier for the customers.

GoSitewave

25. Tivo

This pricing page design goes beyond the ordinary styles of pricing page and presents the packages in a totally different way while keeping the whole selection process easier for their customers.

Tivo

26. Big Cartel

Somewhat simple and ordinary pricing page design, however, it successfully fulfills the purpose of having a pricing page. The top bar differentiates between different packages.

Big Cartel

27. Albumdruck

This exclusively designed pricing page not only compares different packages but also highlights their most important and economical package. Further, eye catchy graphics have been used to add beauty to the overall design.

Albumdruck

28. Github

A huge range of packages are displayed here focusing on charges and important features. The color theme and the way of presenting the packages can be a little bit better.

Plans & Pricing

29. PollDaddy

This pricing page design is indistinct and does not really stand out yet they effectively highlighted their professional package.

PollDaddy

30. AgileZen

This design differentiates their different packages by highlighting their per month charges with beautiful mouse over effects.

AgileZen

31. Basecamp

This is the perfect example of an ideal pricing page design that brings all the important aspects of a pricing page to light. The premium package is highlighted more as the sweet spot.

Basecamp

32. Action Method

A very simple and effective way to let users select their preferred plan either they want to go for the free introductory plan or want to choose a premium plan for additional features.

Action Method

33. Traffik CMS

They did not use a traditional table style to showcase the difference between their different packages rather they simply list down features beneath the every package.

Traffik CMS

34. Openhallway

Simple and elegant design for a pricing page that displays all the important features of all of the packages being offered.

Openhallway

35. Bigcontacts

With the help of beautiful and soothing colors and a nice typography, this simple pricing page design really stands out and makes its place in the today’s collection.

Bigcontacts

36. Sifter

This one is pure eye candy; you will be pleased to look at this pricing page design that is different and unique from all the other pricing page designs in this compilation.

Sifter

37. SolidShops

The standard package is highlighted emphasizing that it fits your needs the most and offers true value to your money.

SolidShops

38. Uploading

They highlighted their lifetime package as the one that their potential clients are supposed to choose along with two appealing call to action buttons.

Uploading

39. SoftLayer

This is somewhat different and unique approach to design the pricing page of a website. This design mainly focuses on the graphical elements.

SoftLayer

40. Brightbox

If you like dark designs then you will simply love this designs style.

Brightbox

April 03 2012

11:00

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.

Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

March 23 2012

10:00

Tips on Designing the Perfect Navigation System for Your Website

Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can be a big turn off for your readers if they aren’t planned well. Although webmasters assume that a simple menu is enough, most of the time yet they forget that a navigational menu has its own requirements. Sometimes a simple to use navigation will do just fine for your website design while at times you will have to click a lot of links into your navigational menu so as to compliment the various branches of your website.

This discussion will pick up some of the obvious forms of websites and then shed some light on how the navigational menu changes for each of them. Hold tight and don’t leave!

E-Commerce Websites

The buzz of today for developed nations and the future for upcoming nations, e-commerce has evolved as one of the most current businesses on the Internet and almost all of them have been able to earn their share of fame during their lifetime.

One common point between all e-commerce websites is how complex they are. No matter how simple a e-commerce portal is, at the end of the day lot of navigational links have to be used so that readers can order multiple items or continue shopping from the cart. This is when it becomes important for webmasters to come up with the perfect blend of simplicity and complexity that keeps readers on that e-commerce portal.

What better example then Amazon when it comes to an e-commerce portal. Amazon has been successful in coming up with a very simple to use navigational menu which leads to almost every category under which the company features products. Also, the search system of Amazon is next to perfect which almost always results into satisfactory queries.

One must understand that it is this two type of navigational system (menu+search) which helps Amazon to keep visitors engrossed.

News Websites

Ah, news websites! They are famous for their content heavy presentation. I am not sure if there is even one news website which I have read thoroughly. The amount of content generated by a news website is enough to confuse readers. And this is when a sorted navigational system becomes important.

Imagine a news website like New York Times with just a top navigational menu that links to Home and few other important categories. Nobody would understand the depth of the website if they used such an incomplete navigational system. It is important to understand that the general perspective of a reader for a news based website is a lot of content with a complex navigational system. So, if you are including a very in-depth navigational system for a news based website then you’re doing things right.

Blogs

Well, which discussion on navigational menus would be complete without talking about blogs? In this section we will target blogs that are content rich. One can argue that niche specific blogs can run with a fewer number of categories so the navigational menu can be avoided in these cases. In this case, we must understand that it is advantageous for niche specific blogs to divide their content into various categories. Now, these categories need to be listed in the navigational menu so that visitors can dig into various forms of content on that blog.

This is where it becomes very important for content rich and niche blogs to have all its major categories listed on every page of the blog so that navigation is a cakewalk.

On the whole, a blog can have following navigational styles to check old content which is not available on the home page:

  • Pagination - This is placed at the end of each page and gives direct links to other pages of the blog.
  • Archive Page - Some A-List blogs use archive pages which can be used to display a complete archive of articles easily accessible from that a single page.
  • Categories/Tags In Sidebar - This is a common feature used by most blogs. A list of categories or tags used by the blog can be shown on the sidebar so that they are easily accessible from every page.
  • Header Menu - This happens to be an obvious form of navigation in blogs. It can be used for linking to the most readily used pages like the Contact and About Us pages. Some blogs use the header menu to link to major categories.
  • Footer Navigation - In the last few years blogs have come up with a footer navigation where a huge footer is used to link back to literally everything on the blog. This footer can be used to connect categories, pages and tags together.

Please understand that it is the format of content and the amount of visitors that will decide what sort of navigation a blog should use. Usually it depends on the blog’s webmaster to do some form of A/B testing to understand what suits the blog the most.

Corporate Websites

Corporate websites can show extensive variations in their style. While some of the corporate websites are used as a platform to represent an already famous company. Such websites basically are the face of the company without any other meaning whatsoever. Such corporate websites keep the customers informed and that is it.

On the other hand there are corporate websites that will keep try to entice new customers. They play a different ballgame altogether but still, at the end of the day, they are corporate websites. The professionalism reflected from these websites is almost always similar.

It is this professional factor that forces corporate websites to include the least amount of navigation links. Usually, a header menu with links to basic pages is all that is required to complete the navigational section of a corporate website. To add the Midas touch a webmaster can use footer based menu if the website has lot of content that can be admired by the visitor. The footer menu will never play down the professionalism factor of the corporate website.

Review-based Websites

Review-based websites cover a lot of area and various niches all in one platform. Usually such websites target consumer oriented products and provide a platform where users can leave comments or reviews regarding a respective service.

The problem with such a website is that due to a huge amount of content which is divided into various niches, it becomes almost impossible to cover all of it in one navigational style. This is when the menu style show in the image below can come in handy.

Review based websites will use huge drop down menus which are almost like a new pop up opening on every mouse over.  This style of navigational menus gives the review based websites ample amount of space to showcase almost every category without making it look congested. White space matters!

Conclusion

Not yet done, folks! But I hope that you have an idea of how important navigational menus are and how they change without us noticing them. See, the point is that navigational menus must not be a point of concern for the website visitor. They must blend with the website and its content in a manner that they look perfectly appropriate with that respective website. Get the idea?

March 19 2012

10:00

50 Fresh and High Quality Adobe Photoshop Tutorials

Waiting for the fresh collection of Adobe Photoshop tutorials? If yes, then your waiting has come to an end. Here we are featuring a good collection of some high quality Adobe Photoshop tutorials for you so that you can learn some new techniques and can polish your Photoshop skills.

Adobe Photoshop itself is quite easy to learn and with the help of tutorials the learning process becomes a fun activity. Enjoy looking into this collection and have more fun in using them for your works. Let us know what you think about this compilation or if we have missed out some cool tutorials, just drop us a line and we will try to include that in our next compilation.

1. Create a Baseball-Inspired Text Effect

Applying texture to a text effect can be a lot of fun. In this tutorial we will explain how to create a baseball-inspired text effect using layer styles, patterns, and brushes. Let’s get started!

Create a Baseball-Inspired Text Effect in Photoshop

2. How to Create a Psychedelic Tiger Illustration

Learn how to create this super cool neon tiger poster in Photoshop! You’ll learn how to get neon colors using Gradient maps and learn some over-painting techniques to bring the whole image to life.

How to Create a Psychedelic Tiger Illustration in Photoshop

3. Create a Semi-Realistic MacBook Pro from Scratch

In the following Photoshop tutorial you will learn how to create a semi-realistic MacBook Pro from scratch. First, you will learn how to use the grid and the snap to grid for an easier workflow.

Create a Semi-Realistic MacBook Pro from Scratch

4. Create a Festive Cocktail Using Photoshop’s 3D Capabilities

In this tutorial, we will explain how to create a festive cocktail using Photoshop’s 3D capabilities just in time for your New Year’s celebrations. Let’s get started!

Create a Festive Cocktail Using Photoshop’s 3D Capabilities

5. Create a Cartoon-Style Graffiti Text Effect

Learn how to create graffiti text from scratch in Photoshop! This tutorial will show you how to use layer styles and finish the effect with a vector-style brick background.

The Avengers Poster in Photoshop

6. Create a Royal Gold Text Effect in Photoshop Using Layer Styles

In this quick tutorial we will show you how to create a royal gold text effect using layer styles in Photoshop. Let’s get started!

The Avengers Poster in Photoshop

7. Create a “Real Steel” Film Poster Inspired Text Effect

In this tutorial, artist will show you the steps he took to Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop

8. Create Realistic Shoelaces From Scratch

In this tutorial we will explain how to create realistic shoelaces from scratch in Photoshop. Let’s get started!

Create Realistic Shoelaces From Scratch in Photoshop

9. Create a Magical Photo Manipulation with Flowery Effect

In this tutorial, you will learn how to create a Magical Photo Manipulation with Flowery Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a Magical Photo Manipulation with Flowery Effect in Photoshop

10. How to Make a Car Advertisement Poster Design

In this graphic design tutorial, we’ll cover the essential advertising workflow. By following along with this Photoshop ad tutorial, you’ll see how to take just a simple stock image and build a pixel perfect artwork around it, while also communicating valuable information about the brand to viewers.

How to Make a Car Advertisement Poster Design

11. Create an “Action” Text Effect

In this quick tip tutorial we will demonstrate how to create a cinematic “Action” Text Effect in Photoshop using layer styles. Let’s get started!

Quick Tip: Create an “Action” Text Effect in Photoshop

12. Create a Mini Planet Using Photoshop’s 3D Capabilities

When most people think about Photoshop, they probably don’t think about 3D. What most people don’t realize, however, is that Photoshop CS5 Extended includes some powerful tools to help you render your artwork in 3D. In this tutorial we will demonstrate how to create a mini planet using Photoshop’s 3D capabilities. Let’s get started!

Create a Mini Planet Using Photoshop’s 3D Capabilities

13. Create a Dramatic Building Explosion Scene

In this tutorial we will learn how to create a Dramatic Building Explosion Scene.

Create a Dramatic Building Explosion Scene

14. Create an Action Packed Movie Poster in Photoshop

In this tutorial we will explain how to create a character-centered movie poster using photo manipulation techniques. We will also explain how add text to give our poster a cinematic feel. Let’s get started!

Create an Action Packed Movie Poster in Photoshop

15. Create a “Transformers” Text Effect Using Layer Styles

In today’s quick tip tutorial we will demonstrate how to create a cinematic “Transfarmers” Text Effect using the layer styles. Let’s get started!

Quick Tip: Create a “Transfarmers” Text Effect Using Layer Styles in Photoshop

16. The Avengers Poster in Photoshop

In this tutorial we will show you how to create the shine effect of The Avengers poster using only Photoshop. We will pretty much play only with Layer Styles and the Brush Tool.

The Avengers Poster in Photoshop

17. Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

Photoshop is a fantastic tool to help 3D artists save time and improve the look of their renders. In this tutorial we will demonstrate how to combine ZBrush materials and lighting render passes to create a stunning metallic textured skull. Let’s get started!

Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

18. Create the Emotional Photo Manipulation Flaming Heart

In this tutorial we will show you how to create a photo manipulation with firing effect. You will learn how to manipulate stocks images together, use brush, masking, work on fire, do some special extracting and retouching techniques as well as adjust colors and lighting to create a beautiful and emotional scene.

Create the Emotional Photo Manipulation Firing Heart

19. How to Create High Quality Metal 3D Text in Photoshop

Most of you probably know those awesome letters that were generated with 3D programs. But what about when you don’t have any particular program and you need to make 3D typography? This tutorial will show you how to create the 3D text shape and give it a high quality metal look using pure Photoshop. Check it out!

How to Create High Quality Metal 3D Text in Photoshop

20. Learn How To Create A Stubby Pencil In Photoshop

In this tutorial we will be showing you how to create a neat stubby pencil from scratch using adobe photoshop.

Learn How To Create A Stubby Pencil In Photoshop

21. Create a Medieval Battle Axe in Photoshop

In this tutorial we will demonstrate how to construct a medieval battle axe in Photoshop. This tutorial will cover several techniques but don’t worry, it won’t be too difficult to follow. Let’s get started!

Create a Medieval Battle Axe in Photoshop

22. Learn How To Create A Photoshop Style Pen Tool Icon

In this tutorial we will be showing you how to make your very own photoshop pen tool icon from scratch, using photoshop CS5. Lets get started…

Learn How To Create A Photoshop Style Pen Tool Icon

23. Create a Mobile App Icon in Photoshop

In this tutorial, we will explain how to design an icon for your mobile device’s home screen. Let’s get started!

Create a Mobile App Icon in Photoshop

24. How to Create a Fan Illustration From Scratching

In this detailed tutorial your will learn how to create a fan illustration.

How to Create a Fan Illustration From Scratching Using Photoshop

25. Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Create an Elephant Sundae Using Photo Manipulation Techniques

26. Create a Surreal Floating Stone Structure Scene

In this tutorial we will learn how to create a Surreal Floating Stone Structure Scene.

Create a Surreal Floating Stone Structure Scene

27. Draw a Character Concept Using Drapery in Photoshop

In this tutorial we will learn how to draw a character concept using drapery in Photoshop.

Draw a Character Concept Using Drapery in Photoshop

28. Create a Dark, Conceptual Photo Manipulation

In this tutorial we will be teaching how to integrate elements from different sources to create a realistic photo manipulation with dark and conceptual elements. You will learn some lighting and blending techniques as well as some interesting post-production tips. Let’s get started!

Create a Dark, Conceptual Photo Manipulation With Stock Photography

29. Learn How To Create An Open Book In Photoshop

In this tutorial we will be showing you how to create a sleek book with a nice leather textured background. Lets get started.

Learn How To Create An Open Book In Photoshop

30. Create a Dynamic Portrait with Flashy Light Effects

Learn how to create your own futuristic portraits with swirling ribbons of light. This Photoshop tutorial will show you how to create light streaks and other high-tech elements that you can incorporate into your own photos!

Create a Dynamic Portrait with Flashy Light Effects

31. Design a Detailed Audio Receiver Icon in Photoshop

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

Design a Detailed Audio Receiver Icon in Photoshop

32. Design an Interesting Human Face Manipulation with Tree Roots Texture

In this tutorial, artist will show you the steps he took to Design an Interesting Facial Manipulation with Tree Roots Texture in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Design an Interesting Human Face Manipulation with Tree Roots Texture in Photoshop

33. Easy Hulk Logo on Illustrator and Photoshop

In this tutorial you will learn how to create Hulk Logo on Illustrator and Photoshop, this is a intermediary tutorial, so it’s not as long and it’s not as hard.

Easy Hulk Logo on Illustrator and Photoshop

34. Make a Colorful Gooey Typographic Design

In this design tutorial, we’re going to create a colorful and liquid-like typographic piece in Photoshop. We will be using the Pen Tool (P) quite a bit, as well as covering some useful digital airbrushing techniques to achieve the final result. Let’s fire up Photoshop and get started!

Make a Colorful Gooey Typographic Design in Photoshop

35. Create a Glamorous Vintage-Style Poster in Photoshop

In this Photoshop tutorial, designer will walk you through a process of creating digital work inspired by older magazine fashion ads. You will learn how to use basic shapes and brushes to create an abstract background, see how layers react to one another with Blend Modes, how to create trendy abstract shapes, how Gradient Maps can be used to influence the overall design and more.

Create a Glamorous Vintage-Style Poster in Photoshop

36. How To Create a Dirty Typographic Blackletter Design

In this tutorial we’re going to create a typographic blackletter layout full of character with dirty textures. We’ll begin by creating the layout in Illustrator before importing everything into Photoshop to bring the design to life with colour, tone and weathered textures.

How To Create a Dirty Typographic Blackletter Design

37. Create a Mythical Fantasy Female Photo Manipulation

In this photo manipulation tutorial, we will use many effects and blending and toning techniques, We are sure you’ll learn something out of it even if you already are a professional.

Create a Mythical Fantasy Female Photo Manipulation

38. Create a Realistic Vault Icon in Photoshop

Learn how to create a realistic Vault/Safe using Adobe Photoshop. We’ll be creating this vault using shapes, blending options and various techniques.

Create a Realistic Vault Icon in Photoshop

39. Realistic smoke effects in your digital print design through Photoshop

In this tutorial we will learn how to create a realistic smoke effects in your digital print design through Photoshop.

Realistic smoke effects in your digital print design through photoshop

Tutorials for Creating Website Layouts

40. Design a Professional Blog Layout in Photoshop

In this tutorial we’re going to walk through designing a professional blog magazine theme in Photoshop. This is an exercise in aesthetics and you’ll learn a bunch of techniques which will improve your skills in Photoshop. Grab a coffee, sit tight and let’s get started!

Design a Professional Blog Layout in Photoshop

41. Create a Classic-Styled Portfolio Design in Adobe Photoshop

In this tutorial we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.

Create a Classic-Styled Portfolio Design in Adobe Photoshop

42. Create A Dark, Clean Website Design In Adobe Photoshop

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

Create A Dark, Clean Website Design In Adobe Photoshop

43. Design a Drupal Business Theme in Photoshop

We are going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this, the first part, we’ll cover basic photoshop techniques, such as styles, slicing, guides, layer structure and much more.

Design a Drupal Business Theme in Photoshop

44. Design a Clean e-Commerce Website Interface in Photoshop

Here we will show you how to create this clean e-commerce website interface in Adobe Photoshop. This tutorial isn’t only filled with many Photoshop techniques but also design concepts that go beyond the how-to part, which I’m sure you don’t want to miss. So let’s get started!

Design a Clean e-Commerce Website Interface in Photoshop

45. Design a Food/Cafe Website Template in Photoshop

Learn how to design a professional and fun website template for a Cafe, Restaurant or Food related website. We’ll be using simple yet effective methods and various photoshop tools to create this beautiful layout from scratch!

Design a Food/Cafe Website Template in Photoshop (+Free PSD)

46. How to create a Business Web Layout in Photoshop

In this tutorial we will learn how to create a Business Web Layout in Photoshop.

How to create a Business Web Layout in Photoshop

47. Designing a Jeweler’s Website in Photoshop

In this tutorial we will be designing a Jeweler’s Website in Photoshop.

Designing a Jeweler’s Website in Photoshop

48. How to Design an Elegant Hotel Website in Photoshop

Here we are sharing a tutorial to design a Hotel/Motel business web layout in Photoshop. This is an easy tutorial and even beginners should be able to follow it.

How to Design an Elegant Hotel Website in Photoshop

49. Design a Textured Email Template in Photoshop

In this tutorial we’ll be learning how to make a Textured Email Template using Adobe Photoshop. To make this template, we’ll be creating a textured pattern from scratch, using various shapes, a wooden texture, blending options and helpful tips and techniques.

Design a Textured Email Template in Photoshop

50. Create a Clean Twitter App Interface in Photoshop

In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes. Let’s get started!

Create a Clean Twitter App Interface in Photoshop

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...