Post pobrano z: Turn your room into a jungle with these DIY paper animal lamps
Owl Paperlamps is a project that comes from Portugal, initiated by Hugo and Theresa, two designers who decided that nature needs to take more space in our habitat. These origami lamps consist of a DIY kit for you to assemble our designs. You can buy it on the Etsy shop of the company.
Post pobrano z: The Many Tools for Shape Morphing
To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.
The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point.
I wouldn’t suggest doing important work in SMIL but it is OG shape morphing.
See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen.
Our article How SVG Shape Morphing Works covers SMIL shape morphing in detail, and the demo above is from Noah Blon’s An Intro to SVG Animation with SMIL.
To get a feel for the must have same # of points thing, you might enjoy playing with Shape Shifter:
Moving right along to probably the most robust possible option, Greensock’s MorphSVG is a powerhouse. Bear in mind:
MorphSVGPlugin is a bonus plugin for Club GreenSock members („Shockingly Green” and „Business Green” levels). It’s our way of showing our gratitude to those who are fueling innovation at GreenSock.
Worth it. Just MorphSVG alone is amazing. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down.
See the complex morphing happening here:
See the Pen Morphing SVG Slider – 20th Century Women by Sullivan Nolan (@nolakat) on CodePen.
If you’d like to play with MorphSVG, I created a drag-and-drop Pen to morphing between any two shapes (best results with SVG’s with viewBox="0 0 100 100" SVGs with just one <path>):
See the Pen Morph Machine by Chris Coyier (@chriscoyier) on CodePen.
If you’re a user of Adobe Muse, you might be interested in the Muse Morph widget which combines Illustrator, Muse, and Greensock MorphSVG.
SnapSVG’s animate() function will animate an SVG element’s properties, including path data. Codrops has excellent examples of this in action. Here’s a little movie showing some of them off:
SnapSVG is, in a sense, Raphaël’s older brother, which could do things like this:
The newer anime.js library has shape morphing built in.
It’s a little hard to believe, but CSS is getting in on the shape morphing action! Eric Willigers, a Chrome developer, emailed me last year:
’d’ has become a presentation attribute. This allows SVG path elements to be animated using CSS animations and Web Animations, with path(’…’) keyframes.
I assume this is a spec change, so browsers other than Chrome will, presumably, start allowing this. For now, this works great in Chrome:
See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.
SVG Morpheus is a JavaScript lib entirely devoted to shape morphing. Here’s a great demo of it in action:
See the Pen Mobiltelefonens Evolution (SVG Shape Morphing) by Noel Delgado (@noeldelgado) on CodePen.
There is an SVG plugin for Kute.js that allows for the animation of SVG properties, including shape morphing.
See the Pen Morph SVG with KUTE.js by thednp (@thednp) on CodePen.
The API gives you some control over the morphing, like how precise you want it to be and the ability to reverse the draw direction so different points match up to tween.
d3, probably the biggest library out there for data viz folks, can also do shape morphing. Here’s a GIF recording of a demo by Mike Bostock:
There is also a d3 plugin called d3-interpolate-path that helps make it better:
Interpolates path `d` attribute smoothly when A and B have different number of points.
„Motion graphics for the web” is the mo.js tagline, another newer library. Oleg Solomka (@LegoMushroom) has some incredible demos of what is is capable of:
See the Pen Mole :: property curves example by LegoMushroom (@sol0mka) on CodePen.
If you happen to be a video person before you became a web person (or you’re still both) perhaps you have experience working in Adobe After Effects, which is all about creating „incredible motion graphics and visual effects”. The bodymovin library exports After Effects into SVG, including plenty of hot morphing action. Here’s a great demo:
See the Pen svg jou jou monster by kittons (@airnan) on CodePen.
The Many Tools for Shape Morphing is a post from CSS-Tricks
Post pobrano z: Think you know the top web browsers?
If I had to blindly guess about global marketshare, I would have gotten it wrong. I probably would have forgotten about UC browser (kind of the point of Peter O’Shaughnessy’s article) that’s so huge in Asia. I would have guessed Firefox has a slight edge on Safari (turns out Firefox is half the share of Safari), and that Edge would be outpacing IE by now (also only half).
This is good dinner party conversation fodder, but I wouldn’t base any major decision making on it. The only stats that matter at your websites stats.
Here’s this sites, in the last 7 days.
There is always the chicken-or-egg conundrum though. If you support a browser that you didn’t before, doesn’t it stand to reason the numbers would go up for it? The time-on-site and bounce rate stuff would get better, anyway.
Direct Link to Article — Permalink
Think you know the top web browsers? is a post from CSS-Tricks
Post pobrano z: How to Create Traditional Romanian Objects in Adobe Illustrator
In today’s
tutorial, we’re going to take a close look at the process of creating a particularly
interesting icon pack, since we’re going to illustrate some Romanian traditional
objects that are the living definition of what “home” was back before the
digital age. As always, we’re going to use and abuse Illustrator’s geometric
shapes, in combination with some basic tools such as the Align panel and
Pathfinder.
That being said, grab a fresh batch of coffee and let’s dive in!
Also, if you’re
looking to expand the project, you can do so by heading over to GraphicRiver
and checking out some of their home-themed icons.
Since I’m hoping that you already have
Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N)
using the following settings:
And from the Advanced tab:
Since we’re going to be creating the icons
using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control
over our shapes.
Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:
Quick
tip: you can learn more about grids by reading this
in-depth piece on how Illustrator’s Grid System works.
Once we’ve set up our custom grid, all we
need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.
Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my how
to create pixel-perfect artwork tutorial, which will help you widen your
technical skills in no time.
With the New Document created, it would be
a good idea to structure our project using a couple of layers, since this way
we can maintain a steady workflow by focusing on one icon at a time.
That being said, bring up the Layers panel, and create a total of four
layers, which we will rename as follows:
The
reference grids (or base grids)
are a set of precisely delimited reference surfaces, which allow us to build
our icons by focusing on size and consistency.
Usually, the size of the grids determines
the size of the actual icons, and they should always be the first decision you
make on you start a new project, since you’ll always want to start from the
smallest possible size and build on that.
Now, in our case, we’re going to be
creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.
Start by locking all
but the “reference grids” layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the
overall size of our icons.
Add a smaller 120 x 120 px one (#FFFFFF) which will
act as our active drawing area, thus giving us an all-around 4 px padding.
Group the two squares composing the
reference grid using the Control-G keyboard
shortcut, and then create three copies at a distance of 40 px from one another, making sure to align them to the center of
the Artboard.
Once you’re done,
lock the current layer and move on to the next one where we’ll start working on
our first icon.
The pan flute,
also known as panpipes, is a simple yet interesting musical instrument dating all
the way back to the ancient Greeks. It takes its name from Pan, the god of
nature and protector of shepherds. The name itself is a derivative of the word “paein”
which means “to pasture”, which is probably the reason why so many cultures,
including mine, have associated the instrument with the act of herding.
To me, this little
object has a special meaning, since it manages to take me back to a time and
place when life was simpler, and home wasn’t all about the place, but the
people that made it home.
Now, without wasting any more time, make sure you’re on the right layer
(that would be the second one) and let’s get kick off the project by recreating
it.
Start working on the pan flute’s upper section, by creating an 8 x 6 px rectangle, which we will color
using #899E47 and then align to the top edge of the active drawing area,
positioning it at a distance of 4 px from
its top edge and 20 px from its left
one.
Give the shape an outline using the Stroke method, by creating a copy of it
(Control-C) which we will paste in
front (Control-F) and then adjust by
changing its color to #2B3249 and then flipping its Fill with its Stroke (Shift-X). Set the Stroke’s Weight to 4 px, selecting and grouping both
shapes together afterwards using the Control-G
keyboard shortcut.
Create nine copies of the shape that we’ve just
grouped (Control-C > Control-F nine
times), and then horizontally distribute them onto the original’s right side,
using the Align panel so that their
outlines end up overlapping.
Create the pipes using ten rectangles (#A8755A—see the dimensions
below) with a 4 px thick outline (#2B3249),
which we will horizontally stack next to one another, grouping (Control-G) and then positioning them
underneath the smaller rectangles.
Add an 8
px wide 4 px thick Stroke line (#2B3249) to the first,
fourth and seventh pipe’s lower section, positioning it at a distance of 2 px from their outlines. Once you’re done, select and group all the shapes that we have so far using the Control-G keyboard shortcut.
Create the horizontal section holding all the
pipes together using a 92 x 16 px rectangle
(#CE9D78) with a 4 px thick outline
(#2B3249), which we will group (Control-G)
and then center align to the pipes, positioning it at a distance of 12 px from the active drawing area’s
top edge.
Start adding details to the section from the
previous step, by creating the center flower using eight 2
x 2 px circles (#2B3249), which we will position around another 2 x 2 px one (2B3249). Once you have
them in place, don’t forget to select and group (Control-G) them together so that they won’t get separated by
accident.
Quick tip: for the current and
following step I recommend you turn on Pixel
Preview mode (Alt-Control-Y)
since it will give you the ability to carefully position each and every circle
as seen in the reference image. Once you’re
done, exit the mode by pressing Alt-Control-Y
again.
Start working on the left decorative wave
pattern using a couple of 2 x 2 px circles
(#2B3249), which we will position as seen in the reference image. Once you’re
done, select and group (Control-G)
all the circles together before moving on to the next step.
Finish off the current icon by adding the right
segment of the decorative pattern, using a copy of the one from the previous
step (Control-C > Control-F),
which we will position onto the opposite side of the flower, making sure to
vertically reflect it once we have it in place (right click > Transform > Reflect > Vertical). Once you’re
done, select and group (Control-G)
the decorative pattern to the underlying section, doing the same for all of the
icon’s composing shapes afterwards.
Living in a digital age can really erase some of the older arts from one’s
mind, especially if that person never encountered them in real life. Sewing,
which is thought to have originated way back in the Stone Age, was and in some
places still is a powerful part of the Romanian culture and tradition, since it
has been used as a means of decoration of both the home and the clothes and
tools used back in the day.
To me personally, sewing brings back so many fond
memories from my childhood, when I used to sit next to my grandmother and watch
her spend hours creating beautiful art pieces to decorate her
home.
That being said, let’s get back to our own art, by first making sure we’re on
the right layer (that would be the third one) and then creating our
second icon.
Start working on the frame’s main body by
creating a 106 x 106 px circle (#CE9D78)
with a 4 px thick outline (#2B3249),
which we will group (Control-G) and
then center align to the underlying active drawing area’s top edge.
Create a smaller 90 x 90 px circle (#A8755A) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then center align to the
one from the previous step.
Add the canvas using a 78 x 78 px circle (#EFD4C5) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then center align to the
previous section. Once you’re done, select and group (Control-G) all three sections together as well.
Start working on the frame’s bottom section by
creating its outline using a 20 x 18 px rectangle
(#2B3249), which we will center align to the active drawing area’s bottom edge,
making sure to send it to the back of the larger circles (right click > Transform > Arrange > Send to Back).
Add the fill section using a smaller 12 x 14 px rectangle (#CE9D78) which we
will center align to the top edge of the previously created shape.
Create an 18
px tall 4 px thick Stroke line (#2B3249), which we will
center align to the shape from the previous step.
Start working on the little tightening screw, by creating its main body
using a 44 px wide 4 px thick Stroke line (#2B3249), which we will
position towards the bottom section of the frame, leaving a 2 px gap between it and the larger
outline.
Add the screw’s cap using an 8 x
8 px square (#2B3249), which we will center align to the
body’s right anchor point. Once you’re done, select and group (Control-G) the two shapes together,
sending them to the back of the bottom section afterwards (right click > Transform > Arrange > Send to Back).
Start working on the actual decorative flower by creating the center
section using four 2 x 2 px squares
(#2B3249) which we will position so that they end
up forming a plus sign. Group (Control-G)
the shapes and then center align them to the canvas.
Turn on the Pixel
Preview mode (Alt-Control-Y) and
create the upper section of the flower’s top-left petal,
using three sets of four 2 x 2 px squares
(#E56F5C) which we will position next to one another, pushing each set 2 px up so that they end up forming a
stair set. Group (Control-G) the
squares and then position them onto the left side of the plus sign, making sure
to leave a 2 px gap between them.
Create a copy of the section from the previous step (Control-C > Control-F), which we
will rotate (right click > Transform
> Rotate > 90º) and then horizontally reflect (right click > Transform > Reflect > Horizontal),
positioning the resulting shape underneath the original.
Give the petal an outline, by adding a couple of 2 x 2 px squares (#2B3249) around its two composing sections,
making sure to select and group (Control-G)
all of them together once you’re done.
Create the other petals using three copies (Control-C > Control-F three times) of the one that we’ve just
finished working on, which we will position around the center plus sign,
reflecting them as needed.
Continue adding details to the flower by creating four copies (Control-C > Control-F four times) of
its center plus sign, which we will position on the outer edge of space found
between each pair of petals.
Finish off the flower, and with it the icon itself, by adding diagonal lines to each of its petals, using four sets of 2 x 2 px squares (#2B3249). Once you’re done, select and group (Control-G) all of the flower’s
composing shapes together, doing the same for the entire icon afterwards.
We are now down to
our third and last icon, which is composed of a set of traditional handmade
spoons, which are another powerful means of expression of Romanian people’s minds, used not only to decorate but also as a tool within their households.
I’m not even going
to talk all that much about this art form, since I’m really hoping that by
creating this little icon you’ll gain a powerful enough curiosity to search for more information on it.
That being said, make sure you’re on the right layer (that would be the
fourth one) and let’s finish this.
Start working on the first spoon by creating an 8 x 8 px circle (#D3685E) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position at a
distance of 16 px from the active
drawing area’s left edge, making sure to align it to its top edge afterwards.
Create a slightly larger 12
x 12 px circle (#CE9D78) with a 4 px
thick outline (#2B3249) on top of which we will add another 4 x 4 px circle (#2B3249). Group (Control-G) all three shapes together,
and then position them below the previous section.
Create the spoon’s first set of petals using two 10 x 10 px rectangles (#CE9D78), which we will adjust by setting
the Radius of their lower outer
corners to 8 px and their upper
inner ones to 4 px from within the Transform panel’s Rectangle Properties. Give the resulting shapes a 4 px thick outline (#2B3249),
individually grouping (Control-G)
each petal, and then positioning them below the previous section.
Create the remaining sets of petals using three
copies (Control-C > Control-F three times) of the ones that we already have, vertically
stacking them underneath one another.
Adjust the color of some of the petals by
carefully selecting them using the Direct
Selection Tool (A) and then changing the color to #A8755A.
Create a copy (Control-C > Control-F) of the spoon’s two circular sections, which we will position below its petals,
making sure to horizontally reflect them (right
click > Transform > Reflect > Horizontal) and change the color of
the larger one’s fill shape to #A8755A.
Create the section connecting the small bowl to
the spoon’s handle using an 8 x 16 px rectangle (#A8755A) (1),
which we will adjust by adding a pair of side anchor points at a distance of 4 px from its top edge using the Add Anchor Point Tool (+) (2).
Then,
individually select and push the shape’s top anchors to the inside by a
distance of 2 px (right click > Transform > Move >
Horizontal > + / – 4 px depending on which side you start with) (3) giving
the resulting shape a 4 px thick
outline (#2B3249) (4).
Add two 8
px wide 2 px thick Stroke lines (#2B3249) vertically stacked 3
px from one another, grouping (Control-G)
and then positioning the current section below the smaller circle.
Finish off the spoon by creating its bowl using
a 16 x 16 px circle (#CE9D78), which we will
adjust by selecting and pushing its lower anchor point to the bottom by a
distance of 6 px (right click > Transform > Move > Vertical > 6 px). Give the resulting shape a 4
px thick outline (#2B3249), grouping (Control-G)
and then positioning the two shapes onto the previous section. Once you’re
done, select and group (Control-G)
all of the spoon’s composing shapes together, before moving on to the next one.
Start working on the icon’s second spoon by
creating an 8 x 20 px rectangle (#A8755A)
which we will adjust by setting the Radius
of its top corners to 4 px from
within the Transform panel’s Rectangle Properties. Give the
resulting shape a 4 px thick outline
(#2B3249) followed by three 2 x 2 px circles (#2B3249) vertically stacked at 2 px from one another, grouping (Control-G) and then positioning the
shapes onto the right side of the first spoon, at a distance of 24 px.
Add the circular section using a 12 x 12 px circle (#A8755A) with a 4 px outline (#2B3249) on top of which we will add a smaller 4 x 4 px circle (#2B3249), grouping (Control-G) and then positioning the shapes below the previously
created section, so they end up slightly overlapping them.
Create a 12 x 16 px rectangle
(#CE9D78) which we will turn into a diamond by adding a new anchor point to the
center of each of its edges using the Add
Anchor Point Tool (+), removing the corner ones afterwards using the Delete Anchor Point Tool (-). Give the
resulting shape a 4 px thick outline
(#2B3249), grouping (Control-G) and
then positioning them both at the back of the circular section (right click > Transform > Arrange
> Send to Back).
Create two 8 x 8 px circles
(#899E47) with a 4 px thick outline
(#2B3249), individually grouping (Control-G)
and then positioning them onto each side of the upper section of the diamond.
Start working on the spoon’s main body by creating an 8 x 10 px rectangle (#A8755A), followed
by a larger 12 x 34 px one (#A8755A),
which we will unite and then position below the previous sections.
Adjust the shape by setting the Radius
of its top corners to 4 px, adding a
pair of side anchor points at a distance of 14 px from its bottom edge. Then, individually select and push the
bottom anchor points to the inside by a distance of 4 px (right click >
Transform > Move > Horizontal > + / – 4 px depending on which side
you start with).
Create the body’s lighter section using a 12 x 12 px square (#CE9D78) which we will center align to the
larger shape, positioning it at a distance of 15 px from its top edge.
Give the larger body a 4 px thick
outline (#2B3249), followed by five 12
px wide 2 px thick Stroke lines (#2B3249) vertically
stacked 3 px from one another,
which we will group (Control-G) and
then center align to the section’s lighter rectangle.
Add two pairs of two 2 x 2 px circles
(#2B3249) vertically stacked 2 px from
one another, positioning one on the upper section of the body and the other
one on the bottom. Once you’re done, select and group all of the current
section’s composing shapes together using the Control-G keyboard shortcut.
Add an 8
x 8 px circle (#899E47) with a 4 px thick
outline (#2B3249), which we will group (Control-G) and then position on top of
the previous section, at a distance of 22
px from the active drawing area’s bottom edge.
Finish off the spoon, by adding the bowl using a
16 x 22 px ellipse (#A8755A) with a 4 px thick outline (#2B3249), which we will group (Control-G)
and then position below the smaller circle. Once you’re done, select and group
(Control-G) all of its composing
sections together as well, before moving on to the third and last spoon.
Start working on the third spoon, by creating a 12 x 16 px ellipse (#CE9D78) with a 4 px thick outline (#2B3249) on top of which we will add a 4 x 4 px circle (#2B3249), grouping (Control-G) and then positioning all three shapes at a distance of 20 px from the second spoon’s right
edge.
Create an 8 x 8 px circle (#CE9D78)
with a 4 px thick outline (#2B3249)
which we will group (Control-G) and
then position below the previous section, at a distance of just 3 px.
Create two more 8 x 8 px circles (#D3685E) with a 4 px thick outline (#2B3249), which we
will individually group (Control-G)
and then position onto the sides of the two sections that we have so far.
Create a slightly larger 12 x 12 px circle (#A8755A) with a 4 px thick outline (#2B3249) on top of
which we will add a 4 x 4 px circle
(#2B3249). Group (Control-G) all
three shapes together and then position them below the smaller circular
section.
Start working on the spoon’s flower by creating its petals using four 10 x 10 px squares (#CE9D78), which we will adjust by setting the Radius of two of its corners to 6 px from within the Transform panel’s Rectangle Properties. Give the resulting shapes a 4 px thick outline (#2B3249), and then
position them slightly over the previous section, selecting and grouping (Control-G) all four of them together.
Change the color of the bottom-left and
top-right petals to #A8755A, and then add an 8 x 8 px circle (#D3685E) with a 4 px thick outline (#2B3249) in their
center, grouping all of them together afterwards using the Control-G keyboard shortcut.
Create a copy (Control-C >
Control-F) of the circular section found above the spoon’s flower, and
position it below it, making sure to change the color of its fill shape to #CE9D78.
Create the spoon’s lower body using a 20 x 32 px rectangle (#A8755A), from the bottom of which we will remove
two 14 x 24 px ellipses (highlighted
with red) using Pathfinder’s Minus Front Shape Mode. Once you’re
done, position the resulting shape below the previous section.
Set the Radius of the
resulting shape’s top corners to 10 px (2),
adding a lighter 20 x 12 px rectangle
(#CE9D78) which we will position at a distance of 6 px from its top edge (3). Then, add five 20 px wide 2 px thick Stroke lines (#2B3249) vertically
stacked 3 px from one another,
which we will group (Control-G) and
then center align to the smaller shape’s center (4).
Add a 4 x 4 px circle (#2B3249) to the top of the larger shape (5),
followed by a 4 px thick outline (#2B3249)
(6), selecting and grouping (Control-G)
all the shapes together afterwards.
Finish off the spoon, and with it the icon itself, by adding its little
bowl using a 16 x 22 px rectangle (#CE9D78)
which we will adjust by setting the Radius
of its top corners to 8 px from
within the Transform panel’s Rectangle Properties. Give the resulting
shape a 4 px thick outline (#2B3249),
grouping (Control-G) and then
positioning the two below the previously created section. Once you’re done,
select and group (Control-G) all of
the icon’s composing sections as well.
Great work! I hope that you’ve managed to
follow and understand each and every step, and most importantly learned something
new and useful along the way.
Post pobrano z: Movavi Photo Editor: a new lease of life for your pics
Picture editing becomes a much more enjoyable process if you’ve got a photo editor with advanced tools that is easy to use nonetheless. The latest version of Movavi Photo Editor definitely ticks all the boxes and here are the reasons why.
First of all, now you have more ways to transform your photographs. Second, new animated hints make it easier to figure out how the instruments should be used. And third, its main features just keep on being improved with each update, making the interface even more user-friendly.
The handy sliders will help you tweak manually the following parameters: brightness, contrast, saturation, hue, tint, temperature, gamma, exposure, highlights, shadows, blur, and sharpness.
The ‘Magic Enhance’ button will modify your image just in one click finding the optimal combination of brightness and contrast.
This tab is a real gift for those who like taking portrait shots. There are a lot of instruments that you can use to fix most of the possible imperfections or to completely change your appearance. Basically, these tools can be divided into two big groups: retouch and make-up.
Retouching tools
Make-up kit
Touch up your pictures just a bit or go for a complete makeover. Either way, your selfies will look perfect from now on.
At any point of editing, you can compare the original image with the enhanced one by choosing the ‘Before / After’ option.
Picture editing software won’t be complete without a great collection of effects. Movavi Photo Editor gives you a choice of more than 100 thematically grouped color filters, textures, and effects. Plus, you can ‘like’ the ones you prefer and quickly find them in ‘Favourites’. One more advantage – you can add an unlimited number of effects and adjust the intensity of each layer.
With the help of these two tools, you can easily get rid of everything that spoils the picture – a random person, an odd object or even an unpleasant background.
Another way to make use of background and object removal is to create an impressive photo montage replacing boring surroundings with an unusual backdrop. You can also change the background to a solid color and make a collage pasting more photos. Following the animated tips, you’ll quickly get the hang of the instruments.
There are also a set of basic tools that you can use to transform your shots:
In brief, Movavi Photo Editor’s multifunctionality doesn’t affect its simplicity in any way. Navigation in the program (e.g., zooming) is also optimized for touchscreens and touchpads, so it won’t matter whether you use a PC or a laptop. Try it now and see it for yourself: this photo editor is ready for any of your experiments with pictures!
Post pobrano z: Spectacular sculptures made of glass and concrete by Ben Young
It’s not so common that we feature artists and designers more than once on Designer Daily. Ben Young is one of these artists whose work has been shared here previously, and that’s for a very good reason.
Mixing concrete and glass, the New Zealand artist creates impressive sculptures that take you to the depths of the ocean.
Post pobrano z: Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually
In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar, as they say, to make authoring easier. Take transition, which might look something like:
.element {
transition: border 0.2s ease-in-out;
}We could have written it like this:
.element {
transition-property: border;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}Every „part” of the shorthand value has its own property it maps to. But that’s not true for everything. Take box-shadow:
.element {
box-shadow: 0 0 10px #333;
}That’s not shorthand for other properties. There is no box-shadow-color or box-shadow-offset.
That’s where Custom Properties come to save us!
We could set it up like this:
:root {
--box-shadow-offset-x: 10px;
--box-shadow-offset-y: 2px;
--box-shadow-blur: 5px;
--box-shadow-spread: 0;
--box-shadow-color: #333;
}
.element {
box-shadow:
var(--box-shadow-offset-x)
var(--box-shadow-offset-y)
var(--box-shadow-blur)
var(--box-shadow-spread)
var(--box-shadow-color);
}A bit verbose, perhaps, but gets the job done.
Now that we’ve done that, remember we get some uniquely cool things:
We can change individual values with JavaScript. Like:
document.documentElement.style.setProperty("--box-shadow-color", "green");--box-shadow-color: blue on any selector more specific than the :root, we’ll override that color.Fallbacks are possible too, in case the variable isn’t set at all:
.element {
box-shadow:
var(--box-shadow-offset-x, 0)
var(--box-shadow-offset-y, 0)
var(--box-shadow-blur, 5px)
var(--box-shadow-spread, 0)
var(--box-shadow-color, black);
}How about transforms? They are fun because they take a space-separated list of values, so each of them could be a custom property:
:root {
--transform_1: scale(2);
--transform_2: rotate(10deg);
}
.element{
transform: var(--transform_1) var(--transform_2);
}What about elements that do have individual properties for their shorthand, but also offer comma-separated multiple values? Another great use-case:
:root {
--bgImage: url(basic_map.svg);
--image_1_position: 50px 20px;
--image_2_position: bottom right;
}
.element {
background:
var(--bgImage) no-repeat var(--image_1_position),
var(--bgImage) no-repeat var(--image_2_position);
}Or transitions?
:root {
--transition_1_property: border;
--transition_1_duration: 0.2s;
--transition_1_timing_function: ease;
--transition_2_property: background;
--transition_2_duration: 1s;
--transition_2_timing_function: ease-in-out;
}
.element {
transition:
var(--transition_1_property)
var(--transition_1_duration)
var(--transition_1_timing_function),
var(--transition_2_property)
var(--transition_2_duration)
var(--transition_2_timing_function),
}Dan Wilson recently used this kind of thing with animations to show how it’s possible to pause individual animations!
Here’s browser support:
Green indicates full support at the version listed (and above). Yellow indicates partial support. Red indicates no support. See Caniuse for full browser support details.
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| 49 | 36 | 31 | No | 15 | 9.1 |
| iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
|---|---|---|---|---|---|
| 9.3 | 37 | No | 56 | 57 | 52 |
Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually is a post from CSS-Tricks
Post pobrano z: How to Create a 3D Stuffed Letters Text Effect in Adobe Photoshop
This tutorial will show you how to use Adobe Photoshop’s 3D tools and settings, along with a couple of patterns and stock images, to create a lovely stuffed letters text effect. Let’s get started!
This text effect was inspired by the many Layer Styles available on GraphicRiver.
The following assets were used during the production of this tutorial:
Go to File > Open to open the Free EPS file Vector set of floral seamless pattern 01 file. This will bring up the Rasterize EPS Format box, where we’ll change the Mode to RGB Color, and uncheck the Anti-aliased box.
Unchecking the Anti-aliased box will give us crisp results, so that we can easily select the patterns without having to deal with blurry edges.
Once the file opens, zoom in a bit to the top left corner, and you can see that the first pattern has some transparent parts, which will create discontinuity issues if used as it is.
So the next couple of steps will be only to fix this pattern’s issue. For the other patterns, you’ll just need to select and save them as images.
Pick the Rectangular Marquee Tool, and create a selection around the first pattern’s image. The selection doesn’t have to be precise as we’ll fix it in the next step.
Right-click the selection and choose Transform Selection. Zoom in to each edge and drag the selection on top of it, so that you have an exact selection of the pattern image.
Once you’re done, hit the Return key to accept the changes, and go to Edit > Copy.
Create a new file with the Clipboard dimensions, and go to Edit > Paste.
Pick the Move Tool, press-hold the Shift key, and drag the pasted image down to the center of the document.
Duplicate the pattern image’s layer, and drag the copy upwards to the center of the document, so that its bottom edge touches the original image’s top edge.
Use the Rectangular Marquee Tool to create a selection over the empty areas, and use the Paint Bucket Tool to fill it with the pink color around it.
Select both layers and press Command-E to merge them.
Go to File > Save, and save the pattern as an image (jpg) file. It’s better to give each pattern a number to make it easier to use them later on.
For the rest of the patterns, just select, copy and paste, and save them as images.
Create a new 1000 x 626px document with a White Background.
Then, create the text in All Caps using the font HWT Artz. Set the Size to 350 pt and the Tracking to 50.
Rename the text layer to Text, right-click it, and choose Convert to Shape.
Duplicate the Text layer, and rename the copy to Back Piping.
Pick the Direct Selection Tool (A). In the Options bar, change the Fill to None, the Stroke Color to #e9e7e2, and its Size to 5.
Click the Set shape stroke type icon to change the Align to Outside.
Duplicate the Back Piping layer twice. Rename the first copy to Sides, and the second to Front Piping. Then, change the Sides’ Stroke Size to 2.5.
Pick the Rectangle Tool, click anywhere in the document, and type in 5 for the Width and 600 for the Height.
Pick the Add Anchor Point Tool, and click somewhere near the middle of each of the rectangle’s vertical sides, to add two anchor points.
Rename the shape layer to Back as we will use it for the back shadows.
Click-drag to select both anchor points, and use the Right Arrow key to nudge them a little bit to the right.
For each shape layer you have, select it, and go to 3D > New 3D Extrusion from Selected Path.
Select all 3D layers you have, and then go to 3D > Merge 3D Layers.
To access the 3D mesh settings and properties, you’ll need to open two panels: the 3D panel and the Properties panel (both found under the Window menu).
The 3D panel has all the components of the 3D scene, and when you click the name of any of those, you’ll be able to access its settings in the Properties panel. So make sure to always select the tab of the element you want to modify in the 3D panel before you change its settings in the Properties panel.
If you select the Move Tool, you’ll find a set of 3D Modes for it to the right of the Options bar.
When you choose one of those, you can then click and drag to perform changes (on the selected element in the 3D panel).
Use those modes to change the Current View into an angle you like.
Select the Text and Sides mesh tabs in the 3D panel, and change their Extrusion Depth in the Properties panel to 30.
Select the Back Piping and Front Piping mesh tabs, and change their Extrusion Depth to 3.
Select the Text mesh tab, and click the Cap icon at the top of the Properties panel.
Change the Sides to Front and Back, the Bevel Width to 1, the Contour to Half Round, the Inflate Angle to 90, and the Strength to 7.
Select the Back Piping and Front Piping mesh tabs, and click the Cap icon again.
Change the Sides to Front and Back, the Bevel Width to 15, the Contour to Half Round, and the Inflate Strength to 10.
Pick the Move Tool, and use the 3D Axis to move the Back Piping mesh to the back of the text.
The arrows at the ends of the axis move the mesh, the part below them is used for rotation, and the cubes are used for scaling. The cube in the center is used to scale the object uniformly. All you need to do is click and drag the part you want.
You can change the Current View to better see what you’re doing, by choosing a preset from the View menu in the Properties panel.
Select all the Text Mesh Material tabs.
In the Properties panel, change the Specular Color to (24, 15, 7), and the Shine to 100%.
Select the Text mesh tab, and go to 3D > Split Extrusion. This will separate the letters.
Select and split all the other meshes you have, except for the Back mesh.
Select the first Text Front Inflation Material tab, click its Diffuse texture icon, choose Replace Texture, and open the first pattern image you want to use from the ones you saved at the beginning of this tutorial.
Click the Diffuse texture icon again, and choose Edit UV Properties.
Adjust the Tile and Offset values to get a result you like.
Click the Bump folder icon and choose New Texture.
Set the Width and Height values to 512, and the Resolution to 300.
This will open the new texture file. If it does not, click the Bump texture icon and choose Edit Texture.
When the file opens, duplicate the Background layer.
Double-click the copy layer to apply a Pattern Overlay effect with these settings:
Save and close the file to go back to the 3D Scene.
Edit the Bump texture’s UV Properties, and zoom in to better see the effect.
Change the Bump value to 5, or any other value you like.
With the Front Inflation Material tab still active, click the Material Picker box, click the pop-up menu icon, and choose New Material.
Type in a name for the material, and then click OK.
Select the rest of the first Text Material tabs except for the Extrusion. Then, open the Material Picker, scroll down to the material icon you’ve just saved, and click it to apply it to the selected materials.
Apply the saved material to the second Text Front Inflation, Front Bevel, Back Bevel, and Back Inflation Materials.
Select the second Text Front Inflation Material tab, click its Diffuse texture icon, and choose Replace Texture to open another pattern image.
Select the second Text Front Bevel, Back Bevel, and Back Inflation Material tabs, click the Diffuse texture icon, and choose the name of the pattern used from the list you get, instead of replacing it separately for each material.
You might need to change the UV Properties for the new texture, so just keep that in mind after adding each new one.
Repeat the same steps for the rest of the letters you have.
Select the Front Inflation Material tab of the first Front Piping mesh, click the Diffuse texture icon, and choose Remove Texture.
Change the Diffuse Color to (233, 231, 226).
Click the Bump folder icon, and choose the Text Front Inflation Material – Bump texture from the list.
Zoom in to edit the UV Properties, and change the Bump value to 2.
Save the material and apply it to the rest of the Piping Materials.
In order to tile the Extrusion Material, you need to select all the Piping mesh tabs, and set the Texture Mapping to Tile.
Go back to any of the Piping Extrusion Material tabs, edit its UV Properties, save the material, and apply it to the rest of the Piping Extrusion Materials you have.
Select the Text, Front Piping, Sides, and Back Piping mesh tabs of the first letter.
Use the 3D Axis or the Coordinates values in the Properties panel to rotate and move the letter.
Repeat that for the other letter meshes you have. You can always go back to any letter and adjust it.
Select the first letter’s mesh tabs again, click the 3D panel menu icon, and choose Move Object to Ground Plane.
Repeat that for the rest of the letters.
Select all the mesh group tabs, and nudge them just a little bit downwards along the Y Axis. This will help create the illusion of the letters’ weight on the sofa, by pushing them into the ground plane.
Go to File > Place Linked, and open the Empty clean white room with branches decor 3D rendering image.
Resize it as needed, and rename its layer to Background Image.
Place the Plant (Epipremnum pinnatum) image on top of the Background Image layer, and rename its layer to Plant.
Hide the 3D layer to focus on the background elements if you like.
Resize, rotate, and move the plant image to place it over the vase’s sticks in the Background Image. You can stamp-clone the sticks, but we are going to blur the background anyway, so you can skip that.
Select the Background Image layer, go to Filter > Blur > Gaussian Blur, and set the Radius to 5.
Repeat that to blur the Plant image.
Open the White sofa isolated on white image, pick the Quick Selection Tool, and you can check the Auto-Enhance box in the Options bar if you like. It might slow down the process a bit, but can create cleaner selections.
Click-drag slightly to select the sofa.
You can press-hold the Option key, and click-drag to deselect any unwanted areas. Just make sure to drag slightly over small areas to get the best result.
Once the sofa is selected, click the Select and Mask button in the Options bar.
Change the View to On Black, and increase the Opacity to 100%.
Play around with the Smooth and Shift Edge values under the Global Refinements tab to get the best selection.
Click OK when you’re done, and go to Edit > Copy.
Go back to the 3D document, go to Edit > Paste, and rename the layer to Sofa.
Right-click the Sofa layer, choose Convert to Smart Object, and resize the sofa to fit within the scene.
Make the 3D layer visible, and adjust the Camera View to place the letters on top of the sofa.
Select the Infinite Light 1 tab, and change the Intensity to 45% and the Shadow Softness to 30%.
Use the Move Tool or the Coordinates values to move the light to the window in the background image.
Click the Add new Light to Scene icon at the bottom of the 3D panel, and choose New Infinite Light.
Change the Infinite Light 2’s Intensity to 30%, and uncheck the Shadow box.
Move the light so that it illuminates the upper part of the text.
Click the Environment tab, click the IBL texture icon to choose Replace Texture, and open the Bedroom image.
Change the Intensity to 90%, and move the light around to get a lighting you like.
Show the Back mesh, rotate it -90° around the Y Axis, and scale it until it fills the sofa’s back.
Move and rotate the Back mesh until it touches all the letters.
Make sure to set the Current View to the final angle you want to render.
Select the Back mesh tab, uncheck its Cast Shadows box, and check the Invisible box. This will help create a surface that catches the shadows without being visible in the scene.
Once you’re done modifying the 3D scene, go to 3D > Render to render it. The rendering might take a while, but you can stop it any time by pressing the Esc key.
You can also stop the rendering to adjust the lighting, the meshes, or anything else you think needs tweaking, and render again, until you get a result you like.
When you’re done rendering, convert the 3D layer into a smart object to avoid making any accidental changes.
Right-click the 3D layer, and choose Create Clipping Mask. This will clip the Back mesh shadows to the sofa.
Click the Add layer mask icon at the bottom of the Layers panel.
Set the Foreground Color to Black, pick the Brush Tool, choose a soft round tip, and paint over any unwanted areas to hide them.
Create a new layer below the 3D layer, call it Back Shadow, and change its Blend Mode to Linear Burn.
Set the Foreground Color to #848285, and start painting shadows where the letters touch the sofa’s back to intensify the effect.
Change the Back Shadow layer’s Opacity to a value you like, and use the Eraser Tool to get rid of any unwanted parts of the shadow.
Create a new layer under the Back Shadow layer, call it Drop Shadow, and change its Blend Mode to Linear Burn.
Add shadows where the letters touch the sofa. Then, press Command-T to enter the Free Transform Mode, scale them down vertically, and place them right below the letters.
Hit the Return key to accept the changes, and repeat if necessary.
Place the Bokeh – Golden Lights 5184 x 3456 Pixels image on top of the Plant layer, and rename its layer to Bokeh.
Change the Bokeh layer’s Blend Mode to Screen, and resize it as needed to fit within the scene.
Go to Filter > Blur > Gaussian Blur, and set the Radius to 3.
Click the Create new fill or adjustment layer icon at the bottom of the Layers panel, and choose Gradient Map.
Create the gradient fill using the colors #44386e to the left, #716d7c in the middle, and #d4a987 to the right.
Check the Dither box, and change the layer’s Blend Mode to Soft Light, and its Opacity to 35%.
Select the Plant layer, and go to Image > Adjustments > Vibrance.
Change the Vibrance to -35 and the Saturation to -10.
If the sofa looks very sharp, apply a Gaussian Blur with a Radius value around 0.25.
In this tutorial, we saved pattern images, created a bunch of shape layers, converted them to 3D meshes, and created their materials.
Then, we started adding background elements and adjusting the 3D scene’s lighting and camera view accordingly, to render the final result.
Finally, we added some more shadows and adjusted the coloring of the final result.
Please feel free to leave your comments, suggestions, and outcomes below.
Post pobrano z: PWA Directory
The other day I was watching an interview with Ade Oshineye where he discussed his work on the PWA Directory at Google, a showcase of progressive web apps. And it’s pretty neat!
It lists a whole bunch of PWAs out there and you can filter them by Lighthouse metrics – that’s the auditing tool from Google that scores a web app and gives us developers the ability to improve them.
Direct Link to Article — Permalink
PWA Directory is a post from CSS-Tricks
