Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
Basically I am given an image
and I need to create a framed mirror
I also need to be able to adjust the width of the moulding individual of the mirror because the width of the moulding needs to stay constant as the mirror is various sizes. Is there a way to maybe script this?
If it's not for print, you might be able to use this Image Framer jquery plugin that I've made. It basically stretches frames around practically any size image. The website (that had been down forever) is back online. The demo page does do a pretty good job at showing you everything, but there are some examples in the repo directory too. The examples don't showcase all the options, like different sizes.
It comes with frame presets, but I also made this psd template + script combo to go with it, in case people want to make their own frames... That said, the template only produces miter joints.
The corners don't necessarily need to use miter joints, but some css edits might be needed if the corner images need to be bigger to fit in some sort of corner ornament. The plugin is actually 90% html and css. Javascript just makes it easy to attach it to multiple elements.
It is also possible to do something similar purely in Photoshop if you want to generate images with frames attached to the image itself.
I made this PS action for someone as an example. The Action/workflow could be modified to fit other cases quite easily. This also It also makes miter joints and requires the source frame edge to be at least as long as the longest side of the photo.
The action works like this (more or less): You prepare nice long frame image, perhaps by using clone stamp tool if needed and then automate the process where you place, rotate, cut(the 45° angle) and duplicate the frame + repeat the process on all sides. Pretty basic as far as Actions go...
All the major steps:
The white shape in the gif with the 45° angle is a triangle shape layer that is used as the cutter. It's a psd file that is placed in the photo document on demand.
There are 3 steps in the Action with paths that need to be changed: Open = Frame file path, Place = Frame cutter path and Export = Output path for images.
Then you run it in batch with File > Automate > Path.
In the Batch window:
Framing ActionFraming ActionFolder (This should be your input folder path)None (Export step handles saving the files to a specific folder)The case isn't trivial not even if one could in the fly program an image generator which cuts the needed pieces and places them properly.
One short piece of frame material isn't enough. It's full of small detail and stretching or repeating that piece doesn't look right except in low resolution which hides the surface details. A partial solution is to have the material image separately for zooming and the frame is only an overview.
It really is only a partial solution, because the light should affect differently in top, bottom left and right. Left and right edge probably can be equal, but top and bottom cannot. Photoshop's Bevel & Emboss alone is a poor way to create lights and shadows because it doesn't know real 3D profile.
The mirror inside the frame is difficult, because it must have some content if it's a mirror. Activating watcher's web camera would be ideal, but probably impossible because it's either prevented or makes the computer owner angry. Fixed image can obviously be only a grey - white gradient, anything else transforms the mirror to a painting or framed photo.
This is an example of a composition in Photoshop. The mirrored image must be considered to be shot here, not there.
There's hefty contrast boost to give some visible texture to your material image. Bevel&Emboss is used to create light differences.
The streching is made mirrored to reduce the needed scaling 50%. That doesn't prevent a teared part to look out as painted. Stretched fine texture is totally artificial looking when zoomed in.
I see the only good solution is to avoid stretching. If one has geometrically correct high resolution images of big frames, he could relatively easily cut them smaller (no scaling, only cut the pieces shorter) That would also solve the light problem.
I tried also to build a frame in Illustrator. A programmer probably would like the possiblity to manage exactly dimensions and angles without checking what the photos happen to be.
I extruded a random profile and made top and bottom pieces with opposite light directions. Vertical pieces have equal light, the left one is the right one as flipped. In the left there's the used profile in bigger size and some random pieces which were made to hide overlapping corners.
This is geometrically exact, but it has not a slightest hint of wood. As well it could be metallic, plastic or a drawing, so fully artificial synthesis in Illustrator isn't a solution, if you want photorealistic result. But it can show the cut profile very well. Here's an extrusion of a profile, which is as complex as yours and approximately as dark.
You have good control over the visibility of the form and the result is copyable to Photoshop in as high resolution as needed
Full photorealistically rendered 3D modelling would be a solution. You could have a rotatable piece in your hands made of selected material with selected surface treatments. I'm afraid the creation of it costs well beyond the budget. I have seen custom shoe maker's ads with it.
What to do: 60 different frames made manually isn't especially much when compared to the effort learn to program at first. You can reduce the work by cutting bigger frame to smaller sizes. If possible, get long enough material images taken in different lights. You actually need 3 per material type.
Negotiate with the customer, how fine resolution images are actually needed. Taking good full-length material photos needs pro equipment and photographying skills. If you have only overall images of the mirrors and differently material photos, you can use even Illustrator's extrusions.
Check, if adjustment layers or inserting a texture layer can make usable surface and treatment versions. A complex example:
This is the Illustrator extrusion pasted into Photoshop. The texture is a BW photo of wood. It has blending mode Hard light and very low opacity. There's light adjustment and coloring adjustment layers.
