• 6th May 2009 - By Graphire

    It’s been a while since I last did a tutorial here in Graphic Design Free Resources. Few weeks ago while doing a short piece about Apple’s iPhone on my technology and gadget blog. I was looking for a clean generic iPhone mock-up to superimpose different screen displays but couldn’t find one. I ended up using something else. So I thought about creating my own iPhone mockup and feature its tutorial here as well.

    This tutorial requires intermediate level skill in Adobe Illustrator. You should already have working knowledge of paths using Pen Tool, creating and manipulating shapes using Pathfinder, gradients, symbols, swatches, and the Mesh Tool. Sorry for newbie Illustrator users. But even if you don’t know much about Illustrator, this tutorial will at least give you an idea how this is done. I’ve seen some basic vector Illustrator tutorial like this around (I saw one from vector tutsplus) but the result is not very impressive, but still gets the job done.

    Let’s get it on. Before we get started, let’s take a look at the final image we’ll be creating.

    vector-iphone

    Step 1: The basic frame.

    Let’s create the outer frame using the Rounded Rectangle tool. I initially created three rounded rectangles 2mm apart on both sides and 2 points difference on rounded corners. Outer rectangle is 60mm x 113mm 25pt rounded corner, next one is 58mm x 111mm 23pt, third and inner one is 56mm x 109mm 21pt. You can have your own dimensions as long as the proportions are similar to what I’ve done.

    iphone-fig1

    Next we need to create a compound path by subtracting the middle panel from the outer one. Select the two rectangles and use the “Minus Front” button from the Pathfinder palette.

    iphone-fig2

    Now we need to extract/separate the top and bottom part of the compound path we created. We need to do this to create our chrome shine effect. Create another rectangle similar to the one in the image below (the red one). Using the Pathfinder tool again, separate the top and bottom from the sides of the compound path using the “Divide” button.

    iphone-fig3b

    You will have a similarly shaped top portion of the frame below.

    iphone-fig4

    Now we create mesh gradient as indicated below using the Mesh Tool. You can also use other methods in creating a chrome-like gradient like the blend tool but I prefer the Mesh Tool as you can have more control over your gradient to create a more realistic effect.

    iphone-fig5

    iphone-fig6

    For convenience, you can also create a set of swatches ahead which you can just select as needed. For this project, I made a bunch of gray swatches from light to black. For the mesh gradient, you may apply colors on the gradient nodes as indicated in the images above.

    Step 2: Buttons, switches and symbols

    After we’re done with the chrome frame, let’s move on with the other details of our iPhone. Draw the side controls and the top sleep/wake button using the Pen Tool and apply gray color similar to the adjacent chrome frame. You can use gradient or flat color. I use a subtle gradient as I don’t want to make these buttons too shiny.

    iphone-fig7

    Next we create the home button with the shape tool using circles and rectangular oval shapes. The crescent shaped gradation was created using a copy of the outer circle subtracted with a larger circle. Apply the home button colors as indicated in the image below.

    iphone-fig8

    Here’s how our home button looks like.

    iphone-fig9

    I make it a habit to convert most nitty-gritty elements of my projects to symbols, especially if you see plenty of usage for some elements in your document. Converting to symbols and using them will dramatically reduce file size. So I converted my home button and other iPhone icons like the battery level, signal strength, and lock icon to Illustrator symbols. Again I will not elaborate anymore how to create these icons as they are normally created using various path creation tools available in Illustrator.

    iphone-fig10

    To convert to symbols, simply select the graphic element you wish to convert and click the new button from the Symbols palette, and you will be prompted with Symbol Options. Type a name for your symbol, select Graphic and click ok. Your symbol is now added in the symbols palette.

    iphone-fig11

    Step 3: Creating the face/front panel

    We need to create three elements for the front panel. Let’s create the first two, the inner black strip and the inner panel. The third one is the display window.

    You create the inner black strip the same way we created the outer frame. Two rectangular oval shapes joined to create a compound path using Pathfinder tools.

    iphone-fig12

    The inner panel’s gradient is illustrated in the image below. Gradient is angled at 45 degrees, with two inner black colors positioned near halfway at 45 and 55. Both sides fade to 80% black.

    iphone-fig13

    Part of the front panel is the iPhone speaker. You may do a simpler one since its relatively small, but I like to do everything in good details.

    Create 3 rectangular ovals similar to the figure below.

    iphone-fig14

    The first and the third oval are measured 11.3mm x 2.5mm with 1.5mm round corners and 9.8mm x 1.2mm with 0.8mm round corners respectively. The middle one need not be measured accurately as long as it covers the third oval. The middle one will be meshed speaker part.

    As usual, combine 1st and 3rd oval by subtracting the inner from the outer. While the compound path is selected, select “Flatten Transparency” from the Object Menu to convert the compound path to a whole and flatten shape. Make sure the compound path solid filled and doesn’t have an outline. Please refer to the image on settings applied using this tool.

    iphone-fig15

    Now we need to divide the thick oval shape to apply shading and reflection. Create a similar path as illustrated in the image below. Make sure you create a mirror copy of the cutting path then position it symmetrically on the lower right part below. While the cutting path and the oval shape are selected, apply the “Pathfinder Divide” tool. Do the same with the cutting path below.

    iphone-fig16

    Select the oval shape, right click and select ungroup to separate the divided shapes. When outlined, you will have a similar shape like the one below.

    iphone-fig17

    Now let’s fill up those speaker shapes. The top part of the oval we divided will be solid black. The lower part will be filled with gradient from gray to white angled at 45 degrees with similar positions indicated in the image below. To fill the middle part or the speaker mesh with the dotted pattern, we need to create a pattern similar to the one shown below. Then drag that pattern to the “Swatches Palette” to create a pattern swatch. Then apply that pattern to the middle part to create a speaker mesh look.

    iphone-fig18

    Step 4: Display window

    Now this is getting long. I hope I’m not getting you bored. Don’t worry, we’re almost there. Let’s create the front display window by creating another rectangular shape object. Create a rectangle measuring 148px by 220px with slightly rounded corners of around 2 pixels. Create another rectangle this time measuring 144px by 216px but this time no rounded corners. Subtract the inner from the outer. Fill it up with 80 to 90% black.

    iphone-fig19

    Let’s fill our screen display with some wallpaper. I don’t want to make this tutorial the longest vector tutorial ever, so I’m cutting it short by just grabbing an image from our previous Photoshop tutorial, Creating a Cool Fabric Background Using Reflected Gradient Tool.

    Position the image exactly in the middle or you may use a “Clipping Mask” to the exact boundaries of your image by creating or copying the inner rectangle and placing it on top of the image. While both the image and the clipping shape are selected, right click and select “Make Clipping Mask” to clip the wallpaper image. I have slightly lowered the transparency to 75% to give our wallpaper the right blend on the display panel.

    iphone-fig20

    Now we will place all the icons from the symbols palette and some text on our display. But before we do that, let us create two rectangular bars as placeholders for our icons and time/date display. The following are measured 144px by 9px and 144px by 43px. The top bar is filled with 80% black while the bottom one is filled with gradient fill of various gradient points.

    iphone-fig21

    Gradient settings for the bigger bar below are illustrated in the image below.

    iphone-fig22

    Place these bars on top of the display as shown in the image below. Set the top bar transparency blending mode to “Multiply”. Set the bottom bar blending mode also to “Multiply” but give it 80% transparency.

    iphone-fig23

    Now we are ready to place all icons and text on our display. Icons and text are filled with 30% black. Also place a copy of the time/date gradient bar at the bottom part of the display area (this should hold the “slide to unlock” button which I’m sure you’ll be able to create once you fully understood everything in this tutorial). See our almost done image below.

    iphone-fig24

    One final piece before we do the last step is the reflective triangular part on top of the iPhone to add some highlight to our piece. Draw a triangular shaped object similar to the one shown below, fill it with white and set transparency to 10%.

    iphone-fig25

    Step 5: Mirror reflection

    Finally, our iPhone piece is done. Let’s do a quick one for mirror reflection. Before we do that, let’s add some shadow below our iPhone by creating two shapes, inner one is dark gray (or black) and outer part is white. Select both objects, go to Objects > Blend > Make. Presto, we have our shadow.

    iphone-fig26

    Create a mirror copy of the iPhone and place it underneath. The Mirror Tool is located right below the Rotation Tool in the Tools palette.

    iphone-fig27

    Now create a rectangle enough to cover the mirrored image. Fill it with gradient similar to the one in the image below.

    iphone-fig28

    The magic trick to make the reflection appear is done by using the “Make Opacity” option inside the Transparency Palette.

    iphone-fig28

    While the mask and our mirrored image are selected, click the “Make Opacity” option. Make sure the “New Opacity Masks are Clipping” and “New Opacity Masks are Inverted” are both checked.

    iphone-fig30

    Lastly, add some blur to the reflection by applying “Gaussian Blur” from the Effect Menu, and set blur effect radius at 5.0. Then set the reflection image transparency to 50%. DONE!!! I hate doing tutorials. =). Let’s go back to doing more freebie downloads next time, ok?

    Once again… the final image of our very own vector iPhone.

    vector-iphone

    Vector source file download link:
    GDFR Vector iPhone vector source files (Illustrator ai, EPS and PDF) – 9.47MB

    Alternate download link:
    GDFR Vector iPhone vector source files (Illustrator ai, EPS and PDF) – 9.47MB

  • 42 Responses to “Vector Tutorial: Creating Your Own Vector iPhone”

    • […] Vector Tutorial: Creating Your Own Vector iPhone | Graphic Design … […]

    • […] Vector Tutorial: Creating Your Own Vector iPhone | Graphic Design … […]

    • Mchilly on May 12, 2009

      Nice Tutorial :-)

    • clipping path on May 13, 2009

      I love the amount of details you gave in your instructions through this tutorial. Great example. Looking forward to more from you.

      Regards,
      background removal services

    • John201 on May 17, 2009

      Very nice site!

    • […] done another vector tutorial for quite some time now. Our last vector tutorial here was “Creating Your Own Vector iPhone” which I did almost two months ago. And I work on it for around two or three days I think. […]

    • Michael on August 1, 2009

      Any way that someone can get me a high-resolution png version of this phone? I’ve been looking for a photograph of an iPhone that I can manipulate for some poster-size prints, but never occurred to me to use a vector-based image! mikee60369 “at” aol “dot” com. Thanks!

    • Graphire on August 3, 2009

      Hi Michael. I emailed you the same vector iPhone I used in this tutorial. Files attached are pdf and png. I hope you get to use them. Enjoy.

    • Berlin on September 1, 2009

      Hi im planing to make a big poster a need your vector file to used as display. Can you share with me?

    • Graphire on September 1, 2009

      Hi Berlin. Sure you can use it. I’ll email it to you tomorrow.

    • Riekelt Pasterkamp on September 9, 2009

      Hi there,

      I’m also planning on making some big posters and leaflet folder with a phone on it.
      I’ve been searching the web for hours but I can’t find a decent large iPhone photo or vector. Is it OK if I use yours? Could you share it with me? By the way yours looks amazing, very accurate!

    • Dana ODell on September 23, 2009

      Hi,

      Do you think you could send me your vector art of the iPhone? I’m looking to use it in a brochure.

      If you would be able to send it ASAP, I would really appreciate it. My deadline is later today. :)

      thanks!

      -Dana

    • Graphire on September 23, 2009

      Hi Dana. I sent the iPhone vector source file to your email. Hope you make it to your deadline today. All the best.

    • Oscar Valdez on October 2, 2009

      Very nice artwork. Is there any chance you can post the source (.ai) file somewhere or email it to me? Seems like many people would find it useful. Thanks, Oscar.

    • james deezolio on October 6, 2009

      beautiful work, could i possibly bother you for the PDF? I’d like to see the final work and attempt some graphics with it? thanks in advance… james

    • Graphire on October 9, 2009

      Ok guys. Due to a lot of requests, link to the vector source file of our iPhone tutorial is now added. Please find the link somewhere below the article. The archive file provided contains 3 file types, Adobe Illustrator ai (CS4), EPS (Illustrator 10) and PDF. Hope you find it useful. Enjoy!

    • […] seems like ages since I last shared a vector tutorial here. The last one was “Vector Tutorial: Creating Your Own Vector iPhone“, and with the quite busy schedule I’ve had these past few months I haven’t got […]

    • Marcia on March 17, 2010

      Hi, I have been looking everwhere for a large printable vector iphone and finally i found this! I downloaded the GDFR-vector-iphone.rar file but wont open on my computer i’m on a mac so not sure if that’s the problem.. If you had a chance could you email me the files it would be much appreciated!! thank you again love the look!

    • Graphire on March 17, 2010

      Hi Marcia. You need to download a rar extractor for Mac. You may want to try unrarx. Download it from this link http://www.unrarx.com/. HTH.

    • Rikers on March 29, 2010

      Hello, Nice work with this device ! I tried to redo it, but I’m having a lot of troubles with the meshes (not on the top shape, but on sides) it’s just going everrywhere oO !

    • […] Vector Tutorial: Creating Your Own Vector iPhone […]

    • nick lamb on May 24, 2010

      hi there, wonder if you could send me the iphone vector, looks great i want to use it for a catalogue im creating on apple hardware and software. Kind regards Nick.

    • Graphire on May 25, 2010

      Hi Nick. The download link is just below the post, under the text heading “Vector source file download link:”.

    • […] mesh tool in one of my tutorials here in designfreebies.org. You may want to check our “Vector Tutorial: Creating Your Own Vector iPhone” to learn a few things about gradient mesh […]

    • Md.Saiful Alam on June 26, 2010

      Oh Great!!!
      Nice tutorial for creating the vector iPhone

    • Clrxprt on June 30, 2010

      Really eye dazzling vector work

    • soonryenzycle on August 26, 2010

      hi,
      how are you today

    • Kurt on October 23, 2010

      i’m looking to make a costume for Halloween everything i try to blow up is low res Could I use your vector art?
      631-949-2628 is my cell
      thanks
      Kurt

    • gmc on October 26, 2010

      hi

      i can’t get the link to the vector image of the iphone to work.

      would you mind sending me another link?

      thanks!

      gerald

    • Graphire on October 26, 2010

      Hi gmc. The mediafire download link is working fine. But if you’re having trouble downloading from your end, I have provided an alternate link above. Thanks.

    • Rosena Hibbs on January 18, 2011

      Thanks for taking the time to share this, I feel strongly about it and love learning more on this topic. If attainable, as you gain expertise, would you thoughts updating your weblog with additional data? This can be very useful for me.

    • Email Extractor on April 10, 2011

      i certainly enjoy this post, several really useful things to remember have been talked about about extracting emails here.

    • Albert on June 5, 2011

      Hi Graphire. I can’t seem to find the link to download the file. I searched the site for “Vector source file download link” with no matches. Would you please send me a copy to my e-mail please? I would really appreciate it. I’m trying to do a promo for a made-up app for a class. Thanks!

    • Graphire on June 5, 2011

      Hi Albert. The download link is just beneath the last and final image of the iPhone tutorial. There is also an alternate/mirror link below that link.

    • George on August 17, 2011

      Thanks for the tutorial! This was really helpful.

      ** Get photoshop clipping path services from http://www.theclippingpath.com **

    • leul on May 25, 2012

      As real as a picture

    • Mostafizur on June 23, 2013

      Nice tutorial.Thanks for sharing.

    • Graphic Clipping Path on August 2, 2013

      What a wonderful tutorial. Thanks for share such a learning post

    • Clip on March 17, 2014

      What a great piece of tutorial. This is exactly what I’m searching for.

    • […] Create a vector iPhone […]

    • […] Create a vector iPhone […]

    • Clipping path gallery on November 3, 2014

      Great sharing with real life example.

    Leave a Reply


PHVsPjxsaT48c3Ryb25nPndvb19hZF9mb290ZXI8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2Zvb3Rlcl9hZHNlbnNlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRfZm9vdGVyX2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtNDY4eDYwLTIuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfZm9vdGVyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FsdF9zdHlsZXNoZWV0PC9zdHJvbmc+IC0gZGVmYXVsdC5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzE8L3N0cm9uZz4gLSA2OTRGNUQ8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMTE8L3N0cm9uZz4gLSBBMzk1OEE8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMTE3PC9zdHJvbmc+IC0gNjY4NTc1PC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzEyNzwvc3Ryb25nPiAtIDRCNjI2MjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl8xMzI8L3N0cm9uZz4gLSA0QzYyNEI8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMTMzPC9zdHJvbmc+IC0gNjQ0RjUwPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzEzODwvc3Ryb25nPiAtIEEyODY5NDwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl8xNjU8L3N0cm9uZz4gLSA4NkEyOTM8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMTY4PC9zdHJvbmc+IC0gNjI0QjRDPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzE4Njwvc3Ryb25nPiAtIDM1MzU0NjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl8yMDE8L3N0cm9uZz4gLSA2MjRCNTc8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMjA1PC9zdHJvbmc+IC0gNjI1NjRCPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzIxNzwvc3Ryb25nPiAtIDRCNTc2MjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl8yMTg8L3N0cm9uZz4gLSA1NzYyNEI8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMjU8L3N0cm9uZz4gLSA0QjYyNTY8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMjcxPC9zdHJvbmc+IC0gNEI0QzYyPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzI5PC9zdHJvbmc+IC0gNjQ2MzRGPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzM8L3N0cm9uZz4gLSA2MjYyNEI8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMzA4PC9zdHJvbmc+IC0gNEY2OTVCPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzMxMTwvc3Ryb25nPiAtIDU2NEI2MjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl8zMjA8L3N0cm9uZz4gLSA2MjRCNTc8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfMzM8L3N0cm9uZz4gLSA2OTdBODY8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfNDc8L3N0cm9uZz4gLSA0NjM1M0U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfNTc2PC9zdHJvbmc+IC0gNjM0RjY0PC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzU3Nzwvc3Ryb25nPiAtIDY0NTg0RjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl81Nzg8L3N0cm9uZz4gLSA4QzY5N0M8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfNzUzPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzc3PC9zdHJvbmc+IC0gNEY1MDY0PC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzc3NDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl84MDE8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfY29sb3JfODA0PC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY2F0X2NvbG9yXzg0Njwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl84NTwvc3Ryb25nPiAtIDRGNjQ1ODwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl85MTwvc3Ryb25nPiAtIDg1NjY3NjwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9jb2xvcl85NDwvc3Ryb25nPiAtIDM1NDYzNTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8xMTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8xMTc8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMTI3PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzEzMjwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8xMzM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMTM4PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzE2NTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8xNjg8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMTg2PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzIwMTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8yMDU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMjE3PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzIxODwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8yNTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8yNzE8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMjk8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8zMDg8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfMzExPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzMyMDwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl8zMzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl80Nzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl81NzY8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfNTc3PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzU3ODwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl83NTM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfNzc8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfNzc0PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzgwMTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY2F0X25hdl84MDQ8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2NhdF9uYXZfODQ2PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2Xzg1PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2XzkxPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jYXRfbmF2Xzk0PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fY3NzPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY3VzdG9tX2Zhdmljb248L3N0cm9uZz4gLSBodHRwOi8vd3d3LmRlc2lnbmZyZWViaWVzLm9yZy93cC1jb250ZW50L3dvb191cGxvYWRzLzgtZGVzaWduZnJlZWJpZXMtZmF2aWNvbi0zMngzMi5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly9mZWVkcy5mZWVkYnVybmVyLmNvbS9kZXNpZ25mcmVlYmllcy92d2dzPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2xvZ288L3N0cm9uZz4gLSBodHRwOi8vd3d3LmRlc2lnbmZyZWViaWVzLm9yZy93cC1jb250ZW50L3dvb191cGxvYWRzLzctZGVzaWduZnJlZWJpZXMtbG9nby0yMDEzLnBuZzwvbGk+PGxpPjxzdHJvbmc+d29vX21hbnVhbDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9zdXBwb3J0L3RoZW1lLWRvY3VtZW50YXRpb24vd29vdGhlbWUvPC9saT48bGk+PHN0cm9uZz53b29fcG9zdF9zaXplPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19yZXNpemU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3Nob3J0bmFtZTwvc3Ryb25nPiAtIHdvbzwvbGk+PGxpPjxzdHJvbmc+d29vX3NpZGViYXJfYWRfaHJlZl8xPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fc2lkZWJhcl9hZF9ocmVmXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19zaWRlYmFyX2FkX2hyZWZfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX3NpZGViYXJfYWRfaHJlZl80PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fc2lkZWJhcl9hZF9pbWdfMTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTEyNXgxMjUtMS5naWY8L2xpPjxsaT48c3Ryb25nPndvb19zaWRlYmFyX2FkX2ltZ18yPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtMTI1eDEyNS0yLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX3NpZGViYXJfYWRfaW1nXzM8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy0xMjV4MTI1LTMuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fc2lkZWJhcl9hZF9pbWdfNDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTEyNXgxMjUtNC5naWY8L2xpPjxsaT48c3Ryb25nPndvb19zaW5nbGVfdGh1bWI8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3RoZW1lbmFtZTwvc3Ryb25nPiAtIG15d2VibG9nPC9saT48bGk+PHN0cm9uZz53b29fdXBsb2Fkczwvc3Ryb25nPiAtIGE6NTp7aTowO3M6ODc6Imh0dHA6Ly93d3cuZGVzaWduZnJlZWJpZXMub3JnL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvOC1kZXNpZ25mcmVlYmllcy1mYXZpY29uLTMyeDMyLnBuZyI7aToxO3M6ODM6Imh0dHA6Ly93d3cuZGVzaWduZnJlZWJpZXMub3JnL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvNy1kZXNpZ25mcmVlYmllcy1sb2dvLTIwMTMucG5nIjtpOjI7czo4MzoiaHR0cDovL3d3dy5kZXNpZ25mcmVlYmllcy5vcmcvd3AtY29udGVudC93b29fdXBsb2Fkcy82LWRlc2lnbmZyZWViaWVzLWxvZ28tMjAxMS5wbmciO2k6MztzOjgwOiJodHRwOi8vd3d3LmRlc2lnbmZyZWViaWVzLm9yZy93cC1jb250ZW50L3dvb191cGxvYWRzLzUtMy1kZXNpZ25mcmVlYmllcy1sb2dvLnBuZyI7aTo0O3M6Nzg6Imh0dHA6Ly93d3cuZGVzaWduZnJlZWJpZXMub3JnL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvMy1kZXNpZ25mcmVlYmllcy1sb2dvLnBuZyI7fTwvbGk+PC91bD4=