For this article in the international artist series, we turn to Hungary,
featuring seven artists who create fantastic work, from awesome manga illustrations to brilliant graphic design and more! I asked each artist how their
country and
culture inspired their work, and they delivered fantastic answers.
Enjoy!
Peter Nagy
Peter is an illustrator, motion designer, and 3D artist based in Budapest, Hungary. His work features brilliant digital illustrations with great atmosphere and lighting. Check out
a small selection of his work below, or see more in his portfolio.
Contact
The
scenery in Hungary has always fascinated me. I have a strong connection with
nature, and in Hungary, there are
beautiful forests and parks where I can become inspired. I live in Budapest and the character of the city is vibrant. I love
the differences between the two sides, Buda and Pest.
When I started my interest in art, the first classic Hungarian
artworks I saw were from Mihály Munácsy, László Pál and Színyei.
They inspired me to study the atmosphere, and to try plein air
painting. In my artwork, I put the focus on the atmosphere and try to bring
about a special mood, just like my favorite Hungarian painters.
The culture is vibrant in Hungary, and in Budapest there are a lot
of exhibitions and programs, both sub-cultural and mainstream-themed. There
are a lot of art spaces in Budapest where young talent can introduce
themselves, as well as many festivals and programs where you can meet fellow creatives
and their artwork.
Luleiya is an artist based in Budapest, Hungary. Her work features delightful illustrations in a colorful Manga style. Check out
a small selection of her work below, or see more in her portfolio.
King That Never Was
I definitely love the nature and forests in Hungary. There are great
hiking trails all around, so there is always a possibility to „get
away.” But on the other hand, I love living in Budapest because the center of the city
is bustling and full of energy, with tons of cute cafés and parks where
you can go hang out with friends.
If anything, it’s definitely the nature of Hungary that
has influenced my work. I used to walk in the forests and imagine all kinds
of stories with elves and other fantastical creatures.
I’m not sure about the art community here. I know there is one but I’m
not really a participant. I’m more active in global online art
communities where I can get to know artists from all around the world
and be inspired by them.
Daniel is an artist based in Szeged, Hungary. His work features amazing character designs inspired by his love of fantasy and sci-fi. Check out
a small selection of his work below, or see more in his portfolio.
Characters/Creatures
I am a native Hungarian. I’ve always felt a strong calling to entertainment design, but this sounded like a crazy career and something a Hungarian could
only achieve with great connections or tremendous risk taking. Needless
to say, I didn’t have any good connections but I am currently involved in freelance indie projects. Even in
Hungary, opportunities arise for entertainment artists who gravitate more
towards film and game design.
Hungary is an interesting place. It is cold in the winter and hot in
the summer. Life is cheap but the entertainment is costly. We pride
ourselves on being inventive in all sorts of ways. Perhaps too much at
times.
To be honest, the biggest influences in my life were none other than Hungarians
like Johann Sebastian Bach, Wernher von Braun, Vermeer, George Lucas, Syd Mead and many others.
For an artist, Hungary can be many things. You can find
jobs and opportunities, but art is somewhat a luxury for most. There
is definitely a growing market though. New
technologies are accessible now more than ever, so artists of many
trades can experiment or pioneer new ways to
create. I would
say Hungarian artists have great potential.
Aliz is a graphic designer based in Budapest, Hungary. Her work features playful, illustrative designs inspired by Budapest and more. Check out
a small selection of her work below, or see more in her portfolio.
Budapest Posters
I love the buildings of Budapest and the local architecture. The city
has lots of amazing hidden wonders, and despite living here for
several years, Budapest still surprises me every time. I like that the city is also not too huge, so I can get anywhere easily. The
different districts have diverse atmospheres but
generally they are all very friendly.
Some of my work has been influenced by the region and the local culture.
For example, recently I created designs dealing with transportation and
different districts in Budapest. I wanted to increase the overall attention for the local events, and the beautiful sights to see.
I graduated at the Moholy-Nagy University of Art and Design in
Budapest. The students here built quite a large and cohesive art
community. In addition, there are many pubs in the city where
artists can meet up with each other during the evenings.
Márton is an illustrator and graphic
designer based in Budapest, Hungary. His work features stunning digital
paintings of vast landscapes and fantasy characters. Check out
a small selection of his work below, or see more in his portfolio.
Shore 2
Honestly
I have never lived abroad, so It’s hard to compare it to
other countries, but I believe we are lucky to live in a climate with
all four seasons. The scale and measurements of the buildings as they fit into the environment, all give me the impression
of being at home. As a citizen of the capital, I am still amazed by all of
the highlights the city has to offer. Budapest is not a
place where you can easily get lost. It’s a very lively and colorful
Hungary’s history draws back a very long time, so there could
easily be many things that inspire me both historically and culturally. We are in an advantageous
position because most of our historical monuments have survived throughout the centuries and can be used to inspire artists today.
Being a small country, this profession has its own limits in
Hungary, especially because it’s influenced by the capital in every segment
of life. Certain artists may not know each other
personally but they know each other’s work. There is the
existence of the online art communities, but a lot of clubs,
competitions, and exhibitions are formed to
feed our creative interests. I believe there is still a
lot to learn about solidarity, innovation, and community building in Hungary.
Erika is a graphic and web designer based in Budapest, Hungary. Her work features her love for all things geek, transformed into gorgeous seamless patterns. Check out
a small selection of her work below, or see more in her portfolio.
Catstronauts
I love the diversity in Hungary. There is so much to look at and feel. Hungarian people are also very diverse. We have a lot of culture and our nation has been mixed throughout the centuries. This mixing gives us a very
enchanting and bohemian-like feeling.
I think the mix of cultures here helps me to be open minded. I’m using motifs from a lot of different nations
depending on the purpose and the topic of the project I’m working on. There is inspiration everywhere!
There are several art universities and colleges in Hungary. This is the reason that there are many
small, design-related groups with enthusiastic members who know each other well and work together even after graduating.
We used to say, that the designers in Hungary are a small group. You
can reach one person through two or three mutual friends. There are meetups
and big events for us where we can chat about art, work, clients and
the meaning of life.
And above all this, there are design and fashion markets every month, as well as different design weeks and exhibitions too.
László is a graphic designer based in Békéscsaba, Hungary. His work features a unique cartoon style used to draw crazy characters and colorful background illustrations. Check out
a small selection of his work below, or see more in his portfolio.
Cursed Knight
Hungary is really calm, well, at least in the city where I live. And there are no large distances between two places.
I’d say that the local culture hasn’t really
influenced me—though maybe a few Hungarian cartoons have, but nothing special. I
draw my main inspiration from a lot of different foreign cartoons, comic
books, novels and movies.
Unfortunately, I know only a few people personally who do this
sort of thing, whether it’s digital or traditional art. But they are all
really awesome and talented in their areas and I feel lucky to know
them.
Many thanks to the artists who took time to answer my questions
and share a bit about themselves and how their country and/or culture
has affected their work. You can check out more of their work in the
links below:
Summer heat in a tropical paradise! What
could be better? In this tutorial we’ll create our own tropical pattern, making
it seamless and discovering several ways of applying our pattern! We’ll be
using basic geometric shapes as well as some default custom shapes, creating
fancy objects in a few clicks and making them detailed with the help of texture
brushes.
Patterns and textures surround us
everywhere in our daily life. They are used in web design and for print
materials, they decorate our clothes and walls, and they are used for wrapping
paper and many other purposes.
In this tutorial we’ll be creating a
nature-inspired texture. By the end of the lesson you’ll be able to
create any other kind of pattern in the same style, whether it is a floral seamless pattern or birthday pattern, food wrapping pattern, or anything else.
If you wish to enhance your skills by creating a variety of textures, be sure
to check out Envato Market for inspiration, and then be ready to start!
1. Use Basic and Custom Shapes to Draw
Tropical Elements
Step 1
Let’s start by making a New File of 2000 x 2000 px size. We’re making the file big enough to be used for print, if needed.
Step 2
Let’s take the Ellipse Tool (U) and start making a pineapple. Make a 550 x 660 px bright oval of yellow color.
You can adjust the size of the shape and its fill color in the Properties panel (Window > Properties).
Use the Direct Selection Tool (A) to select the bottom anchor point and
drag the anchor handles, making them longer and so making the bottom of
the pineapple a bit flatter.
Step 3
Now we’ll shape the top, or the “crown”, of
the pineapple. Continue using the Ellipse
Tool (U) to make a 70 x 400 px
oval, filling it with turquoise-green color.
Take the Convert Point Tool (in the same drop-down menu as the Pen Tool) and click the bottom and
top anchor points to make the tips of the shape pointed.
Step 4
Now let’s bend the shape. Press Control-T for Free Transform Path. Click the right mouse button and select Warp. Head
to the control panel on top and open the drop-down menu to select the Arc effect. We need our shape to be
bent to the left, so let’s click Change
the warp orientation and set the Bend value to 30.
Looking good! Press Enter to apply the effect.
Step 5
Press Control-T
for Free Transform Path and rotate
the leaf, attaching it to the pineapple. Apply the transformation and press Control-J to make a copy of the leaf
layer. Make it a bit larger, using Free
Transform Path, and attach it above the first leaf. Make another leaf,
changing its size as well.
Select all three leaves, duplicate(Control-J) them and apply Edit
> Transform > Flip Horizontal to mirror the shapes to the opposite
side. Finish up with the top of the pineapple, attaching the leaves to each
other and putting a vertical leaf in the center.
Step 6
Now we need to make our pineapple editable
in order to add details to it. Select the yellow shape layer in the Layers panel, click the right mouse button and RasterizeLayer. After rasterizing the
shape, we won’t be able to change its size without quality loss anymore. However, it allows us to work with brushes and the Eraser Tool (E).
Step 7
Let’s depict stylized scales or segments
above our pineapple. We’ll be using a Clipping
Mask so that we can easily undo or redo any action, working in a
non-destructive way.
Select the yellow shape layer in the Layers panel and click Add vector mask at the bottom of the
panel.
Now arm yourself with the Pen Tool (P) and make a diagonal line across
the pineapple while holding Shift.
Step 8
Select the Clipping Mask in the Layers
panel and select black Fill color in
the Color panel.
Take the Brush Tool (B) and click the right mouse button to open the list of
brushes. Select any round textured brush to your liking. I’m using the Hard Round 9 #1 brush from the default M Brushes set.
Switch back to the Pen Tool (P), click the right
mouse button on the Artboard and select Stroke Path. Set the Tool
to Brush and click OK to make a textured stroke. As you can
see, the vector line made with the Pen Tool
(P) is still visible too.
This way we’re actually making a gap,
erasing a part of the pineapple, using the Clipping
Mask.
Step 9
Draw a new diagonal line with the Pen Tool (P) or select the existing vector path with the Move Tool (V) and press Control-T for Free Transform Path. Move the line down. Press Enter
to apply the transformation, and then take the Pen
Tool (P) and click the right mouse
button to Stroke Path.
Continue moving the line down and Stroke Path, adding more blank textured
strokes across the pineapple.
Step 10
When you’ve finished covering the pineapple with
strokes, select our vector path and Edit
> Transform Points > Flip Horizontal to mirror it horizontally.
Now
repeat the same action with Stroke Path
to add overlapping lines across the pineapple.
Step 11
Switch to the Brush Tool (B) and use the same brush to add short strokes or dots
in every cell. Remember to draw on the Clipping
Mask layer.
Now that the base of our pineapple is
ready, Group (Control-G) the elements.
Step 12
Now let’s shape a simple palm leaf for our
tropical pattern. Take the Ellipse Tool
(U) and make an 80 x 700 px oval
on a new layer. Use the Convert Point
Tool to make the top and bottom parts of the oval pointed.
Step 13
Now press Alt-Control-T for Free
Transform Path. Click the pivot point in the center of the leaf and drag it
down, placing it on the bottom tip of the shape. As you may notice, a copy
of the shape will be created in the Layers
panel after you move the pivot point. That’s exactly what we need, and it works
only when you use Alt-Control-T for
transformation.
Now we can rotate the copy of the leaf.
Press Enter to apply the
transformation, and keep pressing Shift-Control-Alt-T
to make more rotated copies. This is the fastest way to create equally rotated
and transformed copies automatically.
Step 14
Select all the shapes and duplicate (Control-J) them. Apply Edit > Transform > Flip Horizontal
to mirror the shapes to the opposite side, forming a big palm leaf. You can add
a few smaller pieces at the bottom to fill the blank spaces. Group (Control-G) all the parts in
order to keep your layers neat and organized.
Step 15
Now that we have a couple of elements for
our tropical pattern, let’s see the easiest way of adding more of those. Take
the Custom Shape Tool (U) and open
the drop-down list of shapes in the control panel on top. Here you can find a
great variety of flowers and leaves, which suit our theme perfectly. Pick shapes to your liking and combine them with each other, varying their colors and
sizes.
2. Apply Textures to the Elements
Step 1
Let’s start with our pineapple. Select the
yellow shape layer in the Layers
panel and Lock transparent pixels on
top of the panel. This allows us to paint over the shape with the brush,
without affecting any blank areas inside or outside the object. Let’s see how
it works!
Select a dry grungy brush, such as Dry Brush 1#2 from the
default M Brushes set, or try some textured brushes from the Envato Market, for example these Chalk Scattering Brushes.
Select orange color and start painting over
the bottom of the pineapple, gradually making it darker.
Step 2
Let’s do the same for the crown or top of
the pineapple. First of all, Merge (Control-E) the green leaves of the crown together and Rasterize them by clicking the merged
layer with right mouse button in the Layers panel.
Now we can Lock transparent pixels and paint over the shape, making it
slightly textured by adding a touch of dark green at the bottom and making its
top lighter.
Step 3
Let’s apply the same technique to the palm
leaf. Select the group of green elements and Layer > Merge Group. Be sure that the layer is rasterized and Lock transparent pixels in the Layers
panel. Use a dry textured brush to make the leaf more detailed and intricate.
Step 4
Now let’s color one of the flowers, using a different technique. We won’t be rasterizing it this time. Let’s select the
flower layer in the Layers panel,
hold Alt and click Create a new layer.
In the pop-up dialog window, tick the Use Previous Layer to Create Clipping Mask
checkbox to link a new layer to the flower layer.
Now we can use a
linked layer to paint over the flower, without crossing its edges.
Group (Control-G) the
flower layers together, keeping your artwork organized.
Step 5
Use one of the previous techniques to your
liking to color all the rest of the elements, making them textured and detailed.
3. Compose a Seamless Pattern With Tropical
Elements
Step 1
Select the Background layer in the Layers
panel and fill it with light blue. Let’s start arranging our elements
around the canvas.
Step 2
Duplicate
(Control-J) the elements, rotate them and mirror (Edit
> Transform > Flip Horizontal) to make the pattern versatile, adding a playful rhythm to it. Use the Custom Shape
Tool (U) to add more flowers in order to make the elements look different.
Step 3
Now let’s see how we can actually make our
pattern seamless. As you may notice, some of the elements cross the left edge of the Artboard. Select the
element (or group of elements) that is crossing the edge, duplicate (Control-J) it and press Control-T for Free Transform.
Head to the control panel on top and find the Horizontal and Vertical positions, marked as X and Y. You will see some
values, defining the position of our objects. Click the triangle button to Use relative positioning for reference
point, this way setting the values to zero. Now type 2000 (which is equal to the width of our Artboard) in the Horizontal
position value, thus moving the selected objects 2000 px to the right. Press Enter
to apply the transformation.
Step 4
Do the same for the objects, crossing the top edge of the canvas. Duplicate (Control-J) the elements,
press Control-T and type 2000 (which is the height of our
Artboard) in the Vertical position
value, this way moving the element 2000
px down.
If you need to move the objects in opposite directions, use negative values (-2000) to move the elements from bottom to the top or from the right side to the left.
Step 5
Add some minor custom shapes to fill the
blank spaces of our pattern. I’ve used contrast color combinations for new
elements, such as green with a touch of pink or red and yellow. I like how it looks with a
dry textured brush, adding a playful and diverse look to our pattern.
Step 6
Try adding textured colorful stains to
other elements of our pattern: palm leaves, the top of the pineapple, flowers, and so on. This will make your pattern look unique.
Step 7
Now that we’re happy with our pattern, with
the position of the elements and their colors, let’s see how we can save our
pattern and apply it to any custom shape.
Go to Edit
> Define Pattern and give your pattern a proper name in the pop-up
dialog box.
Step 8
Now, if we take the Paint Bucket Tool (G) and head to the control panel on top, we can
set the fill option to Pattern and
find our pattern in the drop-down list. From here, we can either click the tiny
cog icon and use Save Patterns or
open the Preset Manager and Save our pattern from there.
Step 9
Now there are several options that we can
use to apply our newly created pattern. We can use the Rectangular or Elliptical
Marquee Tool (M) to define a selected area and apply a Pattern Fill with the help of the Paint Bucket Tool (G).
Apart from that, we can use the Custom Shape Tool (U) to create any
custom shape and apply a Pattern Fill
from the control panel on top. From here, we can also adjust the Scale of our pattern.
Step 10
Last but not least, we can create a New File of larger size, make a New Layer and use the Paint Bucket Tool (G)
to fill all the Artboard with our tropical pattern!
Voila! Our Tropical Seamless Pattern Is
Ready!
Great job! We’ve finished
creating our fancy summer textured pattern with tropical elements. I hope this
tutorial brought you a sunny mood and helped you to discover some new tips and
tricks which will be useful for your future artworks!
Feel free to apply these simple techniques,
creating new patterns and textures, which can be used as web backgrounds, for
print, fabric, wrapping paper and any other purpose!
Photoshop comes with a large and varied set of different brushes and brush tips, but one of the most useful features of the tool is the ability to use custom brushes. Custom brush tips allow for much more creative effects that simply are not possible with the default brushes. Using the custom brushes gives absolute control over the color and placement of the brush appearance. Learning how to use custom brushes is one of those necessary steps for increasing the quality of your digital artwork. The use and application of custom brushes feels almost limitless!
30+ Premium Photoshop Brushes
Creating your own custom brushes is a skill that has a lot of value and can be quite rewarding. But if you are a little short on time, resources, or inspiration there are a host of high-quality custom brushes available on Envato Market and Envato Elements.
30 Particle Photoshop Brushes
Let’s kick start this selection with this lovely particle pack. 30 Particle Photoshop Brushes comes with an awesome collection of 30 handcrafted particle brushes. Create an Envato Elements account today to unlock unlimited assets for one monthly fee!
30 Particle Photoshop Brushes
Flame Wings Brushes
The Flame Wings Brushes from market author DreamWarrior contains 20 beautiful wing flame fractals brushes for Photoshop. This product is available for $6.
Flame Wings Brushes
69 Watercolor Brushes for Photoshop
This wonderful set of Watercolor Photoshop Brushes contains 69 total brushes hand crafted with incredible textures. Enjoy 11 total textures included with this download.
69 Watercolor Brushes for Photoshop
9 Massive Grunge Brushes
The 9 Massive Grunge Brushes from market author scarab13 contains 9 massive grunge brushes at 2000×2000 resolution. This product is available for $7.
9 Massive Grunge Brushes
Nebula Photoshop Brushes
The Nebula Photoshop Brush pack contains 16 Photoshop brushes great for wallpapers, print, and photo effects. This pack is fully customizable, so you’ll be able to adjust the settings easily.
Nebula Photoshop Brushes
12 High Resolution Cloud Brushes
The 12 High Resolution Cloud Brushes from market author Folksnet contains 12 high-resolution cloud brushes with shapes and forms and with fine details. This product is available for $6.
12 High Resolution Cloud Brushes
Watercolor Brushes for Photoshop
This set of Watercolor Photoshop Brushes contains 30 gorgeous watercolor brushes for all your creative projects. A simple text file is also included with further instruction.
Watercolor Brushes for Photoshop
Bokeh Brushes
Bokeh Brushes from market author editingninja contains 13 bokeh brushes. This product is available for $4.
Bokeh Brushes
Natural Shades Brushes for Adobe Photoshop
This awesome set of Natural Shade Brushes contains 40 total brushes to paint over your work! Enjoy pressure sensitive brushes that work perfectly with any drawing tablet.
Natural Shades Brushes for Adobe Photoshop
8 Line Burn Photoshop Brushes
The 8 Line Burn Photoshop Brushes from market author fawwaz contains 8 brushes of high-quality line burns. This product is available for $4.
8 Line Burn Photoshop Brushes
40 Halftone Illustration Brushes for Photoshop
This epic set of Halftone Illustration Brushes contains 40 high quality Photoshop brushes you’ll want to download! Enjoy these amazing brushes to add a unique texture to your digital shading.
40 Halftone Illustration Brushes for Photoshop
Brush Pack Professional
The Brush Pack Professional from market author kirk3d contains a classic art brush pack of realistic art tools for PS. This product is available for $9.
Brush Pack Professional
Machine Washed Photoshop Brush Presets
This lovely set of Machine Washed Photoshop Brush Presets contains 18 brushes inspired by natural textures. You’ll also receive a handy instructional guide for more help.
This set of Photoshop Splatter Brushes contains 20 various splatters perfect for any messy project. Add a beautiful splatter element to your designs with this remarkable download.
20 Splatter Brushes
30 Shattered Glass Brushes
The 30 Shattered Glass Brushes from market author kirk3d contains 30 Hi-Res Shattered Glass Brushes files. This product is available for $5.
30 Shattered Glass Brushes
Lens Flare & Stars Photoshop Brushes
This Lens Flare and Star Photoshop Brush pack contains 42 amazing brushes perfect for adding a little shine to your work. Get great results with these easy-to-use brushes and download today!
Lens Flare & Stars Photoshop Brushes
30 Optical Flare Brushes
The 30 Optical Flare Brushes from market author nada-images contains 30 optical flare brushes and transparent .png files. This product is available for $6.
30 Optical Flare Brushes
Subtlecraft – Brushes
In this mega pack of Subtle Craft Photoshop Brushes, you’ll get a wonderful collection of 50 high resolution brushes. Also included is an awesome set of 50 textures perfect for retro effects.
Subtlecraft – Brushes
Spotlight Brushes
The Spotlight Brushes from market author Codevz contains 15 spotlight brushes. This product is available for $5.
Spotlight Brushes
PSD Survival Brush Pack
Or get this super cool PSD Survival Brush Pack. This pack contains over 100 high quality Photoshop brushes perfect for any creative scenario. Enjoy fabulous textures and incredible creativity all in one download!
PSD Survival Brush Pack
30 Hi-Res Custom Brushes – Nature
The 30 Hi-Res Custom Brushes – Nature from market author PrismaDesign contains a set of professional Photoshop brushes perfect for graphic designers and illustrators. This product is available for $6.
30 Hi-Res Custom Brushes – Nature
25 Soft Waves Photoshop Brushes
The 25 Soft Waves Photoshop Brushes from market author env1ro contains 25 abstract soft waves/smokes/flows in high resolution. This product is available for $4.
25 Soft Waves Photoshop Brushes
74 Handcrafted Splatter Brushes
Add some splashes to your designs with this set of 74 Handcrafted Splatter Brushes. This set contains incredible, detailed brushes you’ll definitely want in your arsenal. Download to access this pack today!
74 Handcrafted Splatter Brushes
Snow & Rain Brushes
The Snow & Rain Brushes from market author nada-images contains 30 high-quality snow and rain brushes. This product is available for $6.
Snow & Rain Brushes
Metal Sparks – 20 Photoshop Brushes
The Real Fireball Brush Resource Kit from market author kirk3d contains 30 brushes, 30 high-quality jpg and 30 transparent png files of actual fireballs. This product is available for $6.
Photoshop Space Brushes
This cool set of Photoshop Space Brushes contains 10 photo realistic starscape brushes. Create a beautiful night sky with this easy-to-use set today!
This beautiful set of Photoshop Stroke Brushes contains 30 artful brushes crafted from traditional media. Feel free to download the companion ink set for more incredible effects!
30 Stroke Brushes
40 Halftone Photoshop Brushes
The 40 Halftone Photoshop Brushes from market author env1ro contains 40 halftone in high-resolution brushes. This product is available for $4.
40 Halftone Photoshop Brushes
Gouache & Acrylic Photoshop Brushes
The Gouache & Acrylic Photoshop Brushes from market author M-e-f contains 30 Photoshop brushes that imitate traditional acrylic and gouache tools! This product is available for $4.
Gouache & Acrylic Photoshop Brushes
Againts Alphabethical Brushes
This set of Against Alphabethical Brushes contains a wicked selection of 11 watercolor brushes we’re sure you’ll love. Dive into a grunge-inspired project with this collection today!
Againts Alphabethical Brushes
Abstraktt Shapes V2
The Abstraktt Shapes V2 from market author Shemul contains a collection of some smoky lines or random lines or just abstract brushes. This product is available for $5.
In full disclosure, I pull double duty as an article writer and content developer for Envato Market. The following are brush packs of my own that are available on Envato Market, and I would ask that you might consider them as well as the brushes that are featured above.
The Real Fireball Brush Resource Kit from market author kirk3d contains 30 brushes, 30 high-quality jpg and 30 transparent png files of actual fireballs. This product is available for $6.
Real Fireball Brush Resource Kit
50 Vintage Woodblock Brushes
Last but not least, enjoy this amazing set of 50 Vintage Woodblock Brushes. Made from scratch, these textures reflect actual high quality woodblock textures. Download this set today to add a retro flair to your designs.
50 Vintage Woodblock Brushes
Photoshop Brush Tutorials on Envato Tuts+
Creating your very own custom brushes in Photoshop gives you ultimate control over your own resources. These tutorials will walk you through that process of crafting your very own creative custom brushes.
In this tutorial you’ll learn an easy technique to create your own custom sun ray brushes. To do that, you’ll use different filters and color adjustments.
How to Create Your Own Light Ray Brushes From Scratch in Adobe Photoshop
Adding shattered glass to a design is a great way to introduce drama and interest. The visual depiction of broken glass is very evocative and full of energy and conflict. Creating it is full of technical challenges. Illustrating it is difficult and time consuming, but photographing it well is no easy task! In this Quick Tip, we will give you a great technique for safely generating shattered glass brushes in Adobe Photoshop.
How to Create Custom Shattered Glass Brushes in Adobe Photoshop
In this tutorial we’ll create a small set of custom brushes from scratch and learn how to render animal fur with them. We’ll focus on rendering a fox tail in grayscale, using custom brushes and the Smudge Tool to create both soft and coarse fur, and using Blending Modes to add color and warmth to the rendered piece.
How to Create Custom Brushes to Render Fur in Adobe Photoshop
Smoke trails are elegant, beautiful, and amazing to watch. Thin wisps of smoke dancing through the air reveal just how fluid our atmosphere really is. The effect is deceptively simple, and the dynamics of it are dizzyingly complex.
Recreating believable smoke in a digital environment is no easy task. However, capturing the practical effect is a much easier prospect. In this quick tip, I’ll share a technique that I use to create stunningly beautiful custom smoke brushes in Adobe Photoshop.
How to Create Custom Smoke Brushes in Adobe Photoshop
It’s a fairly easy feat to create custom sets of grunge brushes in Adobe Photoshop once you have a couple of techniques down. The main ideas are to have a textured source and to play around with filters that manipulate the look of sketched-out lines and doodles. Join me below in creating a custom set of brushes, ready for painting with, using three sources of texture: scanned paper and objects, a stock photo, and manipulated doodles within Photoshop itself.
Water splashes are a beautiful phenomenon. The randomness of liquid physics ensures that every splash is unique. The result is a natural struggle of the fluid as an external force flings it around and gravity insists it return to a resting state. This struggle takes place in the span of a fraction of a second, and it often happens too quickly for us to be able to capture and appreciate the simple majesty of the effect.
Because water splashes are so familiar, yet elusive, they make for excellent compositional elements. The image of a splash also conveys movement and mood. If you want to use them in your own designs, you probably consider purchasing stock images as your only option. This Quick Tip is here to show you that with a bit of effort, you too can create your own beautiful water splashes to use!
How to Create Custom Water Splash Brushes in Adobe Photoshop
Rust. That beautifully terrible oxidation of iron elements. It’s a fact of life in our world filled with metal and machines. Time and moisture take their toll, and even our most magnificent machines deteriorate. For digital artists who focus on photo manipulations, rust is a reliable way of adding realistic grunge, texture and realism to a piece.
In this Quick Tip we will explore a method of rusting metal without having to wait for nature to do it for us!
Create Your Own Rust Brushes From Scratch in Adobe Photoshop
Creating custom watercolor brushes is as easy as dripping ink or watercolor paint onto paper. You will have custom, ready-to-paint brushes in no time thanks to this simple tutorial. Download the attached watercolor scans and follow the steps below to create your own set of drippy, splashy, and splattered brushes.
How to Make Your Own Watercolor Brushes in Adobe Photoshop
Brushes, Beloved Brushes
As you begin to explore the wonders of Photoshop Brushes, one of the things you should keep in mind is that having a massive selection of brushes loaded in Photoshop will soak up memory. It’s not unmanageable, but it can get out of hand if Photoshop has to load thousands of high-resolution brushes every time it starts. Consider keeping your .abr files stored in a separate folder and then loading that brush set as needed.
Custom Brushes in Photoshop are one of the most fun and interesting ways to add visual flavor and authentic texture to any digital work. Learn to love them and they will love you back.
In this tutorial, we are going to recreate logo of an upcoming movie, Justice League. In the movie, the logo was probably made using 3D software. But that won’t stop us from recreating it using Photoshop and Illustrator. We will use Illustrator to draw the logo’s shapes and then bring them into Photoshop to enhance its appearance. Let’s get started.
First, we will draw the logo in vector software, Adobe Illustrator. You can draw it directly in Photoshop, if you want to. But personally I prefer Illustrator since it has better control for vector editing. In Illustrator, make a New Document (File > New). Any size is acceptable.
Step 2
Activate the Rectangle Tool and then click once on the empty canvas. A dialog box will pop up asking for the dimensions of the rectangle we want to make. Set it to 13 cm x 12 cm. Click the OK button to make the rectangle at exactly that size.
Step 3
Make sure you have activated the Smart Guides (View > Smart Guides). Select the rectangle shape. Using Pen Tool, click on the center of its lower edge to add a new anchor point.
Step 4
Pull the new anchor point down using the Direct Selection Tool while holding the Shift key.
Step 5
While the shape is selected, click Object > Path > Offset Path. Set a negative offset size until we have made the frame shape. Make sure the Preview option is selected, which will allow you to see the end result in real time.
Step 6
Using Direct Selection Tool, select two anchor points on top. Add a small amount of radius corner from the Option Bar.
Step 7
We’re done building the frame, so let’s move on to building the letters. You can try searching for a font type that matches the original letter shape, but in this tutorial we’ll draw them from scratch. We start with a rectangle shape as the base for the J letter.
Step 8
Duplicate the shape (Control-C, Control-V) and then Rotate it 90°. Attach it onto the lower part of the J letter. Duplicate another shape and use it for the upper part of the J letter.
Step 9
We need to move some anchor points using the Direct Selection Tool. Check out the following pictures for references.
Step 10
Once you’re happy with the result, we need to combine all the shapes into a single letter J. Select the shapes and then click Unite on the Pathfinder panel.
Step 11
Select all the anchor points and then add Radius Corner.
Step 12
Add bigger Radius Corners to the two anchor points at the bottom of the J letter.
Step 13
Using a similar approach as in the previous steps, draw the L letter. We start with a rectangle. Make sure the rectangle shape has the same thickness as the one used in the J letter.
Step 14
Drag its right edge upward using the Direct Selection Tool.
Step 15
Add another rectangle.
Step 16
Select both shapes and Combine them into a single L letter.
Step 17
If we look closely at the vector path, we will notice that there are some unneeded anchor points, such as the two points shown below. It’s a good practice to always keep your path clean and free from unused anchor points. Click both points with the Pen Tool to remove them.
Step 18
Here are some more anchor points we want to remove.
Step 19
Add a star shape using the Star Tool. Place it in the middle of the letters.
Step 20
Select the star and then Copy it (Control-C). Then, select both the star and a letter. From the Pathfinder panel, select Subtract.
Step 21
Hit Control-F to Paste the star object that we have copied earlier in the same place. Select the star and the remaining letter and then Subtract it from the Pathfinder panel.
2. How to Export Vector Paths to Photoshop
Step 1
We are done with the vector shapes, so let’s transfer them to Photoshop. Select all the shapes we have made and hit Control-C.
Step 2
Let’s open up Photoshop. Make a New File (Control-N).
Step 3
Click the Add Adjustment Layer icon at the bottom of the Layers panelto add a Solid Color. In the next dialog box, select a dark color (#0e0f16) for the canvas background.
Step 4
Hit Control-V to Paste the vector path we made earlier in Illustrator. Paste it as a Shape Layer.
Step 5
Double-click the layer shape thumbnail and change its color to a dark shade of gray (#414650).
Step 6
Now, we want to move the letters and the frame into separate layers. This step will ease the editing process. Select the letters’ paths and then hit Control-Shift-J.
Step 7
Change its color to a lighter shade of gray (#78757b).
Step 8
Repeat the process for its frame, and move it onto a separate layer. Keep in mind that now we have three shape layers: one for the JL letters, another for their frame, and another one for the pentagon shape background.
Step 9
Make sure the letters’ layer shape is selected and then double-click the layer to add some styles. We want to add Bevel & Emboss to add a bit of 3D appearance onto the letters’ surface. Inner Glow and Gradient Overlay will help add lighting onto their surface. And Drop Shadow will lift the letters off their background.
Step 10
We also need to add styles onto the frame layer. For the frame, add a large Inner Glow with a sharp white to black Gradient to add metallic lighting onto the surface.
Step 11
We also need to add styles to the logo background.
3. How to Apply Textures
Step 1
The logo appears three dimensional, but still too flat. To fix this, we need to add texture. Grab the metal texture number 4. Place it above the letters shape layer. Reduce its layer Opacity to 60% and then hit Control-Alt-G to convert the texture into a Clipping Mask.
Step 2
Add another metal texture, this time number 8. Place it above the letters shape and just like the previous texture, convert it into a Clipping Mask.
Step 3
Let’s add another texture, this time a marble one, to add random wavy lines across the letters. Hit D to reset the background and foreground color to their default settings, white and black. Make a New Layer and then make a new Selection covering the letters. Click Filter > Render > Clouds.
Step 4
Click Filter > Render > Difference Clouds.
Step 5
Hit Control-F a few times to apply another Difference Clouds Filter. Once you get some interesting shapes, hit Control-Alt-G to convert it into a Clipping Mask and put the texture inside the letters shapes. In the Layers panel, change its Layer Blend Mode to Overlay and reduce its Opacity.
Step 6
And, of course, we need to add texture to the frame. This time, use a concrete texture. Place it above the frame, reduce its Opacity, and convert it into a Clipping Mask.
Step 7
Add another metal texture, place it above the frame with low Opacity, and then convert it into a Clipping Mask.
Step 8
Don’t forget to add texture onto the logo background.
4. How to Add Lighting to the Background
Step 1
Add a New Layer and place it above the Justice League logo. Activate the Brush Tool. Right-click to open the list of available brushes. Select a Scatter Brush. Paint white inside the logo background.
Step 2
Soften the brush stroke by applying a Gaussian Blur filter from Filter > Blur > Gaussian Blur. Use a big RadiusSize until the stroke is completely blurred. In the Layers panel, reduce its Opacity and set its Layer Blend Mode to Overlay.
Step 3
Add another white brush stroke to add more lighting into the scene.
Step 4
We still need to add stronger shadows to the letters manually. Add a New Layer and place it underneath the letters shape layer. Control-click the thumbnail of the letters layer to make a new selection based on its shape.
Step 5
Fill the selection with black. Then hit Control-D to remove the selection. Using the Move Tool, move the shadow a few pixels down. Keep the shadow soft by applying a Gaussian Blur filter (Filter > Blur > Gaussian Blur) and reducing its Opacity.
Step 6
Let’s add another texture onto the logo. Make a New Layer and draw a selection covering the logo. Click Filter > Render > Clouds.
Step 7
Click Filter > Render > Difference Clouds a few times until you get an interesting texture.
Step 8
Click Image > Adjustments > Levels or hit Control-L. In the Levels dialog box, drag the white triangle until we have nice contrast inside the selection.
Step 9
To isolate the texture in the letters and its frame, we’ll need masking. Control-click the letters thumbnail layer and then Shift-Control-click the frame thumbnail layers. Add a Mask to the shape layer and then set its Layer Blend Mode to Darker Color with 30% Opacity.
Step 10
We want to add depth into the scene. Paint white on a New Layer using a Soft Round Brush. If you want it to be softer, just apply a Gaussian Blur filter (Filter > Blur > Gaussian Blur). Reduce its layer Opacity and use Overlay for its Blend Mode.
Step 11
Repeat this step to add another soft highlight on the scene.
Step 12
Don’t forget to add the dark area. In the top left corner, paint a random black spot and keep it subtle by making it transparent. Add some Gaussian Blur if needed.
Step 13
Let’s add a grainy background to create a dark mood for the overall scene. To do this, add a New Layer and then Fill it with white. Click Filter > Noise > Add Noise. Make sure Monochromatic is selected. Click OK. Change the Layer Blend Mode to Multiply to preserve all the dark pixels and hide the white pixels from sight.
Step 14
We want to add a blue shade into the background. From the Layers panel, add a Photo Filter and select Blue for its color. By default,the Photo Filter Adjustment Layer will affect every pixel underneath it. To confine it to the background, select its Layer Mask and paint over the logo with black.
5. How to Add Lights and Reflections
Step 1
Make a New Layer. Control-click the letters’ shape layer to make a new selection based on the letters shape. Click Edit > Stroke. In the dialog box, set white as its StrokeColor with a 1 pxWidth. Click OK to accept the result.
Step 2
Using the Eraser Tool with 0% Hardness, erase most parts of the stroke line and leave some on the letters’ corners.
Step 3
Duplicate the stroke line and then apply the Gaussian Blur filter to soften the line. Reduce its layer Opacity to keep it subtle.
Step 4
Repeat the same procedure for its frame.
Step 5
Zoom in on the center of the letters, right on the empty star area. Using a Soft Round Brush, dab once on a New Layer using light yellow as its color.
Step 6
Hit Control-T to Transform the brush stroke.
Step 7
Hold the Control key and then drag its corner to skew the brush stroke. Hit the Enter key to accept the transformation result.
Step 8
Repeat the previous steps, add a quick dab of a brush stroke and then skew it. Repeat this a few times until we have enough light reflection to fill the gap.
Step 9
Behind the star reflection, paint white for a fill light on the logo background.
Step 10
We can add another light reflection on the other part of the logo where the light hits it. In this scene, the imaginary light source was placed in the top right corner. One of the best places for our next reflection is in the lower left part of the logo. Just like in the previous steps, we just need to paint a soft light yellow over the area.
Step 11
Make it more realistic by painting over it again using a smaller brush with white or another light color.
Step 12
Using the same techniques, another light reflection is added to the top right corner. Considering this is where the imaginary light source was placed, the reflection should be bigger and stronger.
Final Result
This is our final result. As you can see, we did a lot of manual painting and added some subtle highlights to keep the scene realistic. We also relied on textures to easily add realism to the shape.
Thank you for reading, and I hope you’ve learned some useful techniques from this simple tutorial. If you do follow along, please make sure to upload the result in the comments below—I’d love to see it.
When thinking of drones, the average Joe usually pictures a flying thing in his mind. This is far from reality, although most media focus is on the flying, noisy devices.
A Kickstarter campaign, already largely financed, is still collecting money to start producing the first bionic wireless underwater fish drone. This electronic fish, controllable with your smartphone, will be your underwater eyes and film some surprisingly good imagery.
As you can see on the above gif, the drone moves around a bit like a fish. It can go as deep as 196 feet, which is about 60 meters. The camera can produce 4K ultra HD videos and comes with a stabilizer. It can store 90 to 120 minutes of video.
Every week, we’ll give you an overview of the best deals for designers, make sure you don’t miss any by subscribing to our deals feed. You can also follow the recently launched website Type Deals if you are looking for free fonts or font deals.
Best Seller Font Pack from TipoType
Now’s the chance to beef up your typeface toolbox with this Deal from TipoType! The Best Seller Font Pack features 3 unique font families: Amelia Rounded, Trasandina and Arya. These professional fonts offer real versatility in your projects with a variety of weights, styles and features.
Bundle: 2500+ Professional Photoshop Actions and Vectors
Now you can turn any photo into a professional image. Best of all, it’s not just simple, it’s lightning fast! With this Mega Photoshop Actions Bundle from Inventicons, you’ll get 7 different Photoshop Action sets, adding up to more than 2500 unique actions and vectors! Add everything from light leaks to vintage to bubbles with a few quick clicks of your mouse. Act now and get them all for a massive 96% off!
Flowcharts make building websites and apps loads easier. But building flowcharts can be a bit tricky and time-consuming if you’re not careful. Luckily, if you have Sketch, this Mighty Deal will save you loads of time and money! The EasyThree Website UX Flowchart – Sketch version lets you quickly and easily whip up detailed flowcharts with mini wireframes, flowchart elements and a variety of styles and schemes to choose from.
Learn SWIFT iOS App Programming (Beginner/Intermediate)
Have a great idea for an app but don’t have the foggiest notion how to start? No worries, you’re halfway there already! This Mighty Deal from Appcoda offers you a big discount on beginner and intermediate eBooks that will teach you beginning iOS10 programming with Swift! Fully updated for Xcode 8, Swift 3 and iOS 10.3, you’ll learn to build real usable apps from scratch thanks to all sorts of hands-on exercises and projects. PLUS you’ll get 1 year of free updates, which includes the updated eBooks for iOS 11.
Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren’t replacements for methods, computed values, or watchers, because filters don’t transform the data, just the output that the user sees. As of Vue 2.0, there are no built-in filters, we need to construct them ourselves.
We can use filters locally or globally, but it’s worth mentioning that if you declare a Vue filter globally it should come before the Vue instance. In both cases, we would pass the value in as a parameter.
//global
Vue.filter('filterName', function(value) {
return // thing to transform
});
//locally, like methods or computed
filters: {
filterName(value) {
return // thing to transform
}
}
Filters are used with a pipe, following the piece of data you’d like to be altered upon render. So we would show the piece of data we want to alter, followed by the filter
You can also use filters in v-bind directives rather than just the mustache template. Filters can also be chained. Keep in mind if you’re going to chain filters: ordering matters. The first filter will be applied first, the second will be applied to the completed first, and so on.
{{ data | filterA | filterB }}
We can also pass additional arguments into filters like so:
{{ data | filterName(arg1, arg2) }}
// locally, like methods or computed
filters: {
filterName(value, arg1, arg2) {
return //thing to transform
}
}
Now, you might think, based on the name, that filters would be great for forms when we want to show only some bits of data and not others. However, filters need to rerun on every single update, so if you have something like an input that updates every time you type, it’s not very performant. Better to use computed for something like this as it’s less overhead. The results will be cached based on their dependencies and won’t be rerun on every update. Computed properties will only be reevaluated when those dependencies change, but can also handle complex logic. This makes them excellent candidates for filtering information based on input. There are, however, circumstances where you do need to update based on changes in time, and for these instances, better to use a method.
Let’s take a look at building something using Firebase and React. We’ll be building something called Fun Food Friends, a web application for planning your next potluck, which hopefully feels like something rather „real world”, in that you can imagine using these technologies in your own production projects. The big idea in this app is that you and your friends will be able to log in and be able to see and post information about what you’re planning to bring to the potlock.
When we’re finished, it will look like this:
Our example app: Fun Food Friends
This article assumes you already have some basic knowledge of how React works and maybe built a few small apps with React. If you haven’t, I would recommend checking out a series like Wes Bos’ React for Beginners first before continuing on.
What is Firebase?
Google’s Firebase is a cloud-based database hosting service that will set up a database for you and host it, as well as offer you the tools to interact with it. You can use it to store and retrieve data in real time. That’s not all Firebase does, it can do more things like handle user authentication and store files, but we’ll be mainly focusing on data storage.
The data storage ability of Firebase make it a perfect fit for React. A persistent, real-time backend for your application to plug in to!
How does Firebase store data?
Firebase stores data as a giant object with key-value pairs. Unlike JSON or JavaScript objects, there are no arrays in Firebase.
A Firebase database might look something like this:
We’ll start by using the incredibly handy `create-react-app` package in order to quickly set up a new React project without having to worry about any build configuration. Open up your command line, and type the following:
This will boot up your app in the browser, and start a watch task in your terminal so that we can begin hacking away at the project. We’re also installing the `firebase` package here as we’ll need it for the next step.
Creating our Firebase Database
Now that our app is set up, we’ll need to create an account and database on Firebase so that we can link up our application to it.
This will take you to a page where you’ll be asked to authenticate with your Google account. Select the account that you’d like this project to be affiliated with, and press OK.
This should take you to the Firebase console, which looks something like this:
Now let’s create our project’s database. Click Add Project. Let’s call it „fun-food-friends” and press OK.
This will take you to your app’s dashboard, which looks like this:
Since we’ll be building a web app, select Add Firebase to your web app. This will trigger a popup with some code that looks like this:
Since we’ll be importing Firebase into our project using ES6 modules, we won’t need those script tags. That config object is important though: it’s how we authenticate our React application with our Firebase database.
Hooking up our App to Firebase
Copy that whole config object, and head back over to your React project. Find your `src` folder, and create a file called `firebase.js`. Inside of it, let’s import firebase, our config, and initialize our app:
One last thing we’ll need to do before we can dive into roughing out our App. We need to temporarily disable authentication requirements on our app so that we can add and remove items without needing to have any kind of user authentication flow.
From the Firebase Dashboard, on the left-hand side of the screen, you’ll notice that there is a Database tab. Click on it. Then, on the right-hand side, under the subheading Realtime Database, you’ll see a Rules tab. This will cause an object to appear that looks something like this:
We need to set .read and .write to both be equal to true, otherwise later, when we try to add data to our database from our application, Firebase won’t let us. When you’re finished, it should look something like this:
Make sure to click the Publish button.
And that’s all there is to hooking up our database! Anytime we need a component of our application to connect with our Firebase database, we simply need to import our firebase module and we’ll have direct reference to it.
Building out our App’s Rough Skeleton
Let’s build out a rough HTML skeleton for our application. We’ll build a simple form with two inputs:
A field where the user can submit their name
A field where the user can enter what food they’re bringing to the potluck.
Since our app is quite simple, we’ll keep everything inside of one main component, `App.js`. Open up `src/App.js`, and remove the `App` component, replacing it with this basic skeleton:
I’ve prepared a little bit of CSS for you to paste into the `App.css` file, just so that our app doesn’t look totally bland. If you want to grab it, just go here and copy and paste the raw contents you find there into your `src/App.css` file!
We’ll also need to embed a link to Google Fonts and Font Awesome, so go ahead and open up `public/index.html` and add the following lines below the favicon:
Before we can start adding data into our Firebase database, we need to connect our inputs to our component’s state, so that React can keep track of them.
First, let’s carve out some space in our component’s state – a space to keep track of the user using our app (username) and the item they intend to bring (currentItem). We’ll do this by creating a constructor() hook for our app and setting a default value for our input’s state there:
We’ll add a onChange event handlers to our inputs, as well as providing them with a value derived from our state (this is called a „controlled input”), like this:
<section className="add-item">
<form>
<input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.username} />
<input type="text" name="currentItem" placeholder="What are you bringing?" onChange={this.handleChange} value={this.state.currentItem} />
<button>Add Item</button>
</form>
</section>
And finally, we’ll create a catch-all handleChange method that receives the event from our inputs, and updates that input’s corresponding piece of state:
If you aren’t familiar with using brackets to dynamically determine key name in an object literal, check out the MDN docs on computed properties.
Since we’re using ES6 classes and need access to this in our handleChange method, we’ll also need to bind it back in our constructor() component like this:
If you now use the React DevTools to inspect your App component’s state, you’ll see that both of your inputs are now successfully hooked up and being tracked in your component’s state:
Adding a new Potluck Item to your Database
Now that we’re tracking our inputs, let’s make it so that we can add a new item to our database so that Firebase can keep track of it.
First we’ll need to connect to Firebase in order to do this, we’ll start by importing our firebase module that we created earlier. We’ll also delete the logo.svg import, since it’s just an unneeded part of the create-react-app boiler plate and will cause warnings if we don’t:
import React, { Component } from 'react';
import logo from './logo.svg'; // <--- remove this line
import './App.css';
import firebase from './firebase.js'; // <--- add this line
Once that’s done, we’ll need to make our 'Add Item’ button let Firebase know what we’d like to add to our database and where we’d like to put it.
First we’ll attach a submit event listener for our form, and have it call a handleSubmit method we’ll write in a minute:
<form onSubmit={this.handleSubmit}>
<input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.username} />
<input type="text" name="currentItem" placeholder="What are you bringing ?" onChange={this.handleChange} value={this.state.currentItem} />
<button>Add Item</button>
</form>
e.preventDefault() – we need to prevent the default behavior of the form, which if we don’t will cause the page to refresh when you hit the submit button.
const itemsRef = firebase.database().ref('items'); – we need to carve out a space in our Firebase database where we’d like to store all of the items that people are bringing to the potluck. We do this by calling the ref method and passing in the destination we’d like them to be stored (items).
const item = { /* .. */ } here we grab the item the user typed in (as well as their username) from the state, and package it into an object so we ship it off to our Firebase database.
itemsRef.push(item) similar to the Array.push method, this sends a copy of our object so that it can be stored in Firebase.
Finally this.setState({ currentItem: '', username:''}); is just so that we can clear out the inputs so that an additional item can be added.
Now try adding a new item, and hitting submit! If you don’t have any errors in your console, you should be able to head on over to the Firebase dashboard, where you’ll see something like this inside your Database tab:
If you click the little + next to items you’ll be able to look inside, like this:
That strange looking -Kk8lHSMqC5oP6Qai0Vx key you see is a programmatically generated key created by Firebase when we called the push method, but inside you’ll find whatever item you added to the Potluck.
You’ll notice that all of our records are stored as objects with properties that have the generated names you see above – just another quick reminder that there are no arrays in Firebase!
Try adding more items and see what happens.
Way to go! We’re almost there, but we still have one more step: getting our potluck items to appear on the page.
Retrieving our Potluck Items from the database
Just like in a traditional React app, we need to find some way to keep track of all of the potluck dishes so that we can display what people are planning to bring on to the page.
Without a database, this poses an issue, since every time we refresh the page any new dishes that were added to the potluck would get lost. But with Firebase, this is a snap to fix!
First, let’s create a variable called items inside of default state. This will eventually hold all of the potluck items that are currently being tracked inside of our Firebase database.
Next, we need to actually grab those items from our Firebase database so that we can store them into our state.
The Firebase API offers us an incredibly easy way to not only grab this kind information from our database, but also to update us when new values get added to our database. It accomplishes this using the value custom event listener.
The callback here, which we’ve called snapshot, provides you with a bird’s eye overview of the items ref inside of your database. From here, you can easily grab a list of all of the properties inside of that items ref, using the .val() method which you can call on the snapshot.
This value automatically fires on two occassions:
Any time a new item is added or removed from our items reference inside of our database
The first time the event listener is attached
This makes it especially useful for initially grabbing a list of all of the items inside of our database, and then subsequently tracking when new items get added and removed.
We’ll attach this event listener inside of our componentDidMount, so that we start tracking our Potluck items as soon as our component loads on to the page:
componentDidMount() {
const itemsRef = firebase.database().ref('items');
itemsRef.on('value', (snapshot) => {
let items = snapshot.val();
let newState = [];
for (let item in items) {
newState.push({
id: item,
title: items[item].title,
user: items[item].user
});
}
this.setState({
items: newState
});
});
}
Here, we instantiate a new array and populate it with the results that come back from our value listener. We for…in over each key, and push the result into an object inside our newState array. Finally, once all the keys are iterated over (and therefore all items are grabbed from our database), we update the state with this list of items from our database.
Inspect your App using the React Dev Tools – you’ll notice that you now have an items property inside of your state with all of the items people have submitted for your potluck!
Displaying Potluck Items on the Page
Now let’s get these potluck items to actually display on the page. This is relatively easy, now that we have a list of all of our items being grabbed from Firebase and stored inside of our state. We just map over it and print the results on to the page, like so:
Try adding a new item through your form. You’ll notice that it automatically causes a new list item to appear on the page!
It’s not magic, Firebase’s value event is firing when you push the new item into your database, and sending back a new snapshot with a list of all of the items currently in your database, which ultimate updates your component through a setState which triggers a re-render and displays the new item on the page.
But we digress. There’s still one more step! We need to make it so that we can remove an item from the page.
Removing Items from the Page
We’ll need to create a new method on our component for this: removeItem. This method will need to be passed that unique key which serves as the identifier for each one of the items inside of our Firebase database.
Here, instead of grabbing all of the items as we did before when adding a new item, we instead look up a specific item by its key (that strange –Kk8lHSMqC5oP6Qai0Vx key from before). We can then call firebase.database()’s remove method, which strips it from the page.
Finally, we’ll need to add a button to our UI with an onClick that calls our removeItem method and passes it the item’s key, like follows:
And that’s all there is to it! Just like our addItem method, our UI and component state automatically update when an item is removed from the database.
Here’s what our completed `App.js` should look like:
Now you can truly see how Firebase and React play beautifully together. Firebase’s ability to persist data on the fly, coupled with React’s component lifecycle, makes for an incredibly simple and powerful way to quickly build up simple applications.
This article just scratches the surface of what the Firebase API can provide us. For example, with just a few more steps (and perhaps we will go over this in a future article), it would be incredibly easy to expand this application so that users could log in and out, be able to have a display photo next to the item that they are bringing, and only be able to remove their own items.
I’m sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do.
You’re on your own piecing the HTML together. That’s good, because it’s flexible. People use frameworks like this in all kinds of CMS’s and backend systems. But what if you want to apply some structure to this, making actual components out of the components given to you in the framework?
We could abstract that into a reusable component by:
Pass in the type of alert (second half of the second class)
Pass in the content inside the alert
I’m sure you could imagine doing that in the backend or templating language of your choice. A single PHP file in which you set variables representing those things before you include it. A Rails partial in which you pass locals to it. A literal React component in JSX where you pass the stuff as props. This kind of thing makes these patterns a lot easier to reuse.
Morgan did this with Nunjucks:
{% macro alert(class="success", text="<strong>Well done!</strong> You successfully read this important alert message.") %}
<div class="alert alert-{{ class }}" role="alert">
{{ text | safe }}
</div>
{% endmacro %}
I think this is super compelling and the kind of thing we’ll be doing more and more as design systems are becoming more of a standard practice.
