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

October 05 2013


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


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.


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!

June 24 2013


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+ 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.


  • Monthly: $19
  • Yearly: $180


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.


  • One time membership: $1,595


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.


  • 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.


  • Monthly: $9.99
  • Annual Membership: $99.99


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.


  • Monthly: £9.96
  • Annual Membership: £99.58


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!


  • Annual Membership: $179


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.


  • 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.


  • Yearly: $49.99


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.


  • Yearly: $99.99


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.


  • Monthly: 24.95
  • Yearly: $199


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.


  • 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.


  • 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!

Sponsored post

March 22 2013


Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]

Sup folks, it’s Mike here again, your design guru and this is the third part of our Basic Web Design Video Course. This time we are going to completely markup the HTML using the tags that we have learned in the previous videos. After that we are going to style it using CSS. Also, we are going to cover CSS reset, Clearfix Hack and new CSS3 properties to solve the most common issues encountered when you are starting to learn web design.

Buckle up and let’s get started.

Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles

PSD Template Download - HTML/CSS File DownloadDemo

Final Product


Complete HTML Markup

Applying CSS Styles Part 1

Applying CSS Styles Part 2

Finally, we’ve completed the markup and styled our very first layout. Always remember to reset your CSS before styling the whole layout and apply CSS3 box-sizing to all the elements. Also, if you encounter some issues with things like the wrapper and posts just apply the Clearfix Hack.

So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestions regarding the videos and for the next part to be covered feel free to mention it below. Thank you!

January 27 2012


Create a Classic-Styled Portfolio Design in Adobe Photoshop

Howdy, today 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.  Here is what we will be making:

Resources for this tutorial

  • Icons from Iconsweets
  • Sample images for the center image
  • PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document

  • Start by creating a 1600px x 1600px 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 + ; or Ctrl + H
  • The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
  • Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
  • So repeat the step again twice, but now with the value of: 640px and 960px.
  • So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
  • Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider

We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.

  • I used the one above at 20% opacity.
  • Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
  • Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

  • Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
  • Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
  • Hit OK and there is your pattern.
  • Opacity = 3%.
  • Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
  • To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider

So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal   Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool.  The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow   Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

  • Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
  • For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
  • Add another pattern overlay with the same pattern.
  • Opacity is about 15%.

Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow   Inner Shadow Color Overlay

  • Just a solid black #000000
  • Blending options right arrow.

Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content

  • The content starts with a 3 column showcase of text about your website.
  • If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
  • I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
  • Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
  • The lorem text also is open sans, but now it´s 12px.
  • Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

  • Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
  • Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow Inner Shadow    Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer

First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4.  That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!

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.
No Soup for you

Don't be the product, buy the product!

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