Michael John Burns

Role: Designer / Design Guru

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

Skeleton Boilerplate: Learn How To Convert Artthatworks From PSD To HTML

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 52 Comments

Howdy Folks! In this tutorial you will learn how to convert Artthatworks (if you want to know how to create this design in Photoshop check here!)  from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently. I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right? Well then get ready and let’s get started.

Skeleton Boilerplate: Learn How To Convert Artthatworks From PSD To HTML Read More

45 Insane Game Website Designs for Your Inspiration

Posted in Inspiration, Web Interfaces2 years ago • Written by 17 Comments

We have already covered hand-drawn websites, websites with unusual navigation, travel agency websites, and a lot more! You know what’s missing? Game website designs!

In case you didn’t know, websites about games are becoming a thing, and it’s one of the most profitable niches out there. If you are passionate about gaming and you want to share news, stories, and opinons about your favorite console and games, then this roundup is perfect for you. Whether you want to design one or you’re simply looking for great designs, have fun!

45 Insane Game Website Designs for Your Inspiration Read More

Media Queries Tutorial – Convert Burnstudio into a Responsive Website

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 5 Comments

Howdy Folks! If you’re following the series, we have converted Burnstudio Design Agency from PSD to working HTML/CSS. We have discussed how we will markup the HTML and how we will style it using CSS. Now, in this tutorial I will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports.

By the end of this media queries tutorial you will learn how to convert any website into a responsive website.

Let’s get started!

Media Queries Tutorial – Convert Burnstudio into a Responsive Website Read More

PSD to HTML Tutorial: Code a Photoshop File to a Working Website

Posted in WordPress2 years ago • Written by 33 Comments

Howdy, folks! In this PSD to HTML tutorial you will learn how to code the Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop. I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.

Are you ready? Let’s get started!

PSD to HTML Tutorial: Code a Photoshop File to a Working Website Read More

Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop

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

Hey Guys! Were you ever asked to design a Design 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!

Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop Read More

Learn How to Quickly Create Tasty Social Icons using Photoshop

Posted in Icons, Tutorials2 years ago • Written by 17 Comments

In this tutorial I will show you how to create Tasty social Icons in Photoshop. We will be covering what’s new in the Shape Tools options panel which is the new Stroke. Using this new feature we can now easily make stitches and we can adjust it whatever we want.

For those who don’t have Adobe Photoshop CS6 yet you can download the beta on their official website. But if you’re excited to do this and you don’t have time to download Photoshop CS6, you can still accomplish this tutorial by following the simple instructions.

So what we are waiting for? Let’s get started.

Learn How to Quickly Create Tasty Social Icons using Photoshop 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

Create a Web Hosting Landing Page in Adobe Photoshop

Posted in Tutorials, Web Interface3 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 Interface3 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 Interface3 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.234.200.85 - unknown - unknown - US