|
|
|||||||||
|
||||||||||
|
|||||||
| 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 |
|
|
|
#1
09-25-2013, 11:14 AM
|
||||
|
||||
PH Dress-Up Game Project **PDFs & helpers needed!**
Link to the Dress-Up Game: ZIP folder (40MB)
**Notice: If you have any sort of PDFs or images of outfits still left over, please upload them to this project!** What this thread is about: Basically, this thread is for organising and creating a complete fairy wardrobe with ALL the items from the retired Pixie Hollow game. It will all be downloadable as a Flash dress-up game.  Here's an example of how it all works: Simply add a color in a layer below this dye bottle and you can keep your favorite dye in a bottle. The second image shows how much you should fill up of the area. This is the way we are transforming all the PH items to make them dyeable (even Queen's Boutique gowns!). We are constantly collecting high-quality item images. In order for this to work, I'd like YOUR help with one or more of the following tasks:
If you'd like to participate, please let me know either in this thread or in a PM which of the tasks above you would like to do. You can choose one task, some or all. I will then add you to the list below so that I can keep track of who can do what.  Here are the Tutorials (link) for every task. Have a read and figure out what you are able to work on. Choose some items that you would like to work on and complete them at your own pace. Please have a read through the tutorials even if you feel confident with all of the tasks. I'd like us all to be on the same page with this project. Participants: Bellflower Mistyvale: (Uploading), Cropping, Background Coloring, Decoloring Daisybelle: Uploading, Cropping Jenny Hollybell: Quality Checker Julie Dazzleshimmer: Cropping, Extra Edits (Expressions) lillyfairy: Uploading, Dye Checking, Cropping Liri_Driftwillow: Uploading Marionette: Uploading, Extra Edits Misty_12: Uploading Rach1214: Quality Seeker rubysugarbreeze: Cropping, Decoloring StormyLightningberry: Uploading, Cropping Pending: Twinklesky: Uploading, Cropping ella_roseplume: Decoloring Working List: Ready to get started? Great, here are all of our working files: Click here! How to read the Tables: No.: Don't worry about this. It's the order I use for the items when adding them to the game. Item Name: Its name as it is on the Wiki. Please name your finished files appropriately. Finished?: 1 means the item is finished, 1 (in bold) means it's been added to the game. Obviously, a blank space means it hasn't been completed yet. No. of Colors: 0 is for non-dyeable items (Queen's Boutique, Clickables and Secret Code items), 1 and 2 shows how many dyes are used for the item. Watch out for additional commentary in brackets (e.g. do the colors blend? Any transparent features?) Overlap?: Is the item covered by something else? Y = Yes, N = No. Do the ones with N first. File name: This is the file name that you can locate on the Dropbox folder. Each file name is divided by a / (slash) sign. Status: uploaded = available for editing; if text is in blue = it's the username of the person who is currently working on that item; unavailable = can't be accessed at the moment; SVG = Don't work on these files as I have an SVG file of them. Tasks to be Done: The cells for each item in these columns will be shaded in two different colors, or left unfilled if a particular task is not required. If shaded in blue, then that task is open. If shaded in red, then it can't be worked on at all, or I will work on it myself later on. (Some red cells are added because of the question marks in the No. of Colors column, so if you can confirm them for me, that would be great). Note: Tasks can only be worked on from left to right! Please don't skip shaded cells when following this order! Links to the Working Lists: I use Google Sheets for this project, which work just like Excel files only through your browser. You can use the Filter feature (Data > Filter Views > Create new temporary filter view) if you'd like to rearrange the data and find things quickly. Headpieces Note: Headpieces are always the easiest to work on. This is a good starting place. 56 Headpieces have not been uploaded yet. Necklaces 10 Necklaces have not been uploaded yet. Tops 50 Tops have not been uploaded yet. Bracelets 18 Bracelets have not been uploaded yet. Belts 15 Belts have not been uploaded yet. Bottoms Note: Some cells are shaded in green in the "Overlap?" column in this file - this is my current To-Do List. You are more than welcome to help out with this section. 26 Bottoms have not been uploaded yet. Anklets 13 Anklets have not been uploaded yet. Shoes 33 Shoes have not been uploaded yet. Spoiler for Completed Items:
Palette: Here are all the HTML codes for the Pixie Hollow dyes! Feel free to use these for your own ideas. Spoiler for Palette:
My own Worklist: Current Main Tasks: 1) I'll add Expressions that are about 50% done at the moment. 2) Then I'll add all the basic hairstyles (this shouldn't take too long). 3) I need to re-arrange my code files to make the game simpler to update. This will take a while! 4) Finally, I'll continue working on the Skirts/Bottoms. Work-in-Progress: Wings: Done! Expressions: 2/23 --> work in progress! Basic Hair Fronts: 1/19 Basic Hair Backs: 0/20 Other Ideas for the Game:
I'll keep this thread updated and list the progress that has been made. Thank you all for your contributions and participation, I really appreciate it!
__________________
Last edited by Onionleaf; 10-19-2015 at 12:22 AM. Reason: updated to-do list 
|
|
#2
09-25-2013, 11:26 AM
|
||||
|
||||
|
Wowee!
You've been quite busy with this! I would love to see a flash game made. I'm not into programming but I hope this can one day be a reality.
|
|
#3
09-25-2013, 11:50 AM
|
||||
|
||||
|
This is an awesome idea!
|
|
#4
09-25-2013, 01:03 PM
|
||||
|
||||
|
I didn't think you could post big files like pdfs of fairies on here? Is there a way?
__________________
 signature by the talented _Stormy_ (I am the other Stormy!)
|
|
#5
09-25-2013, 01:35 PM
|
||||
|
||||
|
Whoa, this is such an amazing idea! I'd love to help out with providing PDFs of outfit pieces.
 Edit: Got a PDF of an Adventure Bonnet! Sorry if it's blurry– Photoshop keeps messing up the quality and I don't know why.  ______________________ Last edited by Twinklesky; 09-25-2013 at 02:50 PM.
|
|
#6
09-25-2013, 11:03 PM
|
||||
|
||||
|
I am sending you a HUGE pixie hug right now, that is so clever and wonderful that you could use color erase, and create the layer that went over the dye layer! :O
I would be happy to help in any way that I can! I follow directions well and have enough experience with graphics that I should be able to do some work for you ^_^ Just let me know what you need!
__________________
|
|
#7
09-23-2014, 10:39 PM
|
|||
|
|||
This is extremely impressive
Especially since you found all those colors and even made a team thank you I will have to try this sometime 
|
|
#9
10-22-2014, 08:52 PM
|
|||
|
|||
|
A project cool what is it going to be OnionLeaf?
|
|
#10
10-23-2014, 10:54 AM
|
||||
|
||||
|
Funny you should ask, since I started tinkering around with the code yesterday. I've decided to reorganise the project and divide it into several SWF files, so that I can work on one part without having to load the whole project to do so. It will look more like a tree with a trunk and branches.
 But it also means that I have to figure out how the new code works. It's always a challenge since I have hardly any background in programming.  It took the whole day today but I've figured out a huge chunk of it. There are a few more things I need to fix and once I'm done with this I'll finish adding the Tops. *sigh* The more I add, the more challenging it becomes. I can't even imagine how much time is spent on creating a whole virtual world!Lemony, this is going to be a fairy dress-up game with all of the outfits from Pixie Hollow. At least, that is the final outcome. I'll try and get as much of it done this year as I can - wings crossed!
__________________
|
|
#11
09-25-2013, 11:47 AM
|
||||
|
||||
|
Quote:
I wish I had the experience in programming or graphic arts as I admire those who do. I have fiddled with it in the past and know that it's not an easy task. Honestly, I look forward to seeing any or all of the projects that people come up with. Anything to keep our beloved Pixie Hollow alive! 
__________________
 *Thank you, ~Twi!
|
|
#12
09-28-2013, 09:58 AM
|
||||
|
||||
|
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
|
|
#13
09-30-2013, 12:26 PM
|
||||
|
||||
|
I have no clue how to do any of the cropping, etc. and I don't have time to learn right now. I will have to look into the tutoritals in a couple weeks, and maybe I can help then if needed
 Looking though the table I saw many of the confirmations were from my uploads :Campis Barrette- I think it actually has 2 colors (cloudy blue and breezy blue in my dye job) and they blend. Victorian Formal Sash- yes, just 1 color (snow white) Victorian Waistcoat-yes, 2 colors (butterfly blue and snow white) Victorian Formal Trousers-yes, 2 colors (butterfly blue and snow white) I know you didn't ask for colors, but I put them in incase it helps whomever is cropping
|
|
#14
10-07-2013, 03:16 AM
|
||||
|
||||
|
I feel a little silly confirming all the dyes, but I did play around with the dye jobs a lot and I like to feel I am helping
Headpieces: Sil's Winter Hat-Sadly I never dyed this one, so not sure (I would guess you're right) Fresh Petal Barrette-yes, 2 Sweet Sunflower Headband-Pretty sure 2-mine was 2 different colors from the one pictured Smart Artist Barrette-yes, 1 Sleek and Stylish Riding Helmet-2, hat one color, straps the other Gentian Original Headband-don't think I got this one so...  Pumpkin Headband-yes 2, but I'm thinking not a blend-flower is one and band is the other (but I could be wrong) Hiking Hat-um...2 is my guess as well, but never had Belts: Rubber Ducky Tube-I remember using 2 dyes, so yes! Unstoppable Belt-2, the belt is one, buckle and studs the other Necklaces: Triple Bubble Necklace-center bubble IS dyable, outer bubbles (tiny ones) are not Thistle Whistle-yes 2 Sweet Sunflower Necklace-pretty sure 2, but never did get this one  as often as I triedBracelets: Star Wand-yes, 2 Sweet Sunflower Satchel- again, yes 2 Gathering Basket-96% sure it's 2 colors, might want another confirmation on this one Spade-I think 2 as well Lovely Blooms Lantern-2 the red and white parts are both dye-able Rainbow Umbrella-pretty sure 1 is correct Cassie's Hook Hand-yes, 2; red and gold parts dye, hook stays the same Anklets: Looks like you have this coverred for now  Shoes: Sweet Sunflower Slippers-I believe 2 is correct, but I never ended up changing them Lovely Blooms Heels-2, if I remember right the gold part doesn't change Pretty Plaid Flats-definatly 2; these had a weird blend that I could never get how I wanted first try Tillandsia Flats-1 color with a blend into the yellow Pumpkin Boots-2, flower and boot; green wrap part stays. Think the flower just has a lighter and darker side, but is all the same dye color Cozy Rain Boots-not sure, but looks like 2. Tink's Frosty Boots-I want to say 2, but I don't remember dying the brown part, so I'm not sure enough to confirm Tops: Campis Top-Yes 2 Sweet Sunflower Top-Looks like 1, but not sure Vidia's Pixie Party Top-Yes, 1 Pansy Top-yes there is a blend, the red stays, and the blend happens around the middle from shoulder to waist Fawn's Winter Top-yes 2, Tink's Frosty Top-Same as boots, I think 2 but not sure enough to confirm Pretty Periwinkle Skirt- I remember this one now! It is 2, yesSweet Sunflower Skirt-yes, this one is 1. Tink's Travel Skirt-yep, 2 no blend Tink's Frosty Skirt-again, 2; skirt and leggings seperate colors Sorry I put down my "not sure's" but it helps me know what I have looked at vs. not looked at
|
|
#15
10-07-2013, 07:31 AM
|
||||
|
||||
|
You are helping Lily, thank you!
 I haven't dyed most of these items before, so those with question marks are educated guesses from my part. I left some of the question marks that weren't 100% certain (since I'm picky that way ^^") but we'll see how it goes. The fun part is that we can alter the items ourselves, if we wanted to say, add an extra dye to the item or remove one instead. I'm trying to keep the items looking as close to the original items as possible though. If no-one would be able to confirm the dyes for an item, then we can figure something out.PS. The flowers on the Pumpkin accessories are a little odd, since they create two different shades when only one dye bottle is used. 
__________________
|
|
|
|
Hybrid Mode
