1. The new WDWMAGIC app for iPhone and iPad is now available on the App Store.

    Dismiss Notice
  2. Welcome to the WDWMAGIC.COM Forums!
    Please take a look around, and feel free to sign up and join the community.You can use your Twitter or Facebook account to sign up, or register directly.
    Dismiss Notice

The Imagineer's Workshop

Discussion in 'Imagineer' started by englanddg, Aug 17, 2014.

  1. englanddg

    englanddg One Little Spark... Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    I'm creating this thread for fellow Imagineers in the forum to post examples of their work, with a caveat.

    You MUST describe the:

    a) Process you went through to create it
    b) The tools you used
    c) Any tips or links to instructional videos for said tools

    Think of this as a place where you can share and discuss graphic design, video design, the tools used to create it, and any tips you may have for others. The overall idea is that we not only get to show off a bit, but also get to help others learn to do things differently. After all, part of Imagination is learning how to express your ideas and share them with others!

    I'll start.

    I use Paint.NET as a graphics editor. For several reasons.

    1) It's free
    2) It's powerful (has filters, layers, etc.)
    3) It's free
    4) It's got a large community that supports it and has instructions on how to do all sorts of cool things here.

    http://forums.getpaint.net/

    Here's an example of a map for a competition that was done in Paint.NET

    map-v7-parchment.jpg

    This was done with several layers. First, the far background layer is the actual layout of the area (Superhero Island at Universal Studios Florida) that was being redone.

    Here's what it looks like without the Parchment layer, and the map layer set to a partial transparency to allow the drawn portions of the map to stand out.

    map-v8-parchment.jpg

    The layers are in this order.

    1) Bing Maps screenshot, using <CTRL PRINT SCR> and trimmed / cropped to suit my needs and placed as the bottom layer
    2) Parchment background obtained from a google images search, touched up, and resized to fit my needs
    3) Rovianion
    4) Shire
    5) Rohan and Gondor
    6) Mordor

    This allowed me to seamlessly integrate the areas, while also drawing them separately (over separate days) and still keep them in line with the real world map by removing the parchment layer.

    The roads were hand drawn and shaped using the line tool.

    The lake was filled in by doing a copy / paste of a small selection of the "sea" from a Tolkein map found with a google image search. Then cutting and pasting randomly to fill the area (if you look closely, you'll see what I did).

    The lonely mountain map was taken off of a Tolkein map from the Hobbit (again found through google image search), opened up in another tab in Paint.NET, zoomed in and snipped it, then enlarged it to scale with my map.

    The mountains and trees were obtained in a similar manner. For all of these, I had to make them transparent, so they didn't have a white blotch over the parchment, and that was done, by hand, using the eraser tool.

    For the forests, I randomly pasted a section of the trees over and over again, and then erased any overlaps by hand with the eraser tool.

    Also, I used very specific colors. I wrote them down (the RGB values) in Notepad and stored it, so when I would go to work on the map, I knew what my exact colors were.

    You'll also notice the custom fonts. Those came from here:

    http://tolkiengateway.net/wiki/Fonts

    And the actual font was Tolkein.

    This is downloadable as a TrueType Font (ttf), and is easily installed on a windows machine (not sure about a mac, though I'd imagine it's easy there, too). All you do is download the font, extract the zip file, right click on the ttf file and choose "Install". Then, it will show up in all your programs that access the windows font library.

    The names of the regions were taken off of a Tolkein Map and rotated as needed.

    So, there ya go! Feel free to ask questions of each other, this is a discussion, not a lecture thread, and join in with your own examples, tips and ideas!
     
    Last edited: Aug 17, 2014
  2. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    I am excited about this thread!
     
  3. Zweiland

    Zweiland Well-Known Member

    Joined:
    Jun 8, 2013
    Messages:
    3,446
    Likes Received:
    12,097
    Love this thread idea.
     
    MonorailRed, englanddg and Voxel like this.
  4. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    For Mac, either unrar/unzip the file they give you and click the ttf, the follow window should appear. The program should be call Fontbook
    Screen Shot 2014-08-17 at 9.43.08 PM.jpg

    Click install.
    If necessary reopen desired program to re-initialize the font the program uses.

    To delete or edit any fonts, go to other/utilities folder in the Launchpad and click Fontbook or type Fontbook until it appears.
     
    Zweiland and englanddg like this.
  5. Zweiland

    Zweiland Well-Known Member

    Joined:
    Jun 8, 2013
    Messages:
    3,446
    Likes Received:
    12,097
    I use Inkscape as a graphics editor. To quote @englanddg:

    1) It's free
    2) It's powerful (has filters, layers, etc.)
    3) It's free
    4) It's got a large community that supports it and has instructions on how to do all sorts of cool things here.

    http://www.inkscapeforum.com/

    Inkscape is a vector graphics editor (like Adobe Illustrator), which means that instead of using a grid of pixels to represent shapes, it uses mathematical equations. Because of this, you can zoom in on a vectorized image or shape and it will not get more pixelated.

    I will provide three examples of images made in Inkscape. Each was created in a different way. If you have any questions or want me to go into more detail, please reply and I would be glad to do so.

    Also, you can read through this to get an idea of basic navigation and tools:
    http://inkscape.org/doc/basic/tutorial-basic.html

    1) The Bavarian Village

    [​IMG]

    This was facade art that I created for the SA comp for Monster Gorge in IOA. To start, I did some research and found a picture of a real Bavarian village to use as reference.

    As you can see, many of the shapes I drew (like the windows) are simple rectangles. Drawing the rectangles is easy. It's the correct placement, to achieve an aesthetically pleasing design, that's the hard part.

    Once you've drawn a rectangle, change the stroke and fill colors. The stroke is the color of the border around the shape. The fill is the color of the inside. You change the stroke and fill by selecting the object, then clicking the area in the upper right that displays the current stroke and fill.

    What if you want a shape that's not a simple rectangle, circle, or polygon? There are a few options:

    -Use the Node tool. Select a shape you drew and use Shift+Ctrl+C to convert the object to a path. Then click the Node tool on top, where you can add, drag, and modify nodes. There are two types of nodes: corner and smooth. Corner nodes were used to make the base of the building wider on the bottom in the Bavarian village example. Smooth nodes were used to create the green part of the rosebushes outside the windows.
    -Draw freehand. Use the Pencil tool to draw freehand shapes and lines, and the Pen tool to draw different styles of freehand lines. The Pen tool was used to draw the individual roses on the bush.
    -Use Bezier curves. Use the Bezier curve tool to draw a shape using curves and straight lines. Click one point and then another to make a line, or click and drag to make a curve. Edit the curves using the Node tool if necessary.

    2) Australian landscape

    [​IMG]


    In nature straight lines are very rare. Simple shapes won't do the trick. To draw a landscape picture the key is to draw each piece on a separate canvas, and then combine everything to form the result. In the picture above each shape started out as a rectangle, but I used the Node tool to make them increasingly more complex.

    3) I don't know what this is

    [​IMG]

    I created this as an experiment, so I don't know what it is exactly.

    I drew the outline on paper first, scanned it in, and copied it into Inkscape. Then I used Shift+Alt+B to vectorize the drawing. I used the Node tool to make small edits, and finally I used the Fill tool to add color.
    __________________________________________________________________________________________

    So there you have it. Three basic ways to create content in Inkscape. I didn't give the whole story of my process, because I encourage you to find one that works. Everybody is different, so you might find different (better?) ways to do accomplish the same things I did. Good luck!
     
  6. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    @Zweiland I love this, I am gonna have to try this out when I get some time, I need to create some background for a game or two. I will see if this works

    @englanddg The only downside with paint.net its a Windows (7sp1 and higher) program. Its brilliant for window users but limited to only Window users. :D
     
    Zweiland and englanddg like this.
  7. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    Paint.NET has been around longer than Win 7.

    http://www.oldapps.com/paint_net.php?system=windows_xp

    But yes, the current version requires it or a later version. That being said, if you aren't on 7 or higher, time for an upgrade if you are doing graphics work. :p
     
    Zweiland and Voxel like this.
  8. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    Along with the ungodly amount of security risk.
     
    englanddg likes this.
  9. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    7 is solid. My advice for those looking at 8? Download Classic Shell first thing. Just google "Classic Shell".
     
    Zweiland and Voxel like this.
  10. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    I am gonna work on a document about sketch up tomorrow
     
    englanddg and Zweiland like this.
  11. Zweiland

    Zweiland Well-Known Member

    Joined:
    Jun 8, 2013
    Messages:
    3,446
    Likes Received:
    12,097
    Can't wait!

    I've used it before (for Vino's last year). But I never got past the basics.
     
    englanddg and Voxel like this.
  12. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    Good deal. I'll talk about some things later (video editing), but not right now. For obvious reasons. :p
     
    IDInstitute, Voxel and Zweiland like this.
  13. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    So I am working on the Sketch-up post now, but Grad School is starting a week earlier then I thought (Today instead of next week) and I am gonna be trying to get ahead so I can go on a Stress Free Disney Trip in November.
     
  14. RMichael21

    RMichael21 Well-Known Member

    Joined:
    Nov 2, 2013
    Messages:
    4,588
    Likes Received:
    12,309
    Good Luck with Grad School!
     
    Voxel likes this.
  15. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    Mocha...Very nice...

     
    Voxel and jdmdisney99 like this.
  16. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
  17. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678
    Next, we'll talk websites (maybe tonight, but certainly over the next few weeks).

    But, I'll leave you with this first.

    Websites are about design working in harmony with code. It's common to focus on the code, yet ignore the design.

    I'd recommend, if you have time, actually creating the basic look and feel of the site first in Paint / Paint.NET or whatever editor you use for graphics.

    Paint works well for this, actually, as it's easy to set it it up to "look" like your site will actually look. That way, when you start coding, you know where you are going.

     
    Voxel, RMichael21 and Zweiland like this.
  18. Voxel

    Voxel President of Progress City Premium Member

    Joined:
    Sep 12, 2013
    Messages:
    10,572
    Likes Received:
    24,987
    This should be done in any instance where user interface could play a role. Always draw a mock up
     
    englanddg and RMichael21 like this.
  19. MonorailRed

    MonorailRed Applebees

    Joined:
    Mar 13, 2013
    Messages:
    4,438
    Likes Received:
    14,798
    That is a great video! I'm taking notes… :bookworm:

    Speaking of art, I may do a thing on Adobe Illustrator and how I do my art, this weekend, if I have time.
     
  20. englanddg

    englanddg One Little Spark... Original Poster Premium Member

    Joined:
    Jun 19, 2012
    Messages:
    39,322
    Likes Received:
    75,678

Share This Page