Skip to main content
User login
OpenID
What is OpenID?
Username or e-mail
*
Password
*
Log in using OpenID
Cancel OpenID login
Create new account
Request new password
Register
Home
Browse
2D Art
3D Art
Concept Art
Textures
Music
Sound Effects
Documents
Featured Tutorials
Submit Art
Collect
My Collections
Art Collections
Forums
FAQ
Leaderboards
All Time
Total Points
Comments
Favorites (All)
Favorites (2D)
Favorites (3D)
Favorites (Concept Art)
Favorites (Music)
Favorites (Sound)
Favorites (Textures)
Weekly
Total Points
Comments
Favorites (All)
Favorites (2D)
Favorites (3D)
Favorites (Concept Art)
Favorites (Music)
Favorites (Sound)
Favorites (Textures)
❤ Donate
Search
Wyvern and Girl
Author:
5hiroi
Sunday, December 16, 2012 - 18:01
Art Type:
Concept Art
Tags:
girl
wyvern
cliff
sky
dragon
creature
monster
License(s):
CC0
Collections:
Art
CC0 Backgrounds
Environments
Halloween Game
rpg
Website
Favorites:
14
Share Icons:
Preview:
Drawn in Photoshop.
File(s):
A_Girl_and_her_Wyvern.jpg
100 Kb
[
1014
download(s)]
Log in
or
register
to post comments
Comments
This is cool. You reckon you could whip up a a photoshop image of a dragon on its own? Trying to find something I could use as an Adnroid Icon for my game lol
Got dimensions in mind for your icon? Cropping this image is a fairly trivial operation in any decent image editor. Paint.net and gimp come to mind as free ones that are readily available.
Hey, yeah I did use gimp and cropped it but don't think it looks that good to be honest. Max dimensions are 192x192.
I have attached a screenshot of the icon from my phone. The game is named "Dragon Run".
Is there anything else you could do or is that the best it would look?
Many thanks
Hmm...
Well, a problem I see right off is that you need a square icon but the wyvern in this scene has a kind of wide aspect.
You have two options, you can crop it to a square image and have some empty space in the icon, or you could resize (scale) the wyvern into a square apsect.
Personally, I'd recommend going with the former and then sticking something in there to fill the empty space. The game's name comes to mind as an obvious choice to fill the empty space.
Attaching two mock ups I did just to give you an idea of what could be done.
I cropped the image down to just the wyvern. It was something like a 300x300 box. There was a touch of ground in the bottom right hand corner, so I used the rubber stamp tool to remove it.
Then I added the text 'Dragon Run' using New Rocker font. I just chose that one because it's got a fantasy look to it and I like it. You'd probably want to use whatever font or logo you use in the actual game.
I did 'Dragon' and 'Run' as two seperate text layers, so they could be shifted around and packed together a bit.
After adding the text, I scaled the image down to 192x192 using Sinc (lazenco3) interpolation.
Finally, I borrowed the frame from the 'Flow Free' icon in your screen shot and stamped it over the image to give it a nice rounded icon look. If you don't like the heavy rounding, you could use something more gentle, or even stick to square. Just try to add some sort of edge treatment, without one the icon will tend to look kind of flat and unfinished.
After looking at the result a little, it occurred to me that another challenge with using this image for an icon, is that the colors on the wyvern are very washed out. That's part of the magic of the picture, the wyvern is back lit and appears as almost a silhouette against the bright sky. Unfortunately, that means that he doesn't quite 'pop' off the page the way you'd like an icon.
I tried fiddling with the levels tool in the gimp to try and draw out the colors in the wyvern a bit more. Unfortunately, I didn't have much luck. It's sort of hard to brighten the wyvern's colours without also blowing out the sky behind him. With a bit more time, it might be possible to seperate the two and then darken the sky while brightening the wyvern (basically by cutting the wyvern out and handling him as a seperate layer).
On the quick tip, I did have much better luck going the other way. I adjusted the levels down. This flattened the wyvern turning him into a pure black silhouette. It also brought out the color in the sky, making it a rich orange. Overall, I liked this approach, I think it yields an icon that 'pops' off the page pretty well and the dramatic contrast of the rich orange sky and the dark black wyvern and text adds a good bit of excitement.
Of course, I did this levels stuff after I'd laid down the text, for best results, you'd want to tweak the image colors and then add the text. If you zoom in on the image you'll see some artifacting around the text that is the result of me applying the text first and then monkeying around with the colors.
Well, hopefully that gives you some ideas! This is a wonderful image and I'm sure there's a way to turn it into an icon you'll love for your game.
Thank you so much for your time.
Yes I agree, its hard to make the image stand out like a icon would.
The curved icon works well. I like the bottom image a lot. But I still feel the colours could be more sharper. But my skills in this area are limited. Could you send me the gimp files or something with a base that I could have a play with? Or better yet, if you do find some time to make it better, that would be epic :p. I will definitely have to add credit to you in my game.
Many thanks!
Sadly, I didn't bother saving out my work as an XCF, so I just had the final PNGs from those tests.
But it was a quick job to pull it all in the GIMP again and get it setup for you, especially having done it once through already. Technically, XCF's are not allowed here, so I've renamed the file to a .png extension, you'll need to
One thing about the button rounding mask I used earlier, it was just cut and pasted quickly, but for whatever reason it was actually smaller than 192x192. So here I've cut the corners out and pushed them back to make a proper 192x192 corner rounding frame.
In the XCF you'll find 5 layers
Background - the wyvern
Dragon - dragon text
Run - run text
Thin frame - frame to cut corners for a 192x192 icon
Thick Frame - frame I used last time, it'll make the image less than 192x192 but included in case you like it better for whatever reason
The text is New Rocker font, 48pt.
If you don't have it, you can get the font here:
https://www.fontsquirrel.com/fonts/new-rocker
It's a great one!
I hesitate to try and tune the colors to your liking myself, seems like that'd be best done yourself.
But this file should give you everything you need to do that. Let me know if you have any trouble with it.
To mess with the colors, just select the background layer and pick a tool from the 'Colors' menu.
I used the 'Levels' Tool, with values 75, 0.5, and 220 for 'Input Levels' left output levels at 0 and 255.
My advice is just fiddle around with the sliders until you get something you like. If levels aren't giving you what you want, try another tool.
One thing you might try is putting a small outline around the font, I found if I pushed the background levels too much, the parts around 'Run' went to black and the text became kinda hard to read. Can give you the 411 on how to do that if you need it. It's not hard, but not really as easy as it should be :)
Attaching a PNG of the new file with the level values quoted above.
Let me know if XCF gives you any trouble.
hmm, looks like OGA didn't fall for my file extension renaming trick.
I guess we'll have to do it the old fashioned way.
Will upload each of the layers as a separate PNG for you.
Here, just load them up as layers in GIMP and have at it!
oh, sorry to be all business there. It was nice of you to thank me for my time. Time is definitely a scarce and valuable commodity for me, so I appreciate you saying something about it. I guess your post was just well timed, the challenge intrigued me (probably because I like the source image so much!) and I needed something to distract myself while me inner brain worked out a programming knot I'd gotten stuck in on my own project. So it was actually nice to have something interesting and unrelated to work on for a bit. And as it happens, I woke up this morning and the answer to my programming puzzle came to me, so I've benefitted some here too.
As far as credit, if anything I've done looks even remotely useable, that's just a testament to how great 5hiroi's work is. Be sure to credit him and only bother with my name if you really want to, even then definitely only as 'Icon Editing' or something in very small like that.
OK because I just can't stay away, I went ahead and made a little white outline for the text.
Not quite as smooth as I'd like but it works well enough to illustrate the idea.
Using the outline, was able to push the levels a little further. At this point, starting to get some banding in the image, but hopefully not noticeable when viewed at normal size.
Attaching the outline and a variant of the icon using the outline to go even more extreme with the colors.
Ok, becasue I just can't quit this. Here's a suggestion for a completely different direction. Here I've taken the text and a quickie grab of the dragon and applied 'Filters -> Alpha To Logo -> Basic II'
Then I laid took the background layer from the filter treatment (solid red) and laid it over the original cropped image at 35% opacity.
Definitely a rough draft. One thing I really don't like is the text has become a bit hard to read, partly my fault for packing the two words a bit too closely together. But the overall idea is to push it to more of an abstract design than a concrete picture.
Sorry, I have been busy with work.
Thanks a lot for the separate images. If you do have time, is it possible to separate the dragon from the background and send me both? I only ask because since the icon is a abstract of the bigger image and seems a much higher contrast, you can't necessary tell that it is the sky it is in.
Also maybe uploading the gimp file in a zip folder might work?
I do like the previous icon with the white outline around the words. The latest one, is a good concept, I like that it is flat but I don't like the colours haha.
Yup, when I do add credits, it'll be the both of you of course.
Glad you got your programming issue sorted!
Separating the Wyvern from the image is fairly tricky because the edges of it are so heavily anti-aliased.
If anyone on OGA knows a good way to do this I'd love to hear it.
Attaching my best effort just using the fuzzy wand tool in the Gimp.
Also two variants of that effort, flattened to black and white masks which can maybe useful.
Going back, I found flattening the dragon to black but leaving the sky as original was kind of pleasing so I've posted that result as well. Also posting a variant with just the text and dragon in black on solid white. You can use the 'Colorize' tool in GIMP to easily change the fill color on this one if you like it but want a different color fill.
Zip files are also not allowed. :(
This is amazing.
Thanks so much for your time and effort, will have a bash at it when I get time.
Cheers!
Did you ever get an icon you liked out of this? Just curious, also let us know when your game releases, would love to check it out. At the very least, you've picked a great name! :)
Hey! Sorry, been busy lately.
TBH I never really like anything I make but I have made a few different designs. Still experimenting with the colours and such. Will definitely let you know when the game releases. Gameplay wise its pretty much there, just the extra stuff I am putting in as well as a in-app store. Also changed the name a few times, naming things is hard!