I'm trying to develop an icon for my app, specifically the play store icon which is 512 x 512. I've Google for days now and only find Photoshop stuff, which is too expensive for me and the learning curve just for one icon is not worth it.
Do any of you know of cheaper software that I can buy and use, specifically something that just help you create high quality icons?
I am also open to courses for Gimp and Paint that can teach you, but not Photoshop please. I know they are the best but they don't think of guys like me that are starting out.
I'm not sure whether this is the proper place for this kind of question, but I think Gimp seems the most reasonable option. The web is full of tutorials for it, so I think it's worth searching there. For example: Creating Icons
Related
I am in middle of developing a software and I couldn't get quality high pixel icons. Hope You guys will guide me with this.
I tried various sites and searched for them and couldn't accomplish the tasks.
Deviant Art, Tumblr, Twitter...I mean, there's an entire pixel art community out there that would probably jump at the chance to help you with custom icons! If you don't mind the extra work, MSPaint is always a quick way to set up something.
I'm including an article link here with a bunch of additional, more specific options. Good Luck!
https://www.engadget.com/2016-05-19-18-best-websites-to-download-free-icons-for-commercial-use.html
I want to make an icon for both my website and phone application. So what is the best way? using adobe illustrator or any other suggestion?
I think that Gimp seems the most reasonable option, as it is available for free. The web is full of tutorials for it, so I think it's worth searching there. For example: Creating Icons
Using a vector graphics application like Adobe Illustrator would be the best way to go, although if you've not used it before you have to invest some time getting familiar with the tools such as Bezier curves. If you're an iPad user I recommend iDraw, a vector illustration tool for the IOS. It's easier to use than illustrator and allows you to prototype graphics at the correct screen resolution on the retina screen. If you're designing for IOS then I suggest looking at Apples guidance material on the correct image resolutions to use.
I am developing WebApps with Backbone, node, jQuery and so on.
In my beginnings I have used Twitter Bootstrap for designs.
Then I started to use own designs which I have created with the Chrome Addon Stylebit which allows to modify CSS in real time.
Unfortunately this is very time expensive at the end.
So I decided to develope the design by side with some editor and then rewrite this design per hand as CSS. I have read this is a common practice and most use photoshop for this task.
Is photoshop still recommend or are there other tools which should be used?
(I actually do not want a full WYSIWYG. Just something to test designs and layouts in general)
Cheers and happy new year,
Bodo
For the short answer no. There isn't a tool that I know of that will allow you to build layouts in code easily that isn't a full WSIWIG solution like Dreamweaver, Aptana etc.
For testing out designs you would normally build wire frames such as the ones you see from Balsamiq. There are other tools as well, Axure, Pencil and others. Do a search for wire frame software.
As a Sr. UX Architect I've heard and seen people mockup what they're building in Html and CSS. While this can work. You might as well continue and just build it if you're going to invest the time, effort and money into writing code.
Spin over to my "User Experience" group on Linkedin and ask the question there. Your going to get a ton of answers.
If you're searching to find Wireframing and Mockup tools.Then you can use Balsamiq Mockups
It's having features like
Low-Fi Sketch Wireframes
Click-Through Prototypes
UI Components & Icons
Export to PNG or PDF etc
You can get more details from Balsamiq Mockups Here
I hope this will help you.
You can try out ForeUI (http://www.ForeUI.com/), which allows you to build layouts visually and export your design to HTML5 simulation. You can also manually modify the generated code to fit your needs.
Some interesting examples are available on http://www.foreui.com/store/
I'm working for Pidoco.
It's a german company based in Berlin and we develop a online prototyping tool.
We have nice features like:
Interactive prototypes
Collaboration and invitations
iOS App to simulate mobile prototypes (Android is coming soon)
You can start with a 30 days free trial and then plans are starting at 9$ per month.
Here is the complete list of mockup tools:
http://c2.com/cgi/wiki?GuiPrototypingTools
This is a best-practice topic.
I saw it as a prefer method for some web developers. Instead of doing the CSS layout from scratch, they start a photoshop mockup first and then decode it into CSS.
What do you think about this approach?
Best to all,
Mockups are great, but I don't know if photoshop is the very first thing you'd want to try for the purpose -- at the very start, when you're just trying to get a logical layout for the various pages of the site (before refining it in terms of looks &c), a whiteboard with dry-erase markers and post-it notes affords for very fast, repeated mock-up rearrangements for the early brainstorming. Once there is some reasonable agreement on one (or a very few) possible arrangements of information, then visually more accurate tools enter into play.
BTW, just don't forget to photograph the whiteboard before changing it (any decent cellphone will do, you're not trying for high quality here;-) any time there are ideas or suggestions you may want to revisit or ponder in the future!
It is fast. This is why i always use this method. You don't want to spend the time building cross-browser CSS until you are actually set on a layout.
Most webdesign graphic artists work this way.
Many programmers simply find it a waste of time.
It has advantages, and disadvantages.
Advantages:
Many graphic artists grok photoshop/illustrator more than they do dreamweaver.
Customer gets a preview of the final product that works everywhere: mac, pc, firefox, ie, safari, whatever. Sending an html preview in early stages of production with developers using firefox and customer using MSIE always stirs up trouble.
And don't think to be on the smart side, scribbling MSIE driven html. Starting with non-standard html and converting to standard is more painful than doing it the other way.
There's one more catch: many web site customers tend to have a Mac and use Safari. Web committents tend to have a stronger taste for graphics than the average, so the chance to bump into Mac maniacs is higher in this sector than in others.
More design alternatives can be prepared spending less time on each one. This could be a dramatic advantage while dealing with murky clouds of executives with no designated decision-makers on the customer side. Alternative mockups will be passing hand-to-hand until general consensus is reached on one design or the other.
Disadvantages:
"Cutting" the graphic design into html becomes an additional work and it's not clear who's gonna pay for that extra time.
It favours graphic-centric, and rigid, design workflows. Customers agree pre-emptively on a given preview and that's what they get by contract. Every graphic modification means money, behaviour and programming instead tend not to be well defined, or worst, ill defined by the mockup.
The quest for pixel perfect cross-browser adherence to the mockup may drive you insane. If you agreed on a given rigid design with the customer, that could become a dire issue to pursue.
Dirty CSS tricks shoe in into your design. Using an HTML mockup, the customer would have approved a design driven by code with less tricks in place.
Anyway, I wouldn't suggest photoshop for a mockup, but inkscape. (or illustrator, if you worship adobe by burning piles of money into magic circles at midnight)
A scribbling stage is good too, while discussing the contract live with the customer.
I prefer pencil and paper to felt-tips, and I webcam shoot ideas for archiving and email forwarding. When it comes to scribbling, anyone does what feels more natural.
Not doing any and rely onto sample site examples and screenshots for graphical reference is always an option.
If you're productive that way, why not? Not everybody manages to envision their Web site perfectly as they're typing in a bunch of angle brackets.
More seriously put: It's your job, so it's your responsibility to do it in a way that allows you to do it effectively.
When prototyping, it's important to choose the right fidelity. This article from BoxesAndArrows provides a nice introduction to the various options and their uses.
I particularly like this line by Bill Buxton which the article quotes:
There is no such thing as high or low fidelity, only appropriate fidelity.
In this TechTalk by the Facebook Design Team, they mention how they use Photoshop in their design process (IIRC it's somewhere midway through, but I can't seem to forward through the video).
I am a web programmer who knows html and css fairly well. I can use a graphic program for it's basic functionality, but desinging a complete graphical web site is not my thing.
I let a graphic designer use his or hers graphic program to create a nice looking layout, and than code the website by hand in html and css.
It works for me, and gives my customers a design they like (cause a graphical designer will always make a much more nice looking design than most web programmers).
Agile methodology would suggest something easily modified in consultation with the customer. Dave Thomas in Agile Web Development with Rails suggests scribbling on paper. But anything has got to be better than chipping away directly at handmade CSS unless you really know what you want.
I was thinking about saying "scribbling might not cut it for a formal presentation" but the awesome SO crowd beat me to it in the comments...
Personally, and at every webdev firm I've worked at, I've always mocked-up in photoshop first. Jumping straight into CSS and markup is more of a bottom-up approach and makes sense to a lot of programmers but in web development you have to keep in mind that there are aesthetics to consider and a creative direction to follow. It's not enough that your product is functional, it needs the input of a professional creative-director/graphic-designer in order to make the product pleasant to look at and use.
In my experience, the problem has always been wrestling with inflexibility of team-members. Graphic designers who are aesthetics focussed and refuse to compromise their design integrity; which sometimes results in impossible or extremely difficult and un-semantic layouts. Developers who flatly refuse to compromise the integrity of their code where there is a workable solution - which might be a little less elegant. The key is to have a creative team who is intimately familiar with CSS and what is and isn't possible and an engineering team who have an appreciation of the importance of design and aesthetics.
In my freelance life (having had the benefit of working in both camps) I find it much easier to mock-up in photoshop first because I know what I can and can't do. And photoshop mockups are a lot easier to change on client feedback than are CSS and markup. Also, if you can show your client a mock-up, they feel more secure because they know that their money is going into a well planned project with a definate direction.
Hope this helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I make a lot of simple single executable applications for various things at home and at work. Icons always seem to be a problem for me I am not a designer. Like most I can do a little here and there with photoshop, gimp and paint.net. However I should not be trusted if things need to look "good".
The question is how do you deal with icons for small (often one day) projects that just need something unique. Nothing flashy just enough that the user can associate it with its use and find it quickly on a desktop. Even something like the Gravatar fractal based icons would be a good starting point.
I'm aware that when asked about free icons the big box of knowledge comes back with many results but I want to know what my peer (and superior) developers do in these kinds of situations.
If it's icon-making software you use and you're enough of a designer that it doesn't look awful that's great, but may not be doable for me.
Do you ever buy icons? What is a reputable site for commercial products and where would you steer clear of?
Lastly what types of licenses do you look out for when using free icons found around the net?
First off, a disclaimer - I'm not an application developer, but a (amateur, technically speaking, since I'm not getting paid for this) web designer/developer. I use a lot of icons in my projects, but since I'm on a budget of $0.00, I have a fairly large collection of icons obtained from the internet, so I feel that I should have some say on this matter.
Automatically Generating your Icons
Automatically generated icons are a big no-no for me. Unless your application is a fractal generator, the generated icons usually won't fit the application. You're better off sticking to the plain or if you're using this.
Free Icons
Free icons are pretty good if you don't need anything too fancy. You didn't mention anything about whether the projects are commercial in nature, because legality is a big factor in determining what you can use. Also remember that in Vista/Windows 7 icons can go as big as 256x256 - icons of that size are not usually available for free icons.
In terms of legality, options for using free icons for commercial software is a lot less, than say, a freeware/FOSS project. Look carefully at the licenses: Creative Commons is a fairly popular choice these days, but there are others. Usually attribution is required, which usually means acknowledging them in the "About" section or the "README" file.
Sources for Free Icons
Like I said, I know of a lot, but these are the ones that I feel you should look at first.
Open Source Desktop Icon Projects.
Tango Desktop Project Base Icons (Public Domain, attribution preferred)
Crystal Icon Project (LGPL)
Hydroxygen Icon Project (CCGNU/GPL)
Candy Desktop Project (GPL)
Prominent Icon sets*
FamFamFam Silk (CC-by 2.5)
Buuf Iconset (CC-by-sa-nc 3.0)
Fugue Icons (CC-by 3.0)
Sources
Icon Archive
DeviantArt
Designing your own
Well, I can't say how good the icons are without actually looking at your icons, but there are certain things to keep in mind, specifically the Windows Icon Design Guideline published by Microsoft.
There are far too many if you want a complete list, but these are the good ones
The silk icons are free:
“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that.
There are also the lesser-known Silk Companion 1 and Silk Companion II, icon sets from other designers in the same style as (and often based on) Silk.
I've found the GlyFX icon sets to be really well made, and worth their money. They provide a great range of icons, both in the Windows XP and now in the Vista style.
They also have a product called "Iconbox" which is basically custom-made icons for other customers that didn't insist on them being exclusive - so they sell these off to interested developers, too.
GlyFX also does custom work, if you really need something done e.g. for a commercial or semi-commercial product, at quite reasonable rate (last time I checked, anyway).
Highly recommended.
Marc
lgpl icons for use in commercial, gpl seems to work for everything else.
The gravatar icon is a cool idea. I guess you'd just have to convert them over to ico's.
Typically I just take something that's already in the development library. Otherwise there's tons of desktop icons out there to choose from.
I held an icon design contest with a $400 usd award, for a new icon for my program. It required a lot of sketching and feedback on every entry and there was little time for anything else. There was no awards to second places and I think it really affected how much effort people would spend on it.
Make sure you have plenty of time available for this. Make sure there is awards to 1st, 2nd, 3rd place.
In retrospect.. there must be another way to get a good icon made.
I'm found the Yusuke Kamiyamane's Fugue and Diagona icon sets useful. The Fugue set has 3000 icons, and Diagona 400. Fugue offers a variety of concepts, with variants of some.
You may also find this previous question useful.
I like the perfect icon icon suites. These are paid icons, but are pretty cheap and are high quality. They will also design custom icons for you for around $15.
http://www.perfecticon.com/