DEV Community

shushugah
shushugah

Posted on

Graphics advice for a dev?

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 stuff and abuse Google presentation for graphics, but I cannot make basic memes without either css or using those spammy MemeGenerators 😆

What were your favorite resources, blog posts, videos to learn basic design? For smaller tasks, like changing text (keeping same font) or changing color in a certain layer, would GIMP be enough?

Top comments (12)

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

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.
Collapse
 
vgrovestine profile image
Vincent Grovestine

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. ;)

Collapse
 
codeuken profile image
codeuken-io • 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

Collapse
 
jamesthomson profile image
James Thomson

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.

Collapse
 
espidesigns profile image
Mark Louie Espedido

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.

Collapse
 
desolosubhumus profile image
Desolo Sub Humus 🌎🌍

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.

Collapse
 
maxgreive profile image
Max Greive • Edited

Affinity Photo is really professional and costs a fraction of the good old Photoshop.

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Affinity also offers some great workbooks which look really similar to the Photoshop and illustrator books I used in college!

Collapse
 
rohansawant profile image
Rohan Sawant

Good question, I would like to know this as well!

Collapse
 
walkhard13 profile image
Phillip Smith

I'm also interested.

Collapse
 
shushugah profile image
shushugah

Text layers in PSDs won't be editable in GIMP. Any text layers you have will be rasterized when opening the PSD in GIMP.

graphicdesign.stackexchange.com/a/...

Collapse
 
mshirlaw profile image
Matt Shirlaw

Some helpful resources I've gathered dev.to/mshirlaw/ui-ux-design-for-e...