Adapt a print design for a web banner in Adobe Photoshop – EP 32/33

Avatar Gareth David | January 7, 2018 414 Views 1 Like 0 Ratings

1 Rate it

In this tutorial I am going to discuss and demonstrate how I took a finished print design and from that created a digital web banner design to advertise the book online.

Now the idea of this exercise is for you to experience how we can adapt a print design and export for web.





00:01:30 - Create a new document

00:02:26 - Bring creative in from book cover

00:08:49 - Superimpose cover design onto book photo

00:12:49 - Place book into banner as a smart object

00:14:55 - Ad type

00:18:15 - Create button




T - Type tool

V - Move tool


cmd (Ctrl PC) + A - Select all

cmd (Ctrl PC) + C - Copy

cmd (Ctrl PC) + V - Paste

cmd (Ctrl PC) + T - Free transform

cmd (Ctrl PC) + ; - Show guides

cmd (Ctrl PC) + T - Free transform

cmd (Ctrl PC) + G - Group layers

cmd (Ctrl PC) + S - Save document


Press & hold cmd (Ctrl PC) + click - Select multiple individual layers


Press & hold cmd + D + press enter - Deselect type (with type tool active)


Press & hold alt + shift + click & drag - Scale object (with free transform tool active)


Press & hold shift + click & drag - Scale object (with free transform tool active)


Press & hold alt + click & drag - Quick duplicate object (with selection tool active)




In this video tutorial, I will be using Adobe Photoshop CC 2014 for mac. Almost all of the principles demonstrated and covered will apply to future and previous versions. Some differences may apply if you are using a previous or future version.



Tutorial by GD.
Follow for future tutorials & news.

1 Rate it

Written by Gareth David

  • Gareth David Tutorials 2019