|
||
|
Arts, Creativity, Sigs, & Avatars Movie Production, Artwork, Animations, Sounds and other creative things to do with Pixie Hollow and Disney. |
PH Dress-Up Game Project **PDFs & helpers needed!** |
Login or Register now to see less ads. |
|
Thread Tools | Display Modes |
#16
|
||||
|
||||
I can do some of the de-coloring. I have some spare time lately and am a digital illustrator for a living, so this would be easy.
Wish I knew more about Flash and could help build a dress-up game. Actually, I do know it enough to make a very simple game, but it would be a lot of hard work that I just wouldn't enjoy. I do want to contribute to giving us all a piece of the Hollow back, so I'll keep an eye out for more ways to contribute. __________________ |
#17
|
||||
|
||||
Here are the tutorials for every step of the process. I took the time to write them up so that I won't be the only one working on these. Please have a read and let me know if you'd like to take on any of these roles. If you're confident, you can work on one item from start to finish, I simply divided the workload so that everyone would be able to participate.
I just want to say that I did try to make the tutorial understandable for graphic beginners, so I hope that some of you might even be able to learn something new from them. This tutorial is for GIMP, but the steps in Photoshop should be very similar. Please let me know if anything could be altered. Uploading: Uploading is fairly straight-forward. Simply follow this link and follow the instructions there.
Please Read before going any further:
Cropping: Learning how to crop images is very simple! This tutorial will be using GIMP, but the steps for Photoshop should look very similar. Step 1: First you have to find the file. If it has already been uploaded, check the table to find out the name of the file and in what location it is. For example, the Sunny Days Hat is in the Dropbox folder, with the file name being "blue merry marchers". Step 2: Open the file in GIMP (or another program). You can simply drag the PDF or PNG file from your folder/Desktop/etc. onto the canvas. If opening a PDF file , set the Resolution to 200 (the default is 100, we need it to be twice as large). Another alternative is to zoom in on the PDF (when it's opened in a PDF viewer), take a screenshot and paste it into GIMP. Step 3: Make sure that none of your layers are going to be bolded. This means that it won't be transparent if you use the eraser. Right-click on the layer and select "Add Alpha Channel" to change it from bold. Here's an example of the difference between adding or removing the Alpha Channel: Step 3: Now it's time to crop! Zoom in somewhere between 400-800% (800% is most preferred) and select the Free Select Tool (the one that looks like a lasso). Click on the edge of the item and start adding points along the edge, creating the cut line. To undo a point, press Backspace or move your mouse over the point and click and drag it to another spot. Pay attention to the detail and try your best to not create a choppy edge. Adding more points increases accuracy. Your selection will appear once you complete the circle and connect the last point to the first one: Now press Ctrl+C, then Ctrl+V, then right-click the new "Floating Selection" layer and select "New Layer". You now have the item on a separate layer. If you cannot select the whole area in one go, then repeat the same process with the next area, but then right-click the new layer and select "Merge Down" to merge it with the other layer. Once you're finished with that, right-click on your very first/bottom layer and choose "Delete Layer". Have a look at your new layer and check that the edges look all right. You might notice that some areas within the item shape are still white (such as the spaces between the flowers on the hat) - these need to be removed. Select the white areas using the Free Select Tool and once they are selected, hit the Delete key to remove them. You can then proceed to crop the layer to the correct size. Go to Layer > Layer Boundary Size... Increase the Width or Height (does not matter which one) and then press the "Center" button and then "Resize". This allows the layer to be just a little bit bigger. Now go to Image > Fit Canvas to Layers. Your image is now ready to be saved! Go to File > Save As... (or Export for more the recent GIMP version) and name the file "<item name> Cropped.png". If it is a Queen's Boutique, Clickables or Secret Code item, this will be the last step for the item, so just name it "<item name>". As you can see, my cropping is not 100% perfect, but it doesn't have to be. Upload the cropped file to the Dropbox file (see the "Uploading" section) or continue to the next step. Background Coloring: For the following instructions, I've created a video tutorial that might be of some help. I show the steps that I take to make a perfect finished product, but if you can't follow the steps, don't panic! Have a go and send me what you have - I'll always be able to fix them up for you if needed. Now we need to create a color base image for the item that you would be able to align below the semi-transparent template. This step is similar to cropping except with a few more techniques. Step 1: Find out how many colors the item can be dyed in by checking the table. For example, the Sunny Days Hat has 2 colors. If there is a note saying "(overlap)", please ignore that item for now and choose another one. Step 2: Figure out what areas of the item are dyed. Search the item name on the Wiki and check the item in different colors. The Sunny Days Hat for example, has the flowers in one color and the bow dyed in another. Step 3: Now you can begin selecting your first (and possibly only) color area. Choose the Free Select Tool and create an outline around the item (see the "Cropping section"). I started with the bow: Remember that you do not have to follow the edge where it touches transparency (see the hanging ribbon end on the hat). Now that it is selected, choose Ctrl+C, then Ctrl+V, then right-click on the new layer and select "New Layer". Right-click your new layer and select "Alpha to Selection". Pick the Eyedropper tool and click on the brightest patch of color on the item (see Step 3 of the Decoloring tutorial below). Right-click anywhere in the layers box and select New Layer..., press OK. Select the Bucket Fill tool and click within the selected area. Choose the Rectangle Selection tool and click anywhere outside the selection tool to deselect. You now have your very first color filled area: Step 4: Do the same thing for the second color area, if there is one. Make sure that it will be on its own separate layer too. Step 5: Now you should change the color of the new layer(s) to a very light yellow/close to white. To change the color tone of a layer, select it and go to Colors > Colorize... Increase the Lightness closer to 100, drag the Hue over to somewhere closer to 60. This is for the layer with the primary color. For the secondary color layer, make it a light gray color. Have the Lightness be at about 80 (but it's always different) and Saturation closer to 20 (the Hue should be about 60 too). Step 6: Hide the rest of the layers (click on the eye next to them) except for one color area that you have created. (Do not worry if the color goes within areas that are not dyed, the template will go over the color base, so it won't be seen.) Go to File > Save As... (or again, Export for the newer GIMP verion) and name the file "<item name> Color.png". Press Export, then OK. If the item has a secondary color, hide the primary color layer that you have just saved and show the second color layer. Save it in the same way as you did before, except name the file "<item name> Color2.png". Note: Please do not change the image or layer sizes. I'd like them to be the same size as the cropped and template images. Also note that in this image below I have merged both colors together. If you follow the instructions above, you will have two separate PNG images. Congrats, you've finished this step! Upload the file(s) to the Dropbox folder or continue onto the next step. Decoloring: Welcome to the most challenging step (but don't worry, it's not too difficult ) For this step you are going to need both the cropped and color base images. If others have uploaded them onto Dropbox, they will be called "<item name> Cropped.png" and "<item name> Color.png". Open them in your image editing program on separate layers and let's get started! Step 1: Check which areas are supposed to be dyed and which aren't. Again, the Wiki is a super helpful tool to figure this out. Cut out the non-dyeable areas first from the Cropped layer and have them sit on a separate layer. I assume that you would know how to use the Free Select tool at this stage. Create a white layer at the bottom if you want to see a clearer view. Remember that you can hide or show it when needed. Step 2: Now you should create a layer with the part of the item that will be semi-transparent. If there are two colors (like in the Sunny Days Hat), have these two pieces sit on different layers. For example, in the image below, these two layers are named "colour area1" and "colour area2". This is what your layer list should look like: (I added names to it so that it makes more sense) Step 3: What you have to do now is remove the color from the "colour area" layers. I will explain the technique that I use myself, but it may not always work out perfectly. If you bump into any problems, feel free to ask for help. Here I'll start with "colour area1" (the red bow). Select this layer and copy the brightest color that you find, using the Eyedropper tool. Here's an example of what to look for: The color that I have selected above seems to be the closest to the original dye. Not too white and not too dark. Once you have copied the color, click on the foreground color box and press OK (so that the color saves in the most recent color list). Important Note: If you know the dye name for your item, copy the HTML code from the Palette in the first post of this thread. Click on the Color tool (the foreground color box), paste the code into the box titled "HTML notation" and press Enter, then OK. Now click on the background color box (the color box that is below the foreground one), select that same color (in my case it is red) and press OK. Select the Blend tool (the one that looks like a gradient square) and in the Mode option choose "Color erase". Select the gradient that flows from foreground to background (so it will look like one color in the menu) Swipe your mouse over the area (make sure that the correct layer is selected) and it will remove the color from the layer. The best part is that your "color base" layer already sits directly below the layer you are erasing, so when you remove the color, what you see shouldn't change at all, or only slightly. For example, see the before and after effect here: It may seem that nothing has changed at first, but in fact your layer is now semi-transparent and works like a charm! (see the layer that I highlighted in yellow). Here is what it should look like if you hide the color base layer underneath: Pretty cool, huh? You might like to remove the blue spots though. To remove the rest of the color, go to Colors > Desaturate and select the Luminosity option. Now all that is required is to do the same thing for the other color area if needed. Finally, hide your white layer and save your file in PNG format. This is what my ending product looks like: The bow and flowers should be the same color as your forum background since they are semi-transparent. And that's that! There are a few other ways of removing the color, but I felt that this was the quickest one. Upload your finished product to the Dropbox folder and I'll cross it off the list. Best of luck!
__________________
Last edited by Onionleaf; 10-09-2015 at 04:10 AM. Reason: a couple of edits |
#18
|
||||
|
||||
This is a great idea!! I’d love to help out! I will upload some pictures to the album later today.
I may be able to help with cropping and decoloring as well, but I am going to try it first and see if I am even good at it or not. I'll let you know! |
#19
|
||||
|
||||
Wow how cool is this...I unfortunately didn't save any of my dyes in pictures...sigh but at least I will be able to see them & outfits here!! Thank you Onion & everyone else!!
__________________
Where Dreams Really Do Come True TY Stormy |
#20
|
||||
|
||||
Hey Onionleaf, that is a wonderful tutorial and very helpful and detailed!
I have a problem though. I was going to help you but seems like Gimp won't download on my Windows 8 laptop. :\ It says it is compatible and it downloads but then the icon or program never shows up or is able to be accessed. I would use another program but the only other one I can think of with that advanced layer option is Photoshop - and I really dislike Photoshop.
__________________
|
#21
|
||||
|
||||
This is a really great idea, Onionleaf, thanks for posting this tutorial! I haven't had much luck with it, but I'll keep trying.
|
#22
|
||||
|
||||
How do you find DOW names for clothing items?
Is there some easy way to figure out what an article of clothing is called? I tried "Disney Online Worlds", "Pixie Hollow Shoes" but there are hundreds and hundreds, and they seem organized by color.
Also, some long skirts articulate. This means that some long skirts have a "front" layer and a "somewhat less front" layer. I assume the long sleeve tops articulate too. I tried to get wide and narrow pdfs of some of the long skirts. Stormy
__________________
signature by the talented _Stormy_ (I am the other Stormy!) |
#23
|
||||
|
||||
Okay, almost done with organising the files that have been uploaded today. There have been so many submissions that it's taking me hours to process them, yikes!
Here are a couple more jobs that you might be interested in: 1) I'm going to step back from going through the files and creating lists and try to work on the actual model, in order to figure out how the dress-up game could work. If anyone would like to help with checking the Dropbox folder, send me a PM and I can give you some instructions to work through. 2) If you love designing, then maybe you could help out with designing the menu screens and the backgrounds for the game? I'm not sure yet on how it will all look in the end, but brainstorming ideas is always a good start! Maybe once I have some sort of example ready for you all soon, that could help develop the idea further. Remember that if you'd like to work on any of the items that are listed on the table, then just list them in a post here or in a PM and I'll update the table. However, I'd really appreciate it if you don't work on the tops and bottoms for now, as I have to create the model first. I'll put up a reminder of this on the first post too. Quote:
Quote:
So far I've simply been choosing the most detailed version of the skirts you have provided, Stormy. Quote:
Thank you for the kind words Bug. Do you mean that you haven't saved any of the outfits or they are not in color? If they are grey-scale then they could still be edited (depends on whether the whole item is dyeable or not), if you'd like to share.
__________________
Last edited by Onionleaf; 09-29-2013 at 07:59 AM. |
#24
|
||||
|
||||
Very interesting, indeed!
__________________
Thx Night Wish, ~Olivia
|
#25
|
||||
|
||||
Got the Pansy Headband uploaded! Sorry about not posting earlier– I've been busy on the Mainland, and I finally had time this weekend to get another item cropped.
Can I work on the Arrival Day Belt next? ^_^ |
#26
|
||||
|
||||
Sure you can, Twinklesky. It's awesome to hear that you got one item finished, but for some reason I couldn't find it in the uploading folder. Can you let me know where you uploaded it to?
And there are no deadlines for this project, everyone can pitch in whenever they have wish
__________________
|
#27
|
||||
|
||||
That's weird, I uploaded to the folder you linked in your first post. But it did say that it might take a while to appear, depending on how many items are in the queue (or something like that). Maybe that's what happened?
|
#28
|
||||
|
||||
Leaf Topper Boots Cropped
I cropped my first item. It was the left leaf topper boot. The left and right boots are identical. I hope it came out alright. I noticed that the ribbons on the boot show a gradient of color from pale to dark--this info may help for whomever does the decoloring.
Stormy Lightningcropper
__________________
signature by the talented _Stormy_ (I am the other Stormy!) |
#29
|
||||
|
||||
I uploaded about 10 things for Liri and Lori, not cropped but each file has a list of every item and color I could find, I hope this is helpful. I also have some sparrowman outfit grabs too if you want those later. Thank you so much!!!
Quote:
What I try to do is remember what shop the item was in and maybe what season I got it in and go from there. DOW has all the items organized by shop and collection so that helps. ALso if you know the color it was, you can search by that, I also sometimes do that.. Last edited by Onionleaf; 09-29-2013 at 11:11 PM. Reason: double posted |
#30
|
||||
|
||||
I had a moment to spare, so I tried it. I used one of Stormy's uploads of the Lily Top - Do not know actual name! I used Bluebell blue!
LilyTop.jpg It didn't come out as great as I would have liked it to. The background is technically transparent but it won't show for some reason. EDIT: Just saw how you said not to do tops and bottoms, but for me it was practice. I am going to need all the practice I get! Super sorry, Onion! Last edited by Jenny Hollybell; 09-29-2013 at 11:08 PM. |
Thread Tools | |
Display Modes | |
|
|