mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-29 21:41:00 +08:00
145 lines
7.0 KiB
Markdown
145 lines
7.0 KiB
Markdown
[#]: subject: (10 open source tools for content creators)
|
||
[#]: via: (https://opensource.com/article/21/3/open-source-tools-web-design)
|
||
[#]: author: (Kristina Tuvikene https://opensource.com/users/hfkristina)
|
||
[#]: collector: (lujun9972)
|
||
[#]: translator: ( )
|
||
[#]: reviewer: ( )
|
||
[#]: publisher: ( )
|
||
[#]: url: ( )
|
||
|
||
10 open source tools for content creators
|
||
======
|
||
Check out these lesser-known web design tools for your next project.
|
||
![Painting art on a computer screen][1]
|
||
|
||
There are a lot of well-known open source applications used in web design, but there are also many great tools that are not as popular. I thought I'd challenge myself to find some obscure options on the chance I might find something useful.
|
||
|
||
Open source offers a wealth of options, so it's no surprise that I found 10 new applications that I now consider indispensable to my work.
|
||
|
||
### Bulma
|
||
|
||
![Bulma widgets][2]
|
||
|
||
[Bulma][3] is a modular and responsive CSS framework for designing interfaces that flow beautifully. Design work is hardest between the moment of inspiration and the time of initial implementation, and that's exactly the problem Bulma helps solve. It's a collection of useful front-end components that a designer can combine to create an engaging and polished interface. And the best part is that it requires no JavaScript. It's all done in CSS.
|
||
|
||
Included components include forms, columns, tabbed interfaces, pagination, breadcrumbs, buttons, notifications, and much more.
|
||
|
||
### Skeleton
|
||
|
||
![Skeleton][4]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[Skeleton][6] is a lightweight open source framework that gives you a simple grid, basic formats, and cross-browser support. It's a great alternative for bulky frameworks and lets you start coding your site with a minimal but highly functional foundation. There's a slight learning curve, as you do have to get familiar with its codebase, but after you've built one site with Skeleton, you've built a thousand, and it becomes second-nature.
|
||
|
||
### The Noun Project
|
||
|
||
![The Noun Project][7]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[The Noun Project][8] is a collection of more than 3 million icons and images. You can use them on your site or as inspiration to create your own designs. I've found hundreds of useful icons on the site, and they're superbly easy to use. Because they're so basic, you can use them as-is for a nice, minimal look or bring them into your [favorite image editor][9] and customize them for your project.
|
||
|
||
### MyPaint
|
||
|
||
![MyPaint][10]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
If you fancy creating your own icons or maybe some incidental art, then you should take a look at [MyPaint][11]. It is a lightweight painting tool that supports various graphic tablets, features dozens of amazing brush emulators and textures, and has a clean, minimal interface, so you can focus on creating your illustration.
|
||
|
||
### Glimpse
|
||
|
||
![Glimpse][12]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[Glimpse][13] is a cross-platform photo editor, a fork of [GIMP][14] that adds some nice features such as keyboard shortcuts similar to another popular (non-open) image editor. This is one of those must-have [applications for any graphic designer][15]. Climpse doesn't have a macOS release yet, but Mac users may use GIMP in the mean time.
|
||
|
||
### LazPaint
|
||
|
||
![LaPaz][16]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[LazPaint][17] is a lightweight raster and vector graphics editor with multiple tools and filters. It's also available on multiple platforms and offers straightforward vector editing for quick and basic work.
|
||
|
||
### The League of Moveable Type
|
||
|
||
![League of Moveable Type][18]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
My favorite open source font foundry, [The League of Moveable Type][19], offers expertly designed open source font faces. There's something suitable for every sort of project here.
|
||
|
||
### Shotcut
|
||
|
||
![Shotcut][20]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[Shotcut][21] is a non-linear video editor that supports multiple audio and video formats. It has an intuitive interface, undockable panels, and you can do some basic to advanced video editing using this open source tool.
|
||
|
||
### Draw.io
|
||
|
||
![Draw.io][22]
|
||
|
||
(Kristina Tuvikene, [CC BY-SA 4.0][5])
|
||
|
||
[Draw.io][23] is lightweight, dedicated software with a straightforward user interface for creating professional diagrams and flowcharts. You can run it online or [get it from GitHub][24] and install it locally.
|
||
|
||
### Bonus resource: Olive video editor
|
||
|
||
![Olive][25]
|
||
|
||
(©2021, [Olive][26])
|
||
|
||
[Olive video editor][27] is a work in progress but considered a very strong contender for premium open source video editing software. It's something you should keep your eye on for sure.
|
||
|
||
### Add these to your collection
|
||
|
||
Web design is an exciting line of work, and there's always something unexpected to deal with or invent. There are many great open source options out there for the resourceful web designer, and you'll benefit from trying these out to see if they fit your style.
|
||
|
||
What open source web design tools do you use that I've missed? Please share your favorites in the comments!
|
||
|
||
--------------------------------------------------------------------------------
|
||
|
||
via: https://opensource.com/article/21/3/open-source-tools-web-design
|
||
|
||
作者：[Kristina Tuvikene][a]
|
||
选题：[lujun9972][b]
|
||
译者：[译者ID](https://github.com/译者ID)
|
||
校对：[校对者ID](https://github.com/校对者ID)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]: https://opensource.com/users/hfkristina
|
||
[b]: https://github.com/lujun9972
|
||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/painting_computer_screen_art_design_creative.png?itok=LVAeQx3_ (Painting art on a computer screen)
|
||
[2]: https://opensource.com/sites/default/files/bulma.jpg (Bulma widgets)
|
||
[3]: https://bulma.io/
|
||
[4]: https://opensource.com/sites/default/files/uploads/skeleton.jpg (Skeleton)
|
||
[5]: https://creativecommons.org/licenses/by-sa/4.0/
|
||
[6]: http://getskeleton.com/
|
||
[7]: https://opensource.com/sites/default/files/uploads/nounproject.jpg (The Noun Project)
|
||
[8]: https://thenounproject.com/
|
||
[9]: https://opensource.com/life/12/6/design-without-debt-five-tools-for-designers
|
||
[10]: https://opensource.com/sites/default/files/uploads/mypaint.jpg (MyPaint)
|
||
[11]: http://mypaint.org/
|
||
[12]: https://opensource.com/sites/default/files/uploads/glimpse.jpg (Glimpse)
|
||
[13]: https://glimpse-editor.github.io/
|
||
[14]: https://www.gimp.org/
|
||
[15]: https://websitesetup.org/web-design-software/
|
||
[16]: https://opensource.com/sites/default/files/uploads/lapaz.jpg (LaPaz)
|
||
[17]: https://lazpaint.github.io/
|
||
[18]: https://opensource.com/sites/default/files/uploads/league-of-moveable-type.jpg (League of Moveable Type)
|
||
[19]: https://www.theleagueofmoveabletype.com/
|
||
[20]: https://opensource.com/sites/default/files/uploads/shotcut.jpg (Shotcut)
|
||
[21]: https://shotcut.org/
|
||
[22]: https://opensource.com/sites/default/files/uploads/drawio.jpg (Draw.io)
|
||
[23]: http://www.draw.io/
|
||
[24]: https://github.com/jgraph/drawio
|
||
[25]: https://opensource.com/sites/default/files/uploads/olive.png (Olive)
|
||
[26]: https://olivevideoeditor.org/020.php
|
||
[27]: https://olivevideoeditor.org/
|