Create a Minimal Coming Soon Page in Adobe Photoshop

Posted in Tutorials, Web Interface • Posted on 24 Comments

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.

Create a Minimal Coming Soon Page in Adobe Photoshop Read More

Create a Pricing Table using Photoshop in about 20 Minutes

Posted in Quick Tips, Tutorials, Web Interface • Posted on 17 Comments

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?

Create a Pricing Table using Photoshop in about 20 Minutes Read More

Create an All-Purpose Advertisement Banner in Photoshop

Posted in Quick Tips, Tutorials, Web Interface • Posted on 4 Comments

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.

Create an All-Purpose Advertisement Banner in Photoshop Read More

How to Recreate Tumblr’s Layout Using Adobe Photoshop in 10 Minutes

Posted in Tutorials, Web Interface • Posted on 3 Comments

In this tutorial we will be re-creating Tumblr’s layout. Keep in mind that we do not want to copy their design with bad intention, but only to develop our skills and would like to see if we could achieve an exact, or at least a similar web layout.

This tutorial is meant for beginners, those who are looking to grasp the basics of Photoshop on how to create web layouts. By the end of this tutorial, you will have a good understanding of how Blending Options can almost solve anything!

What are you waiting for? Let’s begin!

How to Recreate Tumblr’s Layout Using Adobe Photoshop in 10 Minutes Read More

Design an Elegant Calendar Using Adobe Photoshop in 15 Minutes

Posted in Quick Tips, Tutorials, Web Interface • Posted on 3 Comments

In this tutorial we are going to design a nice, minimal calendar widget in Photoshop. We are going to use some really easy techniques to achieve a beautiful final result. By combining some gray, black, and variations of different light colors, and a nice subtle texture, we will try to give the interface a grungy, minimal look.

Design an Elegant Calendar Using Adobe Photoshop in 15 Minutes Read More

How to Create an Infinite Scrolling Gallery in 10 Minutes

Posted in Coding, Tutorials, Web Interface • Posted on 25 Comments

Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.

How to Create an Infinite Scrolling Gallery in 10 Minutes Read More

Recreate Google+ Pages Using Adobe Photoshop

Posted in Tutorials, Web Interface • Posted on 5 Comments

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

Recreate Google+ Pages Using Adobe Photoshop Read More

How to Design a Sleek Downloader Interface Using Photoshop

Posted in Quick Tips, Tutorials, Web Interface • Posted on 6 Comments

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.

How to Design a Sleek Downloader Interface Using Photoshop Read More

How to Design a User-Interface Element in Photoshop

Posted in Tutorials, Web Interface • Posted on 9 Comments

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.

How to Design a User-Interface Element in Photoshop Read More
23.20.77.156 - unknown - unknown - US