How to Create an Infinite Scrolling Gallery in 10 Minutes

Posted in Coding, Tutorials, Web Interface2 years ago • Written by 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 Interface2 years ago • Written by 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 Interface2 years ago • Written by 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 Interface2 years ago • Written by 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

Create a Classic-Styled Portfolio Design in Adobe Photoshop

Posted in Quick Tips, Tutorials, Web Interface2 years ago • Written by 5 Comments

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:

Create a Classic-Styled Portfolio Design in Adobe Photoshop Read More

Create A Sleek Music Player In Adobe Photoshop

Posted in Tutorials, Web Interface2 years ago • Written by 8 Comments

In this tutorial you’ll learn how to make a beautiful music player in Adobe Photoshop. It is important that you take the time when you are designing and do not rush things. I focused on the details so I invite you to look at every little thing carefully and think about why I did it and how you can learn from it! Good luck!

Create A Sleek Music Player In Adobe Photoshop Read More

Create a Web Hosting Landing Page in Adobe Photoshop

Posted in Tutorials, Web Interface2 years ago • Written by 8 Comments

In this week’s tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial.

So let’s get started!

Create a Web Hosting Landing Page in Adobe Photoshop Read More

Snickles: Create A Modern Business Template In Adobe Photoshop

Posted in Tutorials, Web Interface2 years ago • Written by 3 Comments

Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!

Snickles: Create A Modern Business Template In Adobe Photoshop Read More

Create An eCommerce Landing Page In Adobe Photoshop

Posted in Tutorials, Web Interface2 years ago • Written by 8 Comments

In this week’s tutorial we are going to create an eCommerce landing page using Adobe Photoshop. This tutorial is intended for new designers who are planning on designing an eCommerce template. So what are we waiting for? Ready your workspace and let’s get started.

Create An eCommerce Landing Page In Adobe Photoshop Read More
54.197.189.165 - unknown - unknown - US