Create a Slick Video Player UI in Photoshop

Create a Slick Video Player UI in Photoshop

In this Photoshop tutorial, I’m going to show you how to build a clean and sleek streaming video player user interface. Along the way, you’ll learn some popular effects and techniques often used in modern web design. We’ll use tools like the Rectangular Marquee Tool, Horizontal Type Tool and Rounded Rectangle Tool and we will work with layer styles, which gives us flexibility.

Continue Reading

Design a Textured “Coming Soon” Web Page in Photoshop

Design a Textured “Coming Soon” Web Page in Photoshop

This web design tutorial will show you how to make a simple “coming soon” web page that has a nice background texture and a slick web form that you can easily adapt into contact forms, newsletter signup pages, and more. You will witness several web design techniques such as creating textured backgrounds, creating light rays, making illustrative clouds, and more.

Continue Reading

Create an Extremely Simple Dark Web Design in Photoshop

Create an Extremely Simple Dark Web Design in Photoshop

This Photoshop web design tutorial will walk you through the process of making a clean, modern, dark-themed website layout from scratch. The layout features an almost pitch-black color theme with some bright, glowing elements for contrast.

Continue Reading

Make a Simple and Modern Web UI Button in Photoshop

Make a Simple and Modern Web UI Button in Photoshop

This beginner-level web/user interface design tutorial will walk you through the creation of a popular style of buttons that can be used in a variety of situations, such as in call-to-actions, common user tasks such as submitting a web form, and buying products from your e-store. In addition to the creation of the graphic in Photoshop, we will go over the HTML and CSS needed in order to make the design fully functional.

Continue Reading

Code a Vibrant Professional Web Design with HTML5/CSS3

Code a Vibrant Professional Web Design with HTML5/CSS3

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Continue Reading

Create a Vibrant Professional Web Design in Photoshop

Create a Vibrant Professional Web Design in Photoshop

Developing a workflow that lets you create web layouts quickly and easily while still satisfying your clients’ needs is crucial. In this Photoshop web design tutorial, I’ll show you a way to create a slick home page layout in the fastest time possible and with minimum web design skills. Let’s go!

Continue Reading

Create an Elegant Patterned Web Design in Photoshop

Create an Elegant Patterned Web Design in Photoshop

In this Photoshop web design tutorial, we will create a simple and elegant web layout of a portfolio site. We will create and use patterns throughout the design to give it that extra bit of class. We’ll use a variety of techniques, including creating patterned drop shadows, applying highlights with the Brush Tool, creating a basic button for the navigation bar, and more.

Continue Reading

Create a Web Application Website Design in Photoshop

Create a Web Application Website Design in Photoshop

In this web design tutorial, I will show you how to create a layout for a web app’s website using Photoshop. We will create all the popular components of a web application website, like a "featured" area for a short description of the app, call-to-action buttons, screenshots/videos presentation areas to show the users how the app looks like and what it can do, a "features" area to present product features, and more.

Continue Reading

Create an Elegant Portfolio Web Design in Photoshop

Create an Elegant Portfolio Web Design in Photoshop

In this Photoshop web design tutorial, I would like to show you how to create a clean and elegant portfolio web layout that has numerous areas for common content types such as an area that displays a blog post excerpt, a nice image slider for featured works, social media information, and a thumbnail gallery. We will cover plenty of professional-grade web designing techniques in this Photoshop tutorial.

Continue Reading

Create a Modern and Sleek Blog Design in Photoshop

Create a Modern and Sleek Blog Design in Photoshop

This web design tutorial will show you the process of designing a sleek, modern, dark-themed blog layout. We will be creating the design of the front page of the blog. We will use basic web design techniques using familiar Photoshop tools such as the shape tools, guides, layer styles, and the Brush Tool. You are encouraged to explore and modify the examples to tailor the design to suit your needs.

Continue Reading

Make a Simple and Slick Accordion Menu in Photoshop

Make a Simple and Slick Accordion Menu in Photoshop

In this Photoshop tutorial, I am going to show you how to visually design a simple accordion menu for use as a content widget in a web design or as a "mini-website" (inspired by Tim Van Damme’s work). We will just use basic tools and techniques, and what I am aiming to accomplish is to share some awesome methods for creating web design elements in this sort of style and theme.

Continue Reading

Make a Stylishly Elegant Portfolio Web Design in Photoshop

Make a Stylishly Elegant Portfolio Web Design in Photoshop

I am going to show you how to design a portfolio web layout in Photoshop that you can use to show off your work on the web. In particular, this tutorial deals with the importance of visual hierarchy when designing a web page, and the message that a portfolio sends out in the graphical elements that compose it. I’ll explain how a textured layout can be realized using Photoshop patterns that we will create ourselves, as well as some other professional-grade techniques.

Continue Reading