This isn't strictly a programming question, but I'm asking it here because it's certainly a software development question, if you take "software development" to include all aspects of creating a software system.
I am an independent iPhone developer. Except for translations, I handle all aspects of my apps myself—graphics included. I have to create icons, buttons, and UI elements of all sorts on a regular basis. I've learned a few tricks along these lines, and while they're certainly not works of art, I can effectively use gradients, shadows, border strokes, transparency, and textures to create minimalistic, attractive effects.
So far, I've used a vector drawing tool called VectorDesigner for all of my development, with occasional raster postprocessing by Pixelmator. It's worked mostly okay so far, but VectorDesigner has a host of issues:
It uses a package format for its files, which interferes with the use of Subversion.
It is very much a print tool, and I have to be very careful not to end up with objects on fractional pixel values which cause antialiasing.
While you can take the union or intersection of shapes, or add and subtract them, curves tend to deform with repeated boolean operations, sometimes quite dramatically.
And it offers very little control over strokes, to the point where I barely use them.
So I'm looking for a better tool for this specific purpose: shape-based drawing of simple icons, buttons, and UI elements on a Mac by someone without graphic design training. Good functions for exporting would be a plus—ideally it should be almost as easy to export a PNG to the place it goes in my project as it is to save (not save as) the file.
The perfect tool for me would be one that would allow you to define an object's shape by stacking up areas and masks defined by primitive shapes (which would remain separately editable), then define properties on those objects like transforms and strokes. I have no idea if something like this exists, though.
Adobe's tools generally strike me as very heavyweight, and are usually expensive, but I suppose they're a possibility. (Fireworks, with its emphasis on screen design, seems like it might be particularly suitable, but I don't know that much about it.) But what else is out there? If you're in a position like me, what do you use? What do you recommend?
Edited to add: Of course a graphic designer could get better results from an ancient copy of MacPaint than I could from Illustrator CS5. No tool can replace skill and taste, and many programmers have little of either. I'm aware of that. But I'm fortunate enough to have at least some taste—enough that my users compliment my apps' appearance in their reviews. I'm not hugely talented, but I do know my limitations, and I don't let myself produce anything ugly. Given my budget, that will have to do for now.
Try Opacity. A little rough on the edges, but one of the coolest and most unique features they have is export as source code (in Quartz, Cocoa, Cocoa Touch, or Canvas)
I'd suggest OmniGraffle
OmniGraffle is easy to use, can save as a PNG, can create binary non-package files (it's an option in the interface). You can also set the units to pixels to ensure exact alignment. (Canvas Size -> Ruler Units)
Finally, the Graffletopia website has some nice iPhone stencils for getting it right:
http://graffletopia.com/search/iphone
I think the only acceptable answer here should be "hire a designer".
But it sounds like Pixelmator/Inkscape are your best bets.
Though if you do find something better, that'd be really cool. Like a jQueryUI but for native.
Related
ask a general question. There are few sprite resources and they are hardly liked by me. I would like to learn from the absolute scratch, such as how do I create a sprite from my idea.
Can I ask do I create it this way or what's the standard process?
1. draw it on white paper
2. scan it into a .png jpg etc
3. render it in photoshop
Thanks.
It's not quite right for Stack Overflow indeed, but I have a few suggestions anyway.
If you want to hand draw your art there are a few approaches. I started drawing the resources I needed on paper and scanning them, but this raises a couple of problems.
The first problem is that it can be hard to remove the white background properly leaving nasty bitty edges. This can be solved with time, practice and patience, and as far as I know there is no good way around this.
When using paper, it can be very hard to get clean areas of solid color. Pencils and the like leave and extremely distinctive paper texture, but approaches that give more solid colors using inks tend to go very blotchy.
The other problem is that if you want to animate these, or indeed reuse part of one sprite in another, you're left drawing bits of sprites - this lead me on to my currently favored methodology.
My recommendation would be to use ink onto acetate. You'll need to do some research into the best inks to use, but it means you can build the sprites in layers, much like animators used to do for film back in the day. You still have to solve the white background problem after scanning though, and if you pick the wrong ink it can be very easy to smudge your drawings - not ideal.
The other, more expensive alternative is to use a graphics tablet, and cut out the paper/acetate stage all together. This solves the white background problem, but some people find drawing with tablets oddly difficult - myself included.
Adobe software wise - I would personally use Illustrator while working with a graphics tablet, Photoshop for making adjustments to the resulting images, and Fireworks for building UI interface elements.
Hope this helps!
This is not really a coding question. As far as I know stackoverflow is only for technical problems. That said, I would recommend Illustrator to get started. There are some great tutorials out there. :)
I am trying to understand how compositors work on X (well basically because neither xcompmgr nor cairo-compmgr can draw shadow properly for my awesome wm~~~)
I have read part of the source code both xcompmgr and cairo-compmgr but I still don't really understand how they do that.
I want to know how they know where the shadow should be (well, arround the window for sure, but the shadow might be under other window and don't need to be drawn.), as well as where (on which layer/window) do they draw the shadow. Probably also how all those X extension are used (and what's for) and how cairo-compmgr use cairo to deal with low level X stuff.
It's a little hard for me to learn these from the source code because a lot of stuff (especially X extensions) is poor documented. It will also be helpful just to point out where I should look at.
The simpler you code it, the best it will work.
Get a list of the visible windows
Sort them by inverse z-order (from the bottom-most to the top-most)
Draw the shadow and then the window itself for each window
You need no black magic.
If you are wondering how it works, it's straightforward: you have to use the 'composite' X extension. It enables the overlay window, which is the only visible window on the screen once it is enabled, then you have to draw all the windows on it as you will be provided with a Pixmap for each window.
EDIT:
If you are seeking for documentation, you can use the linux manual (the man command), and the header files, they're the main (also best and perhaps the only real) source of documentation, as all the other sources/websites rely on them afaik.
Suppose I was writing a game which involved a relatively complex geometric game board. Something like a dartboard.
I would want a view to display the game state. What is the best way to implement that view?
For example, should I draw the board off line in something like photoshop, add it as a resource, and then show it using a UIImageView? Or should I use drawing primitives and essentially draw the board programmatically?
What are the trade-offs?
If I do use an image, what format should I prefer? .png, .tiff, .gif, .jpg?
Thanks,
John
If you decide to go the image route you should use png. Displaying any other format you pay a performance hit (as mentioned in the comment).
To decide between building photoshop vs drawing via code you need to decide how much time you want to put into learning Quartz/CoreGraphics. Apple's docs:
http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html
If you already know Photoshop then building the graphic there is probably much easier, if you don't then learning Quartz is prob a less steep learning curve than Photoshop...
If it's a simple board, it's easy enough to draw it into the view, which gives you the possibility of easily manipulating it in interesting ways. Drawing in a view is done with a set of postscript like primitives.
For something more fancy, photoshop might be the way to go.
PNGs are preferred.
My iPhone development is stepping up a notch and I'm looking at the UI. We're thinking of having a few nice interface-y features - things like dragging and dropping images onto one another from a gallery list, or similar.
How far does the basic iPhone interface stretch? Do most people create their own interfaces and code, and if so what's the base there? CoreGraphics? OpenGL?
I don't want to reinvent the wheel, but neither do I want to take an overcomplicated option if someone's done the work already.
There are several tiers to Cocoa-based interfaces. Generally, I recommend working at the highest level of abstraction that meets your needs for presentation and performance.
The base UIKit elements that you can place using Interface Builder or code are designed to handle the most common cases within an application's interface. These provide some degree of customization, depending on their type, but what you see is generally all you get. On the iPhone, Apple even tries to maintain a certain look and feel for these stock elements by rejecting applications during review that use them in ways that contradict the Human Interface Guidelines.
The next level down are custom UIViews. These can be made to look like anything through the use of Quartz drawing within the -drawRect: method. You can do your own touch handling by overriding methods like –touchesBegan:withEvent: or by using the new UIGestureRecognizers. Given the level of customization you can do here, this is where most people stop when tweaking their interfaces.
You can go a little lower than this by working with Core Animation layers and animations. You don't gain a lot, performance-wise, by using CALayers instead of UIViews on the iPhone, but they can be useful if you want to craft visual items that use the same code on Mac and iPhone. Custom animations may be required if you want to do something more than animate a view between two states linearly. You can even do some limited 3-D work using Core Animation.
Finally, there is OpenGL ES for display of full 3-D scenes and for really high performance graphic display. This is about as close to the metal as you're going to get when dealing with the iPhone display system, and it shows in terms of the amount and complexity of code you have to write. For complex 3-D work, this is what you will need to use, but for 2-D and even rudimentary 3-D I recommend looking first to Core Animation because of the code it can save you. If performance is unacceptable, then should you go to OpenGL ES.
Now, just because you need to use one of these technologies to work with part of your interface does not mean that it can't coexist with the others. UIViews are backed by Core Animation layers, and even OpenGL ES renders into a CALayer which can be placed in a view. Again, use the highest level of abstraction that is appropriate for that part of your interface.
I have to develop an application "Behavior like an Tetris game".
I have never used "OpenGL" for the iPhone application developement.
Application is something like this
Red / green / blue square boxes drop from top
Red + Red + Red = Points & boxes disappears
same way user has to make combination & get points
Different levels are there.
There are three buttons Left, Right for movement & bottom for speedy fall
For this kind of application should I use open GL or NOT?
i.e. Is it possible to develop entire application with view & it's animation?
If yes then, will it be more complex as compare to open gl?
What is the advantage of using open GL?
(I know that it gives good 2d, 3d look )
(But here my question means - easy coding?)
(Or open gl is more complicated as compare to objective-c?)
(I am just asking because I am not aware of it)
Basically your options are:
Using OpenGL
Using Quartz
Using UIKit
OpenGL is a fairly complicated beast, but is by far the best way to squeeze performance out of the iPhone. Do you need it for a Tetris game, though? Almost certainly not.
Quartz is the toolkit used in Mac OS X and the iPhone to draw images and do image effects. Because I come from an OpenGL background in other languages, I find Quartz strange and frustrating. However, it is probably easier for someone who is new to both.
You can do everything here using UIKit, and it will definitely be much much easier than other options. The main disadvantage is that it's rather slow in comparison, but once again doing a Tetris-like game shouldn't matter at all.
Before you go with UIKit, though, I recommend just checking out something like Cocos 2D, which will give you the advantages of OpenGL without the headache of dealing with all of its inner workings.
From the tone of your question it looks like you're confusing what OpenGL is and isn't with regard to Objective-C.
OpenGL is a library written in the C programming language (to put it simplistically) that excels at rendering shapes (especially 3D shapes) for display on a screen. It doesn't replace Objective-C inside your program, it merely assists you in drawing the shapes. If you don't use OpenGL, you'll need to write some sort of drawing/rendering code in your NSView (or subclass) to render the blocks. By using OpenGL, you will be provided a lot of helpful C methods for drawing shapes, which otherwise you'll have to implement yourself. On top of that OpenGL has thousands of man hours worth of drawing optimizations that you can take advantage of if you use it rather than trying to implement shape rendering yourself.
Having said that, OpenGL isn't all sunshine and roses. It works like a state machine and has its own assumptions about the way it will be used (like any API). Just because you know C and Objective-C doesn't mean that using OpenGL will be trivial. If you've never written any OpenGL code, I suggest you look into a reference like the venerable Red Book.
The thing to keep in mind is that OpenGL is not a language until itself (ignoring the OpenGL shading language). Its merely a set of C functions to aid you in rendering graphics.
You may well want to ask as well on http://iphonegamedev.stackexchange.com/, the new Stack Overflow variant just for iPhone gaming.
To learn & understand what you need.
Please go through following link.
it includes all necessary links for all kind of resources that you needed.
http://maniacdev.com/2009/04/8-great-resources-for-learning-iphone-opengl-es/
Edit :
After reading your question properly ( actually my question - By r & d I found solution).
I think - you need to develop a 2d application.
Go for the following link. Best option for 2d animation.
http://code.google.com/p/cocos2d-iphone/
Don't forget to visit following link, if you needed sample codes.
http://monoclestudios.com/cocos2d_whitepaper.html