DEV Community

Graphics advice for a dev?

shushugah on October 22, 2019

I want to learn how to edit PSD/AI (Photoshop/Adobe Illustrator) files, but have no background in design. I am a software engineer who can break st...

Read full post

Austin S. Hemmelgarn • Oct 23 '19

My toolbox for this type of thing consists of a bunch of different programs, each for a different purpose:

GIMP: I specifically use GIMP for post-processing, and also on occasion for layout when I actually need to see an active preview. GIMP excels at manipulating existing images, but I find it a bit of a pain to work with for creating new ones from scratch.
ImageMagick: CLI tools designed for batch processing images (it's like FFMPEG or SoX, just for graphics instead of video or audio). Any time I need to do some complicated transformation of an image, I do it with ImageMagick.
Krita: Part of KDE's office suite, but easily available on most systems by itself. Krita is a raster-graphics editor like GIMP, but it's design is much more focused on content creation than manipulation of existing content. It's great for digital drawing or digital painting, and notably has much better support for non-RGB color spaces than GIMP does (making it insanely useful if you intend to use your graphics in media other than simple computer displays).
Inkscape: My tool of choice when doing editing of vector graphics that can't be done by hand with a text editor, Inkscape is essentially GIMP for vector graphics (though it's a bit more content-creation friendly than GIMP). It's pretty rare that I actually use it unless I'm adding new content to the images though.
Vim (or whatever your usual text editor of choice is): Most of the time when I edit vector graphics, they're SVGs, and I just do it by hand in a text editor with a preview open in a web browser. I find this gives me much more precise and reproducible control than trying to manipulate things directly in Inkscape.

Vincent Grovestine • Oct 23 '19

As a non-designer (and Linux user), GIMP and Inkscape have served me well for light graphic and vector editing. Paint.NET is another good option if you're using Windows.

Of course, none of these are going to be great for Adobe-specific formats (PSD, AI, etc.), but they're plenty capable pieces of software.

The best advice I can offer is to make friends with a graphic designer, then pass the buck on non-trivial design tasks. ;)

codeuken-io • Oct 23 '19 • Edited

I do graphic design mainly and there was a point my company didnt give us Adobe CC so I was forced to use GIMP and learned to really love it. I would say it can do 95% of what photoshop does plus you can customize it. So GIMP is a great place to start.

In terms of resources, I highly recommend Apple+ subscription and check out every Computer Arts magazine you can. That is how I self taught; all on their magazine publication. Also, there use to be a site worth1000.com which did daily PS contest that was fun but they are no longer.

Before

James Thomson • Oct 23 '19

Generally from my experience whatever the design is made in is what you'll need to edit it properly.

That said, you can usually get away with editing individual assets if they're output in the right format. SVG is one of those formats that usually travels pretty well between different apps because it's all just XML data.

But if you want to edit PSD or AI files hassle free, you'll need to use Photoshop/Illustrator which means you need to pony up some cash.

Mark Louie Espedido • Oct 23 '19

I have not tried Photopea but it can edit PSD files with text layers. It's browser-based and it's free. photopea.com/

I started as a designer, now I'm a front-end developer. My favorite go-to design resource would be designmodo, lstore, behance, and creative market.

Desolo Sub Humus 🌎🌍 • Oct 24 '19

Honestly, I've used GIMP and Adobe, both, and I've found that there's not much difference between the two beyond the licensing and cost. If I have to make PNGs, JPGs, or other raster images, I use GIMP these days.

Admittedly, I don't use it much anymore, as most of my graphics work as of late has been vector (SVG) or something I create out of HTML and CSS, both of which I hand-code in Notepad++.

As far as changing text while keeping the same font, I've found that the text element in SVGs can be extremely versatile. Instead of selecting a color for a font, you can add in all sorts of patterns and filters using 'fill' in your CSS. If you include your SVGs in the head of your HTML and reference them as needed in the body, you can even use CSS classes to your advantage by specifying fills and strokes that change the color scheme for all your SVGs at once.

Also, if you can get past the ugliness of the color combinations I used for the demos, you might be able to come up with some interesting new graphics tricks using CSS filters, var(), and keyframes.