: 3d Lines effect in Illustrator/photoshop? does anyone have an idea how these pieces were created? The designers seem to use illustrator in their other work, certainly no 3d software?

@Tiffany317

Based on her public-facing work, I'd say three main things:

1) There's no guarantee there wasn't 3D modeling used: she clearly does have that skillset and tools.

2) Nonetheless, it's REALLY not likely: she tends towards hugely complex, very carefully crafted pattern and dimension creation in a sheerly-vector manner, and is obviously immensely skilled at hand illustration too. My bet is this was all done manually.

3) That said, I don't think a trip into either photoshop or a separate 3D DCC is necessary for lower-complexity forms: Illustrator has decent revolve & extrude tools for simple shapes. You could create a vector pattern symbol of the colour lines, revolve a bottle-shaped profile, and Map Art onto that 3D form, then explode the result and do point-specific tweaks to get it dialed in, and that would all stay in illustrator's vector tools - no need to trace pixels at all.

I've tested now - this approach works well, but fair warning: Illustrator's "3D effect" tools are slow and processor-heavy.

See attached.

Vote Up Vote Down

@Turnbaugh909

Here's an unrefined method utilizing Photoshop's Displace Filter I'd pursue....



The key to all this is knowing which artwork will work best, or creating your own original image to distort. In addition to knowing good settings for line frequency and displacement. Like all art styles, it would take practice and experience to be really proficient at it. And I commend the artist creating your samples. Clearly a lot of (experienced) work there. This answer is merely a starting point to start practicing from. It's not going to be a simple step process to get you crisp, clean images like your samples.



Start with a basic black and white line art image you want to use in Photoshop...



Then add some Gaussian blur to it to make the edges less defined, and reverse the colors - White will be raised, black will be sunk. The amount of blur will determine how drastic the drop off is between the flat lines and the raised lines.



Save that file as a single layered, flat, greyscale, .psd file. You'll need it in a moment.

Now create another Photoshop document the same dimensions as the art image, with a series of lines... I made mine with Illustrator and then copy/pasted into Photoshop as a smart object layer. In the end, you need a single layer of the lines. You can use a raster layer, a vector layer, a smart object - but it needs to be 1 layer only.



Now, with the lines layer selected, choose Filter > Distort > Displace.

Make certain Tile is checked in the Displacement Map options.



Click OK and find the line art file you saved a moment ago and select it.

The lines layer will be distorted to mimic the shape...



By adjust the amount of blur in the artwork image, you can alter the drop off of the distortion, here's less blur....





This sounds like it takes far longer than it actually does. Most of the time would be in experimenting with proper blur amounts and line frequencies to accommodate the displacement.

If the end goal is crisp, clean, precision... From here, I'd take the image into Illustrator and manually mimic the distortions of the lines, using the image as a guide. You could also try Live Trace in Illustrator, although I don't think I would personally rely on that.

Vote Up Vote Down

@Margaret771

A masterpiece of manual crafting is already suggested by other users. I believe it. No automatic software can combine the multiple functions of the strokes, namely showing the geometric surface form, creating some outlines (rabbit's face features) and creating the shading.

There are those horizontal strokes and the wanted shape as line art for a start. One can add anchor points and make the needed bends by moving the anchors along the line art paths. The path width tool can be used to control the line widths. Some extra strokes can be needed and something must be cutted out of the way.

The line art is finally hidden or deleted.

Here are some path manipulation examples:




a straight line is added over the quide drawing
anchor points are added in the circles
the anchor points and their handles are moved with the direct selection tool. Note a sharp anchor point on the quide stroke
widths are manipulated with the stroke width tool
more anchor points and width changes are added


In principle this is easy. Creating something nice using these isn't.

The bottle problem is tried in 3D. I have only some simple low cost and free pieces of 3D software. They are radically simplified from premium priced full versions. For example curve lofting and all surface form adjustments are disabled in the version I used. The well formed bottle would benefit lofting (=sweep through different cross-section profiles) or tools to chisel the grooves to the surface. Revolution gives only a simple, perfectly round bottle and that's what I got. As a plus I see the fact that there's no reason to fear lawsuits.

The used program is DesignSpark Mechanical, a free version of SpaceClaim.

See some construction screenshots:




The revolution profile; drawing it was quite same as drawing with the pen in Illustrator
Some preparing lines to create the planes that slice the revolved bottle
The bottle after revolving the profile


4A and 4B. The planar surfaces for slicing the bottle


A sliced half-bottle. Slicing creates lines to the wireframe
Planar rectagular surfaces were drawn (=one is drawn, the rest are copied) to continue the slices in a plane.


The projection can be anything, but I took the default. The view could be spinned freely.

Version 6 was printed as wireframe PDF and taken to Illustrator as 2D. My 3D software has poor control for color and light, so I choosed to color the stuff in Illustrator.




The wireframe PDF opened, hidden lines were turned off before making the PDF
The areas are colored
All strokes removed


The coloring was tricky because all areas were not perfectly closed. I joined some lines and got the job done.

ADD: Free 3D model of the Coke bottle is available here: www.turbosquid.com/3d-models/free-coca-cola-bottle-3d-model/811078

It at least seems to be pro quality in the companion photo. Its usage is limited. By purchasing a paid license one can get a right to use it more freely and without any watermarks.

Free 3D models of the Coke bottle can also be found in SketchUP's 3D Warehouse. Those few I tried were low quality attempts, not much better than my elementary version.

Vote Up Vote Down