Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
This course is a series of tutorials aiming to solve the "real world" problems graphic designers face in their day-to-day client requests.
All the tutorials on this course offer practical demonstrations of how to use the Photoshop and Illustrator software in your design business.
Although the tutorials are practical examples of work a graphic designer does, they are also fun, impressive examples of what you can achieve with this powerful software.
|Section 1: Introduction|
An introduction to the course explaining the similarities between Adobe Photoshop and Illustrator.
The two documents used in this introduction – the PSD and the AI – are included as downloadable materials!
|Section 2: Beginner Photoshop|
How to increase blue and color into a sky. You can do this which any sort of sky – dull, cloudy, white, grey, blue, everything.
Using the Layers palette and the Gradient Tool.
Any questions? Just ask :)
Original JPG and PSD from video available as Downloadable Materials to this Lecture :)
How to add a beautiful red and orange sunset to an otherwise gray sky.
Increasing contrast to improve a product shot with curves in Photoshop.
|Section 3: Intermediate Photoshop|
Images can be improved by increasing contrast, increasing saturation, cropping and by employing a host of other Photoshop tricks.
Increasing the contrast of an image means to make the lighter parts of a picture brighter and the darker areas more dark.
There are many ways to increase the contrast of an image in Photoshop – you can go Image > Adjustments > Brightness/Contrast… for example. However, I always like to use Curves as they give you more control. So, go Image > Adjustments > Curves… (Cmd/Ctrl-M).
With Curves you can quickly click the “Auto” button which will apply an automatic color correction. This may well improve your image’s contrast in one hit. But you can further adjust an image’s contrast by creating an “S” bend with the curve:
Here you can have more control over the image as you can lighten or darken specific mid-tones of the picture.
Bumping up the saturation
One very “cheap and cheerful” way of improving pictures in Photoshop is to simply increase the saturation. Go Image > Adjustments > Hue/Saturation…
As in the image above, I like to increase the saturation of images a little bit to make them “jump out” of the page at you. Of course, whether you use this technique will depend on the photo. It’s not generally used with photos of people
Cropping photos really is an art. When you crop an image you can hone in on the focus of the picture more. You can also take out distracting or irrelevant elements. Cropping can also be used to “straighten up” an image (see video).
To crop in Photoshop you can either use the Crop Tool (C) from the Tool Bar and click and drag. Or, as in the video, you can use the Free Transform Tool (Cmd/Ctrl-M) and distort the layer within the frame.
Cropping has the added benefit of really pissing off photographers!
Adding a blue sky
Many landscape photographs can be improved by adding some blue to the sky – even if the sky is cloudy!
To do this in Photoshop first you need to create a new layer (Cmd/Ctrl-Opt/Alt-Shift-N). Then run a gradient down from the top of blue or black to transparent and then play around with the layer’s opacity and blend mode in the Layers palette.
You can see this in the above video or here is an older video I made about how to make a deeper, bluer sky in Photoshop.
Some of the above effects really depend on the type of image you are transforming. For example, increasing saturation, contrast and sharpness as well as adding a blue sky are more likely to work with landscape photography. However, if you are dealing with portrait photography, blurring can be particularly useful.
If you are trying to get rid of blemishes on skin you may like to try Filter > Blur > Surface Blur… But go easy, you may like to add this to a duplicate layer and alter the opacity of the layer so that the results aren’t too much.
There are many other ways you can turn bad portrait photos into beautiful images.
Original PSD from video available as Downloadable Material to this Lecture :)
Most pop art pictures in the public’s imagination contain a photograph that has been reduced to only two tones, black and white, and then colored in, for example Andy Warhol’s Marilyn pictured below.
The best way to do this is to go Image > Adjustments > Threshold in Photoshop. Move the slider until you get the best result. See below the picture of Rihanna here:
Flat colours should then be added on layers above your black and white background. Set these layers to Multiply so that the black shows through. Pick no more than about four or five quite vibrant colours. It was quite good to get the background cyan in the above picture of Rihanna. More pop art images here.
However, other effects can be achieved by reducing a greyscale picture to four or five tones instead of just two. Go Filter > Artistic > Cutout and choose the number of tones you want. Then they can be coloured up by going Image > Adjustments > Hue/Satuation, checking the Colorize box, putting the Saturation back up to the middle point and playing around with the Hue. See George W Bush below.
I also added those little dots favoured by another famous pop artist – Roy Lichtenstein who’s famous “Whamm!” image you can see below:
To achieve this I had to add a “clouds layer”. Click the small black and white squares by the foreground and background color on your Tools palette to default the colours (or press D) and go Filter > Render > Clouds on an empty layer. This is a handy way to get something to play around with when you’re setting textures generally.
Then go Filter > Pixelate > Color Halftone. I chose the smallest dot, 4 pixels wide. The layer is set to Multiply at 10% Opacity – just enough to see it.
The image below of Kanye West was created by using the above techniques.
If you spend anytime designing, you’ll know that cut out images or shapes are more interesting than square or rectangular images. Have a look at the two flowers below, which one makes the most impact?
Cut outs look great. Just do a Google image search for “product” and you’ll see that the advertising industry has cottoned on to this.
I give you two ways (although there are many more): an easy way and a hard way.
Cutting out with the Magic Wand tool (W) in Photoshop
The Magic Wand in Photoshop selects a consistently colored area without having to trace an outline. There are a number of tools that do the same thing like the Background Eraser Tool as well as the Magnetic Lasso Tool but I find the Magic Wand better.
In order to control which pixels the Magic Wand selects you change the Tolerance. A Tolerance of zero selects only the most identical pixels to where you have clicked (likely to be a very small part of the image); a higher number for the Tolerance selects parts of the image that are less and less similar to the pixel you clicked on; and a Tolerance of the maximum 255 selects all pixels that are completely different to the pixel you clicked on (the whole image!)
In the case of the above image a Tolerance of 100 was sufficient to select the sky.
Once the background is selected is can be deleted. Or in order to select the giraffe and not the sky or vice versa, inverse the selection (Select > Inverse: Cmd/Ctrl-Shift-I).
You may want to Feather the selection at this point (Select > Modify > Feather… Feature Radius of 1 or 2) which will blur the edges of the cut-out sightly.
Cutting out with the Path tool (P) in Photoshop
Unfortunately, not all images, like our friend the giraffe above, are as easy to cut out. Our other example is of a figure with a differing background which is virtually impossible to select by way of some cool Photoshop trick. In this case you just have to trace round the object manually.
The best way to do this is with Paths which are Bézier curves and defined by mathematical equations (named after Pierre Bézier, mathematician and engineer who developed this method of computer drawing while working for Renault). I really could write a lot about how to use Paths in Photoshop, Illustrator and, indeed InDesign but the best way to learn how to trace with Paths is to teach yourself.
Basically, you click once where you want to start and then click on the next point along and drag to get the curve you want. You then carry on if your next curve is going to “follow on” from the last curve, if not, Option/Alt-click on the end of the Path in order to start again with a straight line.
Above you can see (almost) how I traced around the figure and deleted the background. You may get a better idea of how Paths work by watching the video.
Further advice on cutting out
One mistake I always see people make with cut-outs is to forget to bump up the contrast. The figure or object you’ve cut out may have contrasted well against the background originally but now the backgrounds gone it usually needs a bit more.
What you can do
Are you missing out by not putting enough cut outs into your designs and websites? I’m always trying to use cut outs as much as possible on websites because they are so much more likely to be clicked on.</p>
|Section 4: Web graphics|
Even though the book does not physically exist, the image of a real book creates more of a desire in your website’s visitors or your potential customers.
So, how do you do it?
First things first – download a book image
There are some great free images of a blank white book out there. But if you click below you can download two Photoshop documents I made for this tutorial which include the book facing both ways as well as Paths so you can color the books as you wish.
Adding your title
Create your title using the Type Tool (T) in Photoshop.
Choose a nice typeface that goes along with the subject of the book. Spend some time on making the title look good. And make it big so it’s at least as large as the book image – you can scale it down later.
Now copy that type layer and rasterize it.
Why copy the text layer? If you’ve made a mistake or want to change it, at least you have an editable layer so you’ve not lost all your formatting.
Transforming the title to the perspective of the 3D book
With the layer containing your rasterised title selected, go Edit > Free Transform (Cmd/Ctrl-T). This brings up a box for scaling and skewing layers in Photoshop.
Essentially you need to grab hold of the corners of the box to transform the object. In order to pull out one of the corners without affecting any of the other corners you need to hold down Command (Mac) or Control (PC) while dragging. If you hold down shift as well it will constrain the drag to be straight, either vertically or horizontally. This is what we’re doing here:
Once you’re happy that the title looks congruent with the perspective of the 3D book background, hit Return.
Changing the color of the book
Create a new layer (Cmd/Ctrl-Opt-Shit-N) above the book image but beneath your title. Cmd/Ctrl-click on the Path that I have made to create a selection from it in the Paths palette.
Then you can select a color by clicking on Set Foreground Color in the Tool bar and go Edit > Fill… in your new layer. Or, as I demonstrate in the video, you can fill the selection with a radial gradient. Once done, change the Layer Blend Mode to Linear Burn in the Layers palette.
Make your e-book a color that fits in with the design of your site.
Once you are satisfied with the color and the text on the cover, reduce the image size and Save for Web and Devices.</p>
When you’re designing a website for yourself or a client, you should take care on all the little details – including the favicon!
What is a favicon?
A favicon (or favorite icon), also known as a shortcut icon, is an image file containing a small icon associated with a particular website. Below are a few you may recognise:
And look at that one at the end there! Ugly isn’t it? You don’t want to be the owner of that website. So read on …
Create your favicon in Photoshop or in any other image editor
Although there are free favicons you can download in the web, it’s always best to have an original favicon for your site. It’s good to design the logo of a site with the favicon in mind because you need to isolate an element from the logo that is square.
I have an extra symbol on my logo which I use for the favicon:
All I have to do is create that as a 16 x 16 pixel or 32 x 32 pixel square document in Photoshop:
Now, save the image that will become the favicon as a GIF or a PNG-8 or a PNG-24. The important thing is that it has a transparent background. Once saved as a “favicon.png” amend the file name to “favicon.ico” – even though it isn’t technically an ICO file.
However, if you want to create a real ICO file direct from Photoshop you need to download this ICO file format plugin for Photoshop or you can use an online favicon generator. But I find it works fine appending the file extension from GIF or PNG to ICO – however I believe this may not work with some really old versions of Internet Explorer.
Once you have created the “favicon.ico” you need to upload it to the root of the server – where your index.html or index.php, or, if you’re using WordPress, this is where all the “wp-” files and folders are.
Even if, in the next step, you specify your favicon.ico to be in another directory I would still advise you to also put it in the site root. This is because social sites, like Google+, when your posts are shared, will just look for a favicon.ico on the root and will put up an ugly default one if they can’t find yours.
HTML to get the browser to recognize your Favicon
In order to get your favicon to appear in the browser, you have to put the following in the
If you are using WordPress you can put the above in the header.php file between the
My favicon’s not updating! What do I do?
Once you’ve changed your favicon it often stubbornly refuses to show and the browser uses the old cached version instead, even after refreshes. If this happens simply paste your favicon’s address in the browser (eg.http://robcubbon.com/favicon.ico) and then hit refresh. After this the favicon should show up correctly.
How to create graphics in Illustrator import them into Photoshop and export a web graphic (GIF).
An explanation of how Vector Smart Objects inside Photoshop documents and how to edit them back in Illustrator.
Any questions, please ask me! :)
|Section 5: Intermediate Illustrator|
Illustrator Quality Stamp document is available as a supplementary download to this course.
Pure Illustrator tutorial about creating a "quality stamp" with concentric circles, text on a path and an illustration of a thumbs up sign.
Any questions, ask here :)
Logo from this video is available for download as supplementary material to this course.
This is about how to manipulate the text of a font in order to create a logo in Adobe Illustrator.
The text in the logo above has had its corners rounded and other changes made to make it look more attractive and original. Here is the word written out in the base font (Sansumi).
In this particular example I went for a very small radius for the round corners and you can only barely see the difference. But I think it makes the logo look more recognisable and modern.
By rounding the corners or by making changes to the letters in the logo, you can make a “custom font” for your client’s logo.
Turn text to outlines
While creating a logo, it is always better to work with vectors. So, in Illustrator with the text selected, go Text > Create Outlines (Cmd/Ctrl-Shift-O) to turn the text into an editable vector. Then go Object > Ungroup (Cmd/Ctrl-Shift-G) if you want to move individual letters around.
Illustrator tip: always keep a version of your text “live”, that is, always have the logo typed out in your base font for reference. This is because if you have to got back to change the spelling or captalization you don’t need to relocate the font and/or formatting.
Creating rounded corners in Illustrator
To create rounded corners in Illustrator, with the object selected, you need to go Effect > Stylize > Round Corners…
In the resulting dialog box, check the preview box, and alter the radius until the desired roundness of the corners has been achieved. After clicking OK, go Object > Expand Appearance which then draws a path around your newly rounded corners.
However, Illustrator’s best efforts for rounded corners are seldom perfect, so you will find you’ll have to go through the logo to do a bit of fine tuning.
Editing objects and shapes in Illustrator
So, with the type converted properly into outlines, let me introduce you to your new best friends in the Illustrator toolbar.
When manipulating the text of your logo, the tools you’ll use most often will be:
As I’m sure you know, the Selection Tool (V) selects objects whereas the Direct Selection Tool (A) selects anchor points. The Pen Tool (P) draw lines with Bézier curves. You can add create or get rid of anchor points along the path or outline with the Add Anchor Point Tool (+) or the Delete Anchor Point Tool (-). If you click and drag on an anchor point with the Convert Anchor Point Tool (Shift+C) you will get a smoother curve.
These tools are especially useful after using Illustrator’s Round Corners effect. A right-angled, or “angular” corner can be rounded manually by firstly clicking twice with the the Add Anchor Point Tool (+) on either side of the corner and, secondly, by drawing a curve between the two new anchor points.
Working with the Pen Tool and Bézier curves does take time to master. But keep at it and keep copies of everything you do and you’ll be fine.
Presenting logos to clients
Now, after you’ve gone over your new logo time and time again to perfect it, you have to present it to your client.
Many people say you should only show a black and white version to the client as the litmus test of a great logo is something that looks as great small and monochrome as it does large and colorful. However, I have found that clients are much less likely to accept logos presented in this way so I tend to present the logo in a color I think best fits the logo and the brand. I place the logo quite small in the center of a landscape PDF. This way the client views the logo without distractions.
There are two different worlds. There is the world of business and commerce which is fast-pace, practical, utilitarian. And the other is the marketing message which needs to be simple, easily digestible and attractive to the customers. Graphic designers sit between these too worlds.
Often our clients will supply documents from the world in which they work. These will invariably be in Microsoft Office applications that everyone uses: Word, PowerPoint and Excel being the most common. The daily challenge is to take raw data from the business world and translate it into accessible and simple messages that the client’s customers can easily digest.
The trick is to keep the data in tact from the Microsoft documents and convert it into an Adobe document (in this case Illustrator) where it can be transformed and edited as required.
Here is an example of content that has been supplied to a designer from Microsoft PowerPoint
How to copy and paste between PowerPoint and Excel and Illustrator
When you paste stuff from Microsoft software into Illustrator they usually come with a load of extraneous rubbish. The paths are also difficult to ungroup. This is because they are bound by a Clipping Mask or Masks which you need to release.
As you can see in the video below, once the elements are pasted into Illustrator, go Object > Clipping Mask > Release (Mac: Cmd/Opt-7; PC Ctrl/Alt-7). You then may need to Ungroup the objects, go Object > Ungroup (Mac: Cmd/Shift-G; PC Ctrl/Shift-G).
Now you have all the data from your client’s document in Illustrator when you can change the font, edit the text, change the colors and generally improve the visual representation of the information in anyway you see fit.
Remember, another bonus is that these are all vector graphics and can therefore be scaled up and down without any loss of quality.
If you still can’t paste into Illustrator even though you have copied from PowerPoint, simply drag an object (a box, for example) from Illustrator onto your desktop and then do it. I don’t know why this works but it does.
Do you find yourself struggling in Microsoft Office hell and have any tips on how to make the world a more beautiful place with Adobe’s Creative Suite?</p>
|Section 6: Conclusion|
Adobe’s Creative Suite of programs includes some heavy-weight applications that are mainstay tools for millions of graphic designers all over the world.
Everyone knows what Photoshop does – it’s the photo-manipulation software. It’s forced it’s way into the English language. You hear kids these days looking at a photo of a model saying “her skin’s been Photoshopped”.
But what other uses does Photoshop have? Is it a web design tool? Should you design logos on it? Should you layout a brochure on it? (Spoiler: No!)
When to use Photoshop
This immensely powerful program (originally conceived in 1987) as its name implies, is to do with photos. With it you can: design a montage; smooth a model’s skin; change colors within an image; put an image within another image; cut out and remove backgrounds; generally, it’s good for improving photos.
But it’s not all about photography. Photoshop is brilliant for making graphics and for visualising websites and apps. You can make buttons; add effects to text; create 3D objects; put titles on e-books.
Some would say Fireworks is best for web design but because of my familiarity with it I always visualize a website in Photoshop before I start developing.
You can position text, images and graphics and quickly decide on the best layout for a web page with Photoshop. Photoshop can also be used to optimize individual images for online output.
It’s not all good news, though. Photoshop – although excellent with graphics, photos and textual treatments – has limited typographical functions. Paragraph and Character styles only arrived in CS6 and it’s hard to get really creative with positioning type with Photoshop.
When to use Illustrator
Now I’m going to have to get boring and explain the difference between bitmapped images and vector images. Bitmapped images are files like JPGs and PNGs. These files represent a photograph by assigning a color to a dot or pixel. Vector images, on the other hand, are represented as mathematical formulas that define all the shapes in the image. The major difference between bitmapped and vector images is that vectors can be scaled indefinitely whereas bitmaps can’t.
Illustrator is a vector image editor. It excels when creating shapes, typography, illustrations, charts, diagrams, maps, etc. You can create logos, make boring diagrams look amazing, create icons (with zero artistic ability using custom brushes), even create awesome 3D effects.
Free course: Talking With Clients – Creating a WordPress Website https://www.udemy.com/wordpress-website-talking-to-clients/
Special Offer: Designing A Website in Photoshop, Illustrator (& GIMP) https://www.udemy.com/designing-a-website-in-photoshop-illustrator-gimp/?couponCode=offer19
Special Offer: Create A Custom Responsive WordPress Website For A Client https://www.udemy.com/create-custom-responsive-wordpress-website-client/?couponCode=offer19
Keep up-to-date with my NEW free courses and free e-books. http://robcubbon.com/free
I make over $5000 each month passive income just from sales of my Ebooks and video courses.
I have over 20 years experience in graphic design and marketing. I have run my own company Rob Cubbon Ltd. since 2005.
I provide creative design and effective marketing services.I love blogging and I'm interested in helping people with their businesses.
A few years ago you could find me stuck behind a computer in an office block in central London. Now I run my own business helping people like you.
Being your own boss is an incredibly liberating experience but it can be difficult as well. There never seems to be enough time for what we want to do.
I’m driven to help people experience the positive side of entrepreneurship, not the negative.
I also create websites and run marketing campaigns for my clients.
30 day money back guarantee
Available on desktop, iOS and Android
Certificate of completion
Hours of video content