By Carl Heaton on

In this Photoshop website banner tutorial, I am trying to show how to make simple banner which presents Responsive Design website in few steps.

In this Photoshop website banner tutorial, I am trying to show how to make simple banner which presents Responsive Design website in few steps.

Step 1

Open Photoshop File-> New and set width-600 height-350.

web courses bangkok photoshop banner responsive design

Step 2

Go to iconfinder.com

web courses bangkok photoshop banner responsive design

Step 3

Search for iPad, iPhone and Desktop one by one and download them. Here are the images that I downloaded and put together.

web courses bangkok learn photoshop banner responsive design

Step 4

Import them into Photoshop new file that we opened.

photoshop website banner tutorial

Step 5

Go to webcoursesagency.com which is responsive website. Click PrtScr button of your keyboard to capture screenshots. After that File->New Edit->Paste.

You repeat this action 3 times resizing your browser to fit in Desktop, iPad, iPhone. In the end, you will have 3 images shown below.

photoshop website banner tutorial

Step 6

Next step is you import these 3 images into our main file that we have. Here it’s how it looks:photoshop website banner tutorial

Step 7

Now we have to put them on the screen of desktop, iPad, iPhone to make them look like displaying on these. Drag, cut and resize them to fit in screen sizes of them.photoshop website banner tutorial

Step 8

I still don’t like the way it was positioned. You can position it however you like, but I changed the positioning.web courses bangkok learn photoshop banner responsive design

Photoshop Website Banner Tutorial – Doesn’t it look nice and clean?

If you are interested in learning making banner like this, please contact us here.

 

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Do you have ideas you want to grow?

We run design courses and here in Bangkok that will
bring life to your ideas.

tick

20+ courses taught by industry experts trainers. Learn how to create a website from scratch, a full branding guideline or how to master SEO.

tick

Now you can learn online and all our courses with come with fantastic worksheets, video tutorials and you get as much support as you need.

tick

We are a fully accredited school by the Ministry of Education and soon we will offer a full Education Visa allowing you stay in Thailand.