BlogmyQuery – BMQ

Following along this tutorial you’ll be learning how to use the Pathfinder Panel in Illustrator CS5 with its very useful features. Combining various forms with the Pathfinder tools, we can create nice shapes. Applying the gradients and colors to those shapes, we can achieve great results by creating a nice depth and perspective. Highlights and shadows are very helpful as well and make the artwork look very realistic.

Don’t forget to use the techniques wisely. Using this simple one you can create a nice artwork of a cup that can be used in a variety of ways, such as an icon in the Web design field or even for coffee shop menus. Now, let’s get down to business!

This is how the end result should look like:

Creating a Cup Shape

First, we will create all the elements needed for the cup and after that we can continue with applying gradients and solid colors.

Set the document size to 500x500 pixels:

Select the Ellipse Tool (L) from the Tool panel and create a circle:

Grab the Direct Selection Tool code>(A), select the upper anchor point of the circle and remove it by hitting the Delete key on the keyboard. This way we’ll remove the upper part of the circle:

Grab the Pen Tool (P) from a Tool Panel and click on the endpoints of the shape from the previous step. That way we’ll close the path:

Take the Ellipse Tool (L) from the Tool Panel and create the ellipse as it shown in the picture below. Make sure that endpoints match. You can adjust the position of endpoints by using the Direct Selection Tool (A):

Now use the Pen Tool (P) and draw the handle for the cup. Set the Stroke to 14:

We have to make the bottom of the cup more flat if we don’t want to spill the coffee. Just grab the Pen Tool (P) and draw a path as it shown in the picture below:

Select the green part of the cup and the path from the previous step and hit the Divide button under the Pathfinder Panel:

Ungroup (Shift+Ctrl+G) the green shape, select the smaller part and hit the Delete key on the keyboard:

Applying Gradients

Time to apply some colors and gradients. Since our cup is white, we will apply mostly white-gray gradients. Darker parts will simulate the shadows.

For the cup we will be using radial white-gray gradient. According to the imaginary source of the light above the cup (upper left side) so the left side of the cup should be lighter.

Let’s create the edge of the cup. Select the pink ellipse and under the Object choose the Path > Offset Path. Set the Offset to -2:

Now we have two ellipses. Set the Fill color for the larger ellipse to white ( #FFFFF ):

The smaller ellipse represents the inner part of the cup. Since the imaginary source of the light is on the upper left side, that side of the interior will be darker:

Let’s edit the handle a little bit. In that order we need to expand the path first. Select the handle and under the Object option, choose Expand:

Make sure that the handle is not too big or too small for the cup. You can add some details. Take a look at your cup at home and try to copy the look of the handle.

Grab the Ellipse Tool (L) from the Tool Panel and create two ellipses as such:

Holding the Shift key on the keyboard, select the handle as well. Under the Pathfinder Panel hit the Unite option:

Now we have to adjust the anchor points a little bit to make a smooth shape of the handle:

The handle should be within the shadow because it is on the right side of the cup (source of the light is the left side, and the handle is on the right side). Let’s apply a darker gradient and later we can add some reflections as well:

Creating Details

Let’s create two fancy golden lines! The first step would be to select the larger ellipse and duplicate it (Ctrl+C, Ctrl+F). Holding the Shift key on the keyboard, move the copy downwards.

Now we need to remove the upper anchor point. Grab the Direct Selection Tool (A) from the Tool Panel to do that. Just click on the anchor point and hit the Delete key on the keyboard. Remove the Fill color and set the Stroke color to green:

Set the Stroke to 4 and under the Object hit Expand:

Now we have to duplicate the shape of the cup. Hit the Ctrl+C and Ctrl+F (for copy and paste-in-front). Select the copy we’ve just made and the line and under the Pathfinder Panel choose Intersect:

Apply the golden linear gradient:

Repeat the previous step to create another, thinner line:

Duplicate (Ctrl+C, Ctrl+F) the shape of the cup twice. Move to the right side of one of the copies and select both copies. Choose the Intersect option under the Pathfinder Panel:

Now duplicate the new shape we’ve just created and move it to the right side, scale it up a little bit and rotate it. Select both shapes and under the Pathfinder Panel hit the Minus Front button:

Feel free to change the position and the angle of the new shape. Play around until you achieve the right look. Set the Fill color to white and lower the opacity to 40%:

Grab the Pen Tool (P) and draw the path. Set the Stroke to 3:

Under the Object hit Expand:

Select both, expanded path and the reflection and under the Pathfinder Panel hit the Minus Front button:

Using the same technique create few more highlights and shadows:

Now we can add a shadow and a highlight on the handle of the cup. Grab the Ellipse Tool (L) and create the ellipse as it shown on the picture below:

Duplicate the handle of the cup (Ctrl+C, Ctrl+F) and by holding the Shift key on the keyboard, select the ellipse and the copy we’ve just created. Hit the Intersect button under the Pathfinder Panel. Set the Fill color to #C2C2C2:

Creating a highlight is pretty much the same. Duplicate (Ctrl+C, Ctrl+F) the handle twice. Move around one of the copies, scale it up or down, rotate; try out several things until you are happy with the result. Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to white (#FFFFF):

Creating a Saucer

For the saucer we’ll need the ellipse. We can’t create a new one because we need to stick to the same exact perspective we’ve created for the cup. Fror that reason, we will duplicate one of the ellipses we created earlier.

Holding the Alt key on the keyboard, click on the larger ellipse and drag it downwards (don’t forget to hold the Shift key for straight drawing):

Under Object select Arrange > Send Back:

Scale up the ellipse for our saucer a little bit and duplicate it (Ctrl+C, Ctrl+F). Grab the lower middle point of the selection box and drag it downwards (non-uniform scaling up). Now we have to move the ellipse upwards to make the side points to match:

Next, duplicate the old ellipse (Ctrl+C, Ctrl+F). Select that copy and the new ellipse and under the Pathfinder Panel hit the Minus Front button. Ungroup (Shift+Ctrl+G) the new shape and erase the upper part. You should end up with something like this:

The next step would be to apply gradients and colors to our saucer. After that we can add more details. For the lower part of the saucer we will use a radial gradient:

To the upper part of the saucer we will apply the linear gradient:

Now we need a white edge for the saucer. Duplicate the ellipse (Ctrl+C, Ctrl+F) twice and nudge one of the copies to the left side for 2 pixels. Select both copies and under the Pathfinder Panel hit the Minus Front button:

Set the Fill color of the new shape to white:

Do the same for the other side. Create two copies, nudge one of them for 2 pixels to the right side and create a nice white edge by using a Minus Front button under the Pathfinder Panel:

Duplicate (Ctrl+C, Ctrl+F) the big ellipse and scale it down. Set the Fill color to #EDEDED. That is the spot where we actually place the cup — the middle point of the saucer:

Duplicate twice the big ellipse (Ctrl+C, Ctrl+F) and nudge one of the copies downwards:

Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #EDEDED. This way we’ve created the inner shadow on the saucer:

We need a small ellipse to put under the cup to simulate a tiny shadow from the cup. Set the Fill color to #C6C6C6:

Duplicate the middle ellipse twice (Ctrl+C, Ctrl+F). Nudge one of the copies 2 pixel downwards. Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #C6C6C6. This way we’ve created the inner edge of the middle part of the saucer:

Grab the Pen Tool (P) from the Tool Panel and draw the shape as it shown on the picture below. Set the Fill color to #C6C6C6 and lower the opacity to 46%:

Take again the Pen Tool (P) and draw the path as you see on the picture below.

Set the Stroke to 4 and under Object select Expand:

Duplicate the big ellipse (Ctrl+C, Ctrl+F). Select the copy and the curve we’ve just made and hit the Intersect button under the Pathfinder Panel:

Apply the linear golden gradient to the curve. Use the same golden linear gradient we used previously for the golden lines on the cup:

Using the same technique create a thinner line:

For the end we’ll create one more reflection (but if you like you can create more than just one). Duplicate (Ctrl+C, Ctrl+F) the largest ellipse of the saucer, scale it down and place it more to the right side:

Holding the Alt key on the keyboard click on the green shape and move it to the left side. This way you’ll create a copy of the green shape and change the position of it at the same time:

Select both ellipses and hit the Minus Front button under the Pathfinder Panel. Grab a Pen Tool (P) from the Tool Panel and draw the small curved path. Expand the path under Object > Expand. Select both, expanded path and the green shape we’ve just created and hit the Minus Front under the Pathfinder Panel:

Set the Fill color to white. Adjust the position, size and the angle of the reflection we’ve just made:

The last thing is to add the shadow under the saucer. Grab the Ellipse Tool (L) from the Tool Panel and create the ellipse. Under the Object select Arrange > Send Back. Set the Fill color to #C6C6C6:

And Voila! Our cup is ready:

Final Note

Just keep one thing in mind. Perspective is very important. You have to try your best to stick to it during the entire creation process. You can always add more details to the cup as much as you like. It also helps if you look at the object simultaneously while you are creating it.

Feel free to experiment and try out different things. You can easily create interesting shapes and forms using the Pathfinder Panel with all its features. I hope you liked this tutorial. If you have any questions or comments, feel free to post them in the comments section below.

(ik)

One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic <object> element to a highly specified <video> and <audio> element, and with a rich API to access in pure JavaScript.

Native multimedia capability has a few benefits:

• End users have full control over the multimedia.
  The native controls of browsers allow users to save videos locally or email them to friends. Also, HTML5 video and audio are keyboard-enabled by default, which is a great accessibility benefit.
• End users do not need to install a plug-in to play them.
  The browser already has everything it needs to play movies and sound.
• Video and audio content on the page can be manipulated.
  They are simply two new elements like any other that can be styled, moved, manipulated, stacked and rotated.
• You can build your own controls using HTML, CSS and JavaScript.
  No new skills or development environment needed.
• Interaction with the rest of the page is simple.
  The multimedia API gives you full control over the video, and you can make the video react both to changes in the video itself and to the page around it.

Let’s quickly recap how you can use native video in the browser, starting with the embedding task.

Embedding Video

This is old news. Embedding video in a document is as easy as adding a <video> element and pointing it to the source video. Adding a controls attribute gives you native controls:

<video src="chris.ogv" controls></video>

This is the theory, though. In the real world of intellectual property, corporate competition and device-specific solutions, we as developers have to jump through a few hoops:

<video controls="true" height="295" width="480">
  <!-- hello iOS, Safari and IE9 -->
  <source src="chris.mp4" type="video/mp4">
  <!-- Hello Chrome and Firefox (and Opera?) -->
  <source src="chris.webm" type="video/webm">
  <!-- Hello Firefox and Opera -->
  <source src="chris.ogv" type="video/ogg">
  <!-- Hello legacy -->
  Your browser does not support the video tag,
  <a href="http://www.youtube.com/watch?v=IhkUe_KryGY">
    check the video on YouTube
  </a>.
</video>

This shows how we need to deliver video in three formats in order to satisfy all of the different browsers out there. There are a few ways to accomplish this. Here’s what I do…

Convert Video With Miro Video Converter

Miro Video Converter is an open-source tool for Mac that makes converting videos dead easy. Simply drag the video to the tool, select WebM as the output format, and watch the progress. A few other converters for Windows and Linux are available, too.

Hosting And Automated Conversion On Archive.org

Because I license my videos with Creative Commons, I can use Archive.org to both host the videos and convert the WebM versions to MP4 and OGV. Simply upload your video and wait about an hour. Reload the page, and the server pixies at Archive.org will have created the other two formats (and also a cool animated GIF of your video).

You can use Archive.org to both host the videos and convert the WebM versions to MP4 and OGV. Large view.

Industrial-Strength Conversion With Vid.ly

WebM, OGV and MP4 take care of only the major browsers, though. If you want to support all mobile devices, tablets and consoles and you want the video quality to adapt to the user’s connection speed, then you’ll have to create a few dozen versions of the same video. Encoding.com feels our pain and has released a free service called Vid.ly, which converts any video you upload into many different formats more or less in real time. Unfortunately, the service is in private beta at the moment, but you can use the invite code HNY2011.

Vid.ly converts any video you upload into many different formats more or less in real time. Large view.

Furthermore, Vid.ly creates a URL for your video that automatically redirects the browser or device calling it to the right format. This keeps your embed code as simple as possible:

<video src="http://vid.ly/4f3q1f?content=video" controls></video>

Cool, isn’t it?

The Power Of The HTML5 Video API: Syncing Content

Now that our video is on the page, let’s check out the power of the API. Say, for example, you want to know what part of the movie is playing right now. This is as simple as subscribing to an event of the <video> element:

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video>
  <div id="time"></div>
</div>
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

If you try this out in your browser, you will see the current time below the video when you play it.

You will also see that the timeupdate event gets fired a lot and at somewhat random times. If you want to use this to sync the showing and hiding of parts of the document, then you’ll need to throttle it somehow. The easiest way to do this is to limit the number to full seconds using parseInt():

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video>
  <div id="time"></div>
</div>
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = parseInt(v.currentTime) + ' - ' + v.currentTime;
    },false);
  })();
</script>

You can use this to trigger functionality at certain times. For example, you can sync an Indiana Jones-style animation of a map to a video:

For a full explanation of this demo, check out the blog post on Mozilla Hacks.

Let’s have a go at something similar: a video that shows the content from web pages being referred to by a presenter. Check out this video demo of me explaining what we’re doing here, with the content appearing and disappearing at certain times in the video. Make sure to jump around the video with the controls.

We’ve already covered how to get the current time of a video in seconds. What I want now is to display and hide a few parts of the website at certain times in the video. If video is not supported in the browser, then I would just show all of the content without any syncing.

The first issue I have to solve is to allow the maintainer to control what is shown when. Normally, I’d use a JSON object in the JavaScript, but I figure that keeping the maintenance in the markup itself makes much more sense.

HTML5 allows you to store information in data- attributes. So, to make it easy to tell the script when to show what, I just use data-start and data-end attributes, which define the time frames for the articles that I want to sync with the video:

<article data-start="64" data-end="108">
  <header><h1>Archive.org for conversion</h1></header>
  <p><a href="http://archive.org">Archive.org</a> is a website dedicated to
archiving the Internet. For content released as under a Creative Commons
license, it offers hosting for video and audio and automatically converts the
content to MP4 and Ogg video for you.</p>
  <iframe src="http://archive.org"></iframe>
</article>

You can try it out by downloading the code and changing the values yourself (or use Firebug or the Web Inspector to change it on the fly).

Here’s the script (using jQuery) that makes this happen:

/* if the document is ready… */
$(document).ready(function(){

/* if HTML5 video is supported */
  if($('video').attr('canPlayType')){

    $('aside::first').append('<p>Play the video above and see how ' +
                             'the different connected content sections ' +
                             'in the page appear at the right moment. '+
                             'Feel free to jump forward and backward</p>');

    var timestamps = [],
        last = 0,
        all = 0,
        now = 0,
        old = 0,
        i=0;

/* hide all articles via CSS */
    $('html').addClass('js');

/*
   Loop over the articles, read the timestamp start and end and store
   them in an array
*/
    $('article').each(function(o){
      if($(this).attr('data-start')){
        timestamps.push({
          start : +$(this).attr('data-start'),
          end : +$(this).attr('data-end'),
          elm : $(this)
        });
      }
    });

    all = timestamps.length;

/*
  when the video is playing, round up the time to seconds and call the
  showsection function continuously
*/
    $('video').bind('timeupdate',function(event){
      now = parseInt(this.currentTime);

      /* throttle function calls to full seconds */
      if(now > old){
        showsection(now);
      }
      old = now;

    });

/*
  Test whether the current time is within the range of any of the
  defined timestamps and show the appropriate section.
  Hide all others.
*/
    function showsection(t){
      for(i=0;i<all;i++){
        if(t >= timestamps[i].start && t <= timestamps[i].end){
          timestamps[i].elm.addClass('current');
        } else {
          timestamps[i].elm.removeClass('current');
        }
      }
    };

  };
});

So, what’s going on here? First, we’re checking whether the browser is capable of playing HTML5 video by testing for the canPlayType attribute. If all is fine, then we add some explanatory text to the document (which wouldn’t make sense if the browser couldn’t show a video). Then, we define some variables to use and add a class of js to the root element of the document. This, together with the .js article selector in the CSS, hides all of the articles in the document.

We then loop through the articles, read out the timestamps for the start and end of each of the sections and store them in an array called timestamps.

We then subscribe to the timeupdate event, rounded up to full seconds, and call the showsection() function every new second.

The showsection() function loops through all of the timestamps and tests whether the current time of the video is in the range of one of the articles. If it is, then that article is displayed (by adding a current class) and all the others are hidden. This could be optimized by storing the current section and removing the class from only that element.

Can We Do The Same With Less Or No Code?

If you like the idea of syncing content and video, check out the Popcorn framework, which is based on the same techniques but gives you much more control over the video itself.

Butter is a point-and-click interface to go on top of Popcorn. It has a nice timeline editor that allows you to play a video and show all kinds of Web content at certain times. You can export and send your creations to friends, too.

Large view

With systems like Popcorn and Butter, we are one step closer to having authoring tools for the rich interactions that HTML5 offers us. What can you think of building?

Summary

Today we looked at how to embed video onto a Web document; and with the native video API that gives us event handlers for changes in a video, we saw how easy it is to make the video interact with the rest of the document. Instead of trying to control the video, we use native controls to make the page react to what is happening in the video itself. We used semantic HTML and data attributes to allow maintainers to use the syncing script without having to touch any JavaScript, and we looked at some services that make hosting and converting video easy.

All of these cool technologies give us a lot of power, but we can’t just, say, write some simple CSS, JavaScript and HTML to use them. If we want open technologies to succeed, then we have to make them easy for people to use. The next step now is to move from the “one-off implementation� phase and think about creating tools and step-by-step code-creation systems for users who want to use these cool new technologies but don’t want to spend much time and effort doing it.

With native audio and video in browsers, we’ve taken a massive step toward make the open Web more engaging and beautiful. The next step will be to use multimedia not only for output but for input. A lot of hardware these days comes with cameras and microphones; we need to start using and supporting open technology that allows our users to take advantage of this hardware to interact with our Web products.

For a screencast on this topic, see Syncing page content with HTML5 video on the Mozilla Hacks blog.

(al)

© Christian Heilmann for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: html5, video

Following along this tutorial you’ll be learning how to use the Pathfinder Panel in Illustrator CS5 with its very useful features. Combining various forms with the Pathfinder tools, we can create nice shapes. Applying the gradients and colors to those shapes, we can achieve great results by creating a nice depth and perspective. Highlights and shadows are very helpful as well and make the artwork look very realistic.

Don’t forget to use the techniques wisely. Using this simple one you can create a nice artwork of a cup that can be used in a variety of ways, such as an icon in the Web design field or even for coffee shop menus. Now, let’s get down to business!

This is how the end result should look like:

Creating a Cup Shape

First, we will create all the elements needed for the cup and after that we can continue with applying gradients and solid colors.

Set the document size to 500x500 pixels:

Select the Ellipse Tool (L) from the Tool panel and create a circle:

Grab a Direct Selection Tool (A), select the upper anchor point of the circle and remove it by hitting the Delete key on the keyboard. This way we’ll remove the upper part of the circle:

Grab the Pen Tool (P) from the Tool Panel and click on the endpoints of the shape from the previous step. That way we’ll close the path:

Take the Ellipse Tool (L) from the Tool Panel and create the ellipse as it shown on the picture below. Make sure that endpoints match. You can adjust the position of endpoints by using a Direct Selection Tool (A):

Now use the Pen Tool (P) and draw the handle for the cup. Set the Stroke to 14:

We have to make the bottom of the cup more flat if we don’t want to spill the coffee. Just grab the Pen Tool (P) and draw a path as it shown in the picture below:

Select the green part of the cup and the path from the previous step and hit the Divide button under the Pathfinder Panel:

Ungroup (Shift+Ctrl+G) the green shape, select the smaller part and hit the Delete key on the keyboard.

Applying Gradients

Time to apply some colors and gradients. Since our cup is white, we will apply mostly white-gray gradients. Darker parts will simulate the shadows.

For the cup we will be using  radial white-gray gradient. According to the imaginary source of the light above the cup (upper left side) so the left side of the cup should be lighter.

Let’s create the edge of the cup. Select the pink ellipse and under the Object choose the Path>Offset Path. Set the Offset to -2:

Now we have two ellipses. Set the Fill color for the larger ellipse to white ( #FFFFF ):

The smaller ellipse represents the inner part of the cup. Since the imaginary source of the light is on the upper left side, that side of the interior will be darker:

Let’s edit the handle a little bit. In that order we need to expand the path first. Select the handle and under the Object option, choose Expand:

Make sure that the handle is not too big or too small for the cup. You can add some details. Take a look at your cup at home and try to copy the look of the handle.

Grab the Ellipse Tool (L) from the Tool Panel and create two ellipses:

Holding the Shift key on the keyboard, select the handle as well. Under the Pathfinder Panel hit the Unite option:

Now we have to adjust the anchor points a little bit to make a smooth shape of the handle:

The handle should be within the shadow because it is on the right side of the cup (source of the light is the left side, and the handle is on the right side). Let’s apply a darker gradient and later we can add some reflections as well:

Creating Details

Let’s create two fancy golden lines! The first step would be to select the larger ellipse and duplicate it (Ctrl+C, Ctrl+F). Holding the Shift key on the keyboard, move the copy downwards.

Now we need to remove the upper anchor point. Grab the Direct Selection Tool (A) from the Tool Panel to do that. Just click on the anchor point and hit the Delete key on the keyboard. Remove the Fill color and set the Stroke color to green:

Set the Stroke to 4 and under the Object hit Expand:

Now we have to duplicate the shape of the cup. Hit the Ctrl+C and Ctrl+F (for copy and paste-in-front). Select the copy we’ve just made and the line and under the Pathfinder Panel choose Intersect:

Apply the golden linear gradient:

Repeat the previous step to create another, thinner line:

Duplicate (Ctrl+C, Ctrl+F) the shape of the cup twice. Move to the right side of one of the copies and select both copies. Choose the Intersect option under the Pathfinder Panel:

Now duplicate the new shape we’ve just created and move it to the right side, scale it up a little bit and rotate it. Select both shapes and under the Pathfinder Panel hit the Minus Front button:

Feel fee to change the position and the angle of the new shape. Play around until you achieve the right look. Set the Fill color to white and lower the opacity to 40%:

Grab the Pen Tool (P) and draw the path. Set the Stroke to 3:

Under the Object hit Expand:

Select both, expanded path and the reflection and under the Pathfinder Panel hit the Minus Front button:

Using the same technique create a few more highlights and shadows:

Now we can add a shadow and a highlight on the handle of the cup. Grab the Ellipse Tool (L) and create the ellipse as it shown in the picture below:

Duplicate the handle of the cup (Ctrl+C, Ctrl+F) and by holding the Shift key on the keyboard, select the ellipse and the copy we’ve just created. Hit the Intersect button under the Pathfinder Panel. Set the Fill color to #C2C2C2:

Creating a highlight is pretty much the same. Duplicate (Ctrl+C, Ctrl+F) the handle twice. Move around one of the copies, scale it up or down, rotate; try out several things until you are happy with the result. Select both copies and under the Pathfinder Panel hit the Minus Front button. Finally, set the Fill color to white (#FFFFF):

Creating a Saucer

For the saucer we’ll need the ellipse. We can’t create a new one because we need to stick to the same exact perspective we’ve created for the cup. Fror that reason, we will duplicate one of the ellipses we created earlier.

Holding the Alt key on the keyboard, click on the larger ellipse and drag it downwards (don’t forget to hold the Shift key for straight drawing):

Under the Object select Arrange > Send Back:

Scale up the ellipse for our saucer a little bit and duplicate it (Ctrl+C, Ctrl+F). Grab the lower middle point of the selection box and drag it downwards (non-uniform scaling up). Now we have to move the ellipse upwards to make the side points match:

Next, duplicate the old ellipse (Ctrl+C, Ctrl+F). Select that copy and the new ellipse and under the Pathfinder Panel hit the Minus Front button. Ungroup (Shift+Ctrl+G) the new shape and erase the upper part. You should end up with something like this:

The next step would be to apply gradients and colors to our saucer. After that we can add more details. For the lower part of the saucer we will use a radial gradient:

To the upper part of the saucer we will apply the linear gradient:

Now we need a white edge for the saucer. Duplicate the ellipse (Ctrl+C, Ctrl+F) twice and nudge one of the copies to the left side for 2 pixels. Select both copies and under the Pathfinder Panel hit the Minus Front button:

Set the Fill color of the new shape to white:

Do the same for the other side. Create two copies, nudge one of them for 2 pixels to the right side and create a nice white edge by using the Minus Front button under the Pathfinder Panel:

Duplicate (Ctrl+C, Ctrl+F) the big ellipse and scale it down. Set the Fill color to #EDEDED. That is the spot where we actually place the cup — the middle point of the saucer:

Duplicate twice the big ellipse (Ctrl+C, Ctrl+F) and nudge one of the copies downwards:

Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #EDEDED. This way we’ve created the inner shadow on the saucer:

We need a small ellipse to put under the cup to simulate a tiny shadow from the cup. Set the Fill color to #C6C6C6:

Duplicate the middle ellipse twice (Ctrl+C, Ctrl+F). Nudge one of the copies 2 pixel downwards. Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #C6C6C6. This way we’ve created the inner edge of the middle part of the saucer:

Grab the Pen Tool (P) from the Tool Panel and draw the shape as it shown on the picture below. Set the Fill color to #C6C6C6 and lower the opacity to 46%:

Choose the Pen Tool (P) again and draw the path as you see in the picture below:

Set the Stroke to 4 and under the Object select Expand:

Duplicate the big ellipse (Ctrl+C, Ctrl+F). Select the copy and the curve we’ve just made and hit the Intersect button under the Pathfinder Panel:

Apply the linear golden gradient to the curve. Use the same golden linear gradient we used previously for the golden lines on the cup:

Using the same technique create a thinner line:

For the end we’ll create one more reflection (but if you like you can create more than just one). Duplicate (Ctrl+C, Ctrl+F) the largest ellipse of the saucer, scale it down and place it more to the right side:

Holding the Alt key on the keyboard, click on the green shape and move it to the left side. This way you’ll create a copy of the green shape and change the position of it at the same time:

Select both ellipses and hit the Minus Front button under the Pathfinder Panel. Grab the Pen Tool (P) from the Tool Panel and draw the small curved path. Expand the path under the Object > Expand. Select both, expanded path and the green shape we’ve just created and hit the Minus Front under the Pathfinder Panel:

Set the Fill color to white. Adjust the position, size and the angle of the reflection we’ve just made:

The last thing is to add the shadow under the saucer. Grab the Ellipse Tool (L) from the Tool Panel and create the ellipse. Under the Object select Arrange > Send Back. Set the Fill color to #C6C6C6:

And Voila! Our cup is ready:

Final Note

Just keep one thing in mind. Perspective is very important. You have to try your best to stick to it during the entire creation process. You can always add more details to the cup as much as you like. It also helps if you look at the object simultaneously while you are creating it.

Feel free to experiment and try out different things. You can easily create interesting shapes and forms using the Pathfinder Panel with all its features. I hope you liked this tutorial. If you have any questions or comments, feel free to post them in the comments section below.

(ik)

Creating fantasy artwork requires a lot of imagination as well as expertise in softwares which are used to create such marvelous pictures. Almost anything is possible; whether it’s a supernatural fairy, an old fantasy space city or an armored dragon jewelry box. All of these tutorials are useful and will definitely give you the chance to improve your Photoshop skills.

Feel free to share with us any other fantasy art tutorials you’ve found useful!

Fantasy Art Tutorials

Serene Fantasy Photo Manipulation
In this tutorial you can learn how to create a serene fantasy photo manipulation:

Castle in the Sky
Here is a detailed tutorial where you can learn how to create a fantasy castle in the sky:

Design Surreal Composition Fallen Angel’s Dream Fly
In this tutorial we’ll learn how to design a surreal composition of an angel:

Fairy Night
In this tutorial you can learn how to correct the photo’s colors, change the eye color, work with the layers, apply ready brushes and designs, create your own design and also to picture the stars:

Combine Photo Elements to Create a Surreal Photo Manipulation
In his Photoshop tutorial, you will learn how to use a variety of color, lighting, and the cut-and-paste techniques to create a surreal photo manipulation. Combine your creativity with these Photoshop techniques to create your own photo manipulation artworks:

Create a Beautiful and Dramatic Scene with Photo Manipulations
Here are a number of techniques to help you add drama to a fantasy photo manipulation:

Create a Fantasy Illustration in Photoshop
In this tutorial, the artist shows you how to create a fantasy montage in Photoshop using some stock images and brushes.This tutorial is simple but the final image looks amazing:

How to Create a Fantasy Landscape Photo Manipulation
In this tutorial, you can learn how to create a fantasy landscape using some simple and easy techniques. Everyone with basic Photoshop skills can succeed to recreate this simple image using the most important thing in this kind of photo manipulation – the right image stock:

How to Create a Fantasy “Mother Nature� Scene
This tutorial is about creating a fantasy scene called “Mother Nature.� We will use well chosen images, brushes and most off all our imagination in combination with Photoshop techniques to create an outstanding image:

The Creation of “Lost in Memory� Epic Fantasy Artwork in Photoshop
In this tutorial, the artist shows you the steps he took to create this epic fantasy-like artwork “Lost in Memory� in Photoshop:

Design an Awesome Fantasy Floating Mountain Scene in Photoshop
In this tutorial, the artist explains the process completed to create this really cool, fantasy style floating mountain scene in Photoshop. This is an intermediate level tutorial and some steps can be tricky, but why not have a try:

Turn a Flawless Blonde Beauty into a Sword-Wielding Fantasy Action Hero
In this tutorial we are going to learn how to turn a flawless blonde beauty into a sword-wielding survival huntress. To do this, we are going to make her skin sweaty and dirty, her dress stained and torn, we’ll add blood stains to the sword, manipulate her hair, and create a post-apocalyptic background full of smoke and fire effects. Check it out:

Create Awesome Dark Fantasy Scenary in Photoshop
In this tutorial you will learn how to create an awesome dark fantasy scenary in Photoshop:

Design a Surreal, Ancient Fantasy Scene in Photoshop
In this tutorial, the artist elaborates the steps he took to create this artwork. We will take several real world objects and seamlessly blend them together. We will also use a number of Photoshop brushes to spice up the effect. The techniquses involved in this tutorial include layer blending, image adjustments, filter effects, custom brush tools, adding layer mask, etc.:

Create an Out of Bounds Fantasy Illustration
In this tutorial, we will take you through the process of creating a fantasy scene, make water pour out of a painting, make some sort of a absorption effect and end up with a really nice looking color:

Create a Beautiful Lonely Fantasy Fairy
This tutorial will explain how to make a beautiful fairy from a single source image. We will go over each step on how to make the feathers, the hat, the background, the grass and the mountains:

Design a Fantasy Style Mountain River Scene in Photoshop
In this tutorial, the artist will show you the processes to take to create such a fantasy-like mountain river scene like this one with the help of Photoshop. This is an intermediate level tutorial so some steps can be tricky, but why not have a try:

Create an Old Fantasy Space City
This tutorial will explain how to make an old space city from a single source image in Photoshop:

Design a Black and White, Dreamy Style Surreal Artwork in Photoshop
In this tutorial, the artist shows you the steps to take to create this black and white, dreamy style sureal artwork in Photoshop. Have a try:

Making a Book of Magical Playground Scene
This tutorial will show you how to create a fantasy book scene. By using various advanced Photoshop techniques, we can try to make the composition as realistic as possible:

Create a Fantasy Scene with Death
In this tutorial the artist explains how he made this masterpiece and what decisions he made before and during making the image. Step-by-step images are provided to illustrate the techniques.Check it out:

Create an Armored Fantasy Dragon from a Jewelry Box Image
This tutorial shows the step by step process to turn a normal photo into a spectacular image, by simply using creativity and some technical knowledge:

Create a Fantasy Scene with a Sorceress and Tree Monster
In this tutorial you’ll learn how to transform a normal photo of a woman walking in the park into a fantasy image of a sorceress facing a tree monster. Some basic Photoshop knowledge is required to follow this tutorial:

How to Create a Fantasy Flower Creature
In this fantasy tutorial, we are going to create a cool flower creature with Photoshop CS3. And this is exactly how to do it:

How to Create a Sparkling Fantasy Photo Manipulation
In this tutorial, we’re going to create a photo manipulation using different techniques. By adjusting each layer and element, we can make a compact final image. We’ll also be using multiple photos and a handful of effects to create this work. Let’s get started:

Awesome Fantasy Style Castle Scene Creation in Photoshop
In this tutorial, the artist shows you the steps he took to design this awesome fantasy-like castle scene with an icy background texture, space and debris brushses:

Creating Your Own Fairytale Scene
In this beautiful tutorial we will learn how to create a mindblowing fairytale scene:

Making a Beautiful Pair of Fantasy Eyes
In this tutorial we will explore the basics on how we can create such effects with the help of Photoshop:

Making of a Forest Magical Scene
In this tutorial you can learn how to make a forest magical scene:

Mysterious Lightning
In this tutorial you can learn how to make a fantasy scene with mysterious lightning:

Beautiful Spring Fantasy Photo Manipulation
This tutorial usees different Photoshop tools such as combining stock images, using brushes and the transform tool as well as adjusting colors to create a beautiful fantastic spring scene:

Skating in Clouds – Magic Scene
In this tutorial you can learn how to create a magical scene among clouds:

Nightly Prayer Tutorial
A step by step tutorial that shows how to make a nightly prayer. It was made in Photoshop CS but should work just fine with PS 7 and other versions:

Create Breathtaking Fantasy Light Effects
Learn how to combine brushes and blur effects in Photoshop to create a beautiful fantasy scene in this step-by-step guide by Murilo Maciel:

Angel Praying Among the Clouds
In this tutorial you can learn how to create a fantasy photo manipulation with an angel who is praying high among the clouds:

The Making of Secret Pond
In this tutorial the artist explains how he created the lighting effects in the making of the ‘Secret Pond’:

Create a Falling Fantasy Photomanipulation Using Painting Techniques
In this tutorial, you’ll learn how to create a falling fantasy photomanipulation using stock images and some digital painting techniques. You’ll also learn how to extract, preserve and recreate flowing hair, and you’ll learn how to manipulate twirling vines:

Create an Incredible Story Coming Alive Fantasy Photomanipulation
In this fantasy photo manipulation tutorial, you will learn how to start with just a few stock images and quickly build up an incredible story-based artwork. You’ll see how you can manipulate images, add effects and create amazing artwork with the help of this tutorial:

Floating Island
In this tutorial the artist illustrates how simple it is to make a floating island! You will need two images for the sky and castle. You’ll also need two other images for the mud and grass textures:

(ik)

Creating fantasy artwork requires a lot of imagination as well as expertise in softwares which are used to create such marvelous pictures. Almost anything is possible; whether it’s a supernatural fairy, an old fantasy space city or an armored dragon jewelry box. All of these tutorials are useful and will definitely give you the chance to improve your Photoshop skills.

Feel free to share with us any other fantasy art tutorials you’ve found useful!

Fantasy Art Tutorials

Serene Fantasy Photo Manipulation
In this tutorial you can learn how to create a serene fantasy photo manipulation:

Castle in the Sky

Here in a detailed tutorial where you can learn how to create a fantasy castle in the sky:

Design Surreal Composition Fallen Angel’s Dream Fly
In this tutorial we’ll learn how to design a surreal composition of an angel:

Fairy Night
In this tutorial you can learn how to correct the photo’s colors, change the eye color, work with the layers, apply ready brushes and designs, create your own design and also to picture the stars:

Combine Photo Elements to Create a Surreal Photo Manipulation
In his Photoshop tutorial, you will learn how to use a variety of color, lighting, and the cut-and-paste techniques to create a surreal photo manipulation. Combine your creativity with these Photoshop techniques to create your own photo manipulation artworks:

Create a Beautiful and Dramatic Scene with Photo Manipulations
Here are a number of techniques to help you add drama to a fantasy photo manipulation:

Create a Fantasy Illustration in Photoshop
In this tutorial, the artist shows you how to create a fantasy montage in Photoshop using some stock images and brushes.This tutorial is simple but the final image looks amazing:

How to Create a Fantasy Landscape Photo Manipulation
In this tutorial, you can learn how to create a fantasy landscape using some simple and easy techniques. Everyone with basic Photoshop skills can succeed to recreate this simple image using the most important thing in this kind of photo manipulation – the right image stock:

How to Create a Fantasy “Mother Nature� Scene
This tutorial is about creating a fantasy scene called “Mother Nature.� We will use well chosen images, brushes and most off all our imagination in combination with Photoshop techniques to create an outstanding image:

The Creation of “Lost in Memory� Epic Fantasy Artwork in Photoshop
In this tutorial, the artist shows you the steps he took to create this epic fantasy-like artwork “Lost in Memory� in Photoshop:

Design an Awesome Fantasy Floating Mountain Scene in Photoshop
In this tutorial, the artist explains the process completed to create this really cool, fantasy style floating mountain scene in Photoshop. This is an intermediate level tutorial and some steps can be tricky, but why not have a try:

Turn a Flawless Blonde Beauty into a Sword-Wielding Fantasy Action Hero
In this tutorial we are going to learn how to turn a flawless blonde beauty into a sword-wielding survival huntress. To do this, we are going to make her skin sweaty and dirty, her dress stained and torn, we’ll add blood stains to the sword, manipulate her hair, and create a post-apocalyptic background full of smoke and fire effects. Check it out:

Create Awesome Dark Fantasy Scenary in Photoshop
In this tutorial you will learn how to create an awesome dark fantasy scenary in Photoshop:

Design a Surreal, Ancient Fantasy Scene in Photoshop
In this tutorial, the artist elaborates the steps he took to create this artwork. We will take several real world objects and seamlessly blend them together. We will also use a number of Photoshop brushes to spice up the effect. The techniquses involved in this tutorial include layer blending, image adjustments, filter effects, custom brush tools, adding layer mask, etc.:

Create an Out of Bounds Fantasy Illustration
In this tutorial, we will take you through the process of creating a fantasy scene, make water pour out of a painting, make some sort of a absorption effect and end up with a really nice looking color:

Create a Beautiful Lonely Fantasy Fairy
This tutorial will explain how to make a beautiful fairy from a single source image. We will go over each step on how to make the feathers, the hat, the background, the grass and the mountains:

Design a Fantasy Style Mountain River Scene in Photoshop
In this tutorial, the artist will show you the processes to take to create such a fantasy-like mountain river scene like this one with the help of Photoshop. This is an intermediate level tutorial so some steps can be tricky, but why not have a try:

Create an Old Fantasy Space City
This tutorial will explain how to make an old space city from a single source image in Photoshop:

Design a Black and White, Dreamy Style Surreal Artwork in Photoshop
In this tutorial, the artist shows you the steps to take to create this black and white, dreamy style sureal artwork in Photoshop. Have a try:

Making a Book of Magical Playground Scene
This tutorial will show you how to create a fantasy book scene. By using various advanced Photoshop techniques, we can try to make the composition as realistic as possible:

Create a Fantasy Scene with Death
In this tutorial the artist explains how he made this masterpiece and what decisions he made before and during making the image. Step-by-step images are provided to illustrate the techniques.Check it out:

Create an Armored Fantasy Dragon from a Jewelry Box Image
This tutorial shows the step by step process to turn a normal photo into a spectacular image, by simply using creativity and some technical knowledge:

Create a Fantasy Scene with a Sorceress and Tree Monster
In this tutorial you’ll learn how to transform a normal photo of a woman walking in the park into a fantasy image of a sorceress facing a tree monster. Some basic Photoshop knowledge is required to follow this tutorial:

How to Create a Fantasy Flower Creature
In this fantasy tutorial, we are going to create a cool flower creature with Photoshop CS3. And this is exactly how to do it:

How to Create a Sparkling Fantasy Photo Manipulation
In this tutorial, we’re going to create a photo manipulation using different techniques. By adjusting each layer and element, we can make a compact final image. We’ll also be using multiple photos and a handful of effects to create this work. Let’s get started:

Awesome Fantasy Style Castle Scene Creation in Photoshop
In this tutorial, the artist shows you the steps he took to design this awesome fantasy-like castle scene with an icy background texture, space and debris brushses:

Creating Your Own Fairytale Scene
In this beautiful tutorial we will learn how to create a mindblowing fairytale scene:

Making a Beautiful Pair of Fantasy Eyes
In this tutorial we will explore the basics on how we can create such effects with the help of Photoshop:

Making of a Forest Magical Scene
In this tutorial you can learn how to make a forest magical scene:

Mysterious Lightning
In this tutorial you can learn how to make a fantasy scene with mysterious lightning:

Beautiful Spring Fantasy Photo Manipulation
This tutorial usees different Photoshop tools such as combining stock images, using brushes and the transform tool as well as adjusting colors to create a beautiful fantastic spring scene:

Skating in Clouds – Magic Scene
In this tutorial you can learn how to create a magical scene among clouds:

Nightly Prayer Tutorial
A step by step tutorial that shows how to make a nightly prayer. It was made in Photoshop CS but should work just fine with PS 7 and other versions:

Create Breathtaking Fantasy Light Effects
Learn how to combine brushes and blur effects in Photoshop to create a beautiful fantasy scene in this step-by-step guide by Murilo Maciel:

Angel Praying Among the Clouds
In this tutorial you can learn how to create a fantasy photo manipulation with an angel who is praying high among the clouds:

The Making of Secret Pond
In this tutorial the artist explains how he created the lighting effects in the making of  the ‘Secret Pond’:

Create a Falling Fantasy Photomanipulation Using Painting Techniques
In this tutorial, you’ll learn how to create a falling fantasy photomanipulation using stock images and some digital painting techniques. You’ll also learn how to extract, preserve and recreate flowing hair, and you’ll learn how to manipulate twirling vines:

Create an Incredible Story Coming Alive Fantasy Photomanipulation
In this fantasy photo manipulation tutorial, you will learn how to start with just a few stock images and quickly build up an incredible story-based artwork. You’ll see how you can manipulate images, add effects and create amazing artwork with the help of this tutorial:

Floating Island
In this tutorial the artist illustrates how simple it is to make a floating island! You will need two images for the sky and castle. You’ll also need two other images for the mud and grass textures:

(ik)