sılhouettes are vısuals wıth transparent backgrounds
These can be great additions to a lot of graphic design projects, including web sites; bringing variation into what may sometimes be overly straight edged layouts.
That said, there are certain challenges when you want to use them since they will often need supplemental elements to integrate them into a design, especially when they are placed close to texts.
As you can see right here in this section, I have kept a good bit of distance between the text and the lovely steampunk fish on the right. Had I moved in closer by making the first two paragraphs wider I would have ended up with a grouping problem since the irregular shape of the fish will not make alignment or clustering easy. However, there are ways of resolving this, and that is what we will look at here on this page. But before you read further please look at this page >>> since the solutions have much to do with shape usage.
Note: As I was looking for visual material to put in this page I came across some very nice steampunk silhouettes which I put into the slideshow above. And since, in further searches, I found a whole lot more silhouetted visuals related to steampunk, I have decided to stick to the steampunk theme on this page.
steampunktrıvıalıtıes
pngs
PNG is an acronym for Portable Network Graphics which are very high quality compressed bitmap files that support 32 bit transparency and truecolor. In other words PNG files can have transparency values that range from %0 to %100 and support a palette of millions of colors.
.png)
While it used to be quite difficult to find free to use, high quality CC licensed PNG images even only a few years ago, this has changed and these days there are big portals that exclusively carry PNG visual material.
I am using all these steampunk images on this page, but rest assured that what you can find is not limited to things such as Steampunk. Pretty much anything - from food to vehicles and animals, from technology to plants to ornaments and home furnishings, and lots of silhouetted humans, engaged in all sorts of activities, can be found on these portals:
PNG's are made for the screen and not for print media, which is why what you find on these portals will mostly be relatively small in terms of pixel size, although very large sized files can also sometimes be found. What you will usually get, however, will be between 500 and 2000 pixels, which will be quite adequate for web design purposes in most situations.
makıng sılhouettes out of vısuals wıth solıd backgrounds
Although you will find most of what you are looking all ready to go as silhouettes, there may still be specific things that you are looking for that you cannot find as a ready made PNG image. Or, you will see an image with a background that you would really like to use with a transparent background. The things to be careful of in such a case are:
-
The image should have a flat background with no textures that will be easy to separate as one big area from the foreground figure that is to be silhouetted.
-
The image should be clear and sharp, with no fuzzy blending between figure and background.
-
The background color should be different from the colors present in the figure.
-
Example: A red haired person standing in front of a red wall will not give you a good result.
-
Once these conditions are met then there are quite a few background delete applications that can be found online:​
-
-
Excellent result
-
and no size limitation.
-
I am not sure that this is completely free, there may be a download limit.
-
But this is definitely the one to go to, for as long as they let you get away with using it for free.
-
-
-
Very good also.
-
but the free version only saves an image that is 800 pixels wide.
-
-
-
this is pretty good as well,
-
but it resizes your image to 1280 pixels wide.
-
-
-
Not great, except that it lets you take the image to their photo editor for further work if you want.​
-
vectors
A second source for silhouetted visuals are vectors that are computer graphics in which images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The common vector formats that you will encounter are EPS, Adobe Illustrator and SVG files.
The great thing about vector images is that, unlike bitmap images (as PNGs are also) they can be scaled up endlessly while they are still in their vector state. But be aware that once you have scaled them up you will need to convert them to bitmap files, since the internet works with bitmap material (although SVG files can be displayed as well, this is not very common and Wix doesn't allow SVGs anyway).
-
Tip: Keep the original vector file handy so that if you change your mind and want to go larger you always have the option to do that and reupload the scaled up file to Wix.
When it comes to turning them into silhouettes, their foregrounds can very easily be separated from their backgrounds with the online photo editor photopea, as this tutorial video >>> will show you. And it will also show you how to export your files as PNGs.
Until recently it used to be somewhat difficult to find vector visuals other than in the style most commonly associated with them, which are flat color fields often with contours around them. More recently this has changed and we can now find vector images that can come quite close to even photographs. What is also quite commonly found are vector images that emulate a watercolor style. All three that I am showing above are in this watercolor style, and yes, all are vectors that can be scaled up to any size that you want with no loss of quality whatsoever.
usage: text blocks and sılhouettes
1. place sılhouetted materıal on the straıght sıde of a text block
.png)
Steampunk is a subgenre of science fiction that incorporates retrofuturistic technology and aesthetics inspired by 19th-century industrial steam-powered machinery. Steampunk works are often set in an alternative history of the Victorian era or the American "Wild West", where steam power remains in mainstream use, or in a fantasy world that similarly employs steam power.
Steampunk most recognizably features anachronistic technologies or retrofuturistic inventions as people in the 19th century might have envisioned them — distinguishing it from Neo-Victorianism — and is likewise rooted in the era's perspective on fashion, culture, architectural style, and art. Such technologies may include fictional machines like those found in the works of H. G. Wells and Jules Verne. Other examples of steampunk contain alternative-history-style presentations of such technology as steam cannons, lighter-than-air airships, analog computers, or such digital mechanical computers as Charles Babbage's Analytical Engine.
2. Rıght alıgned text
Right aligned texts should not be long since they are quite hard to read. A short quote or a spot will be plenty. Placing a stroke between the silhouette and the text will often help pull things together.
"Personally, I think Victorian fantasies are going to be the next big thing, as long as we can come up with a fitting collective term for Powers, Blaylock and myself. Something based on the appropriate technology of the era; like "steam-punks," perhaps...."
3. placıng a sılhouette on the ragged sıde of a text block
Advice: Do not do this unless you really have to - as was the case with the fish at the top of this page. If you do, then leave plenty of space between the text stack and the image. Which means that they will end up becoming unrelated, will not belong together visually.
Steampunk most recognizably features anachronistic technologies or retrofuturistic inventions as people in the 19th century might have envisioned them — distinguishing it from Neo-Victorianism — and is likewise rooted in the era's perspective on fashion, culture, architectural style, and art. Such technologies may include fictional machines like those found in the works of H. G. Wells and Jules Verne. Other examples of steampunk contain alternative-history-style presentations of such technology as steam cannons, lighter-than-air airships, analog computers, or such digital mechanical computers as Charles Babbage's Analytical Engine.
usage: sılhouette and shape combınations
Silhouettes will benefit from being placed across different background color fields since this will emphasize their silhouette state.
"Personally, I think Victorian fantasies are going to be the next big thing, as long as we can come up with a fitting collective term for Powers, Blaylock and myself. Something based on the appropriate technology of
the era; like "steam-punks," perhaps...."
"Personally, I think Victorian fantasies are going to be the next big thing, as long as we can come up with a fitting collective term for Powers, Blaylock and myself. Something based on the appropriate technology of the
era; like "steam-punks," perhaps...."
Shapes are very good in connecting text and visual. Rollover grouping to see the difference.
.png)
Placing a connecting shape behind silhouettes will help pull them together. Rollover grouping to see the difference.
