Streaming live at 10am (PST)

In theory #hmmmm / trace over a .png of .psd mockUP


#1

Just wondering if anyone else has tried this?

In theory, could I not just bring in a flat .png of my photoshop .psd mock up (not really wireframe, but I could do that also in a low fidelity way)

make a container 960 (unless I wanted to do a larger div.
make the graphic the background image and then just start to drop in containers that would overlay the photo .png and when done, just delete the background image (which would be super long)

I may just try a design sprint later on today and share my findings.

p.s Webflow team / perhaps a new feature in a future build / transparency tracing feature, where we can change the opacity of the canvas (a .png) at any time + change opacity of the HTML / CSS to see how it matches up with the underling mock up .png.


#2

This technique is used to do 3D Models, but i never thought using this on webdesign.


#3

Hi @clickryan, this method should work for the fixed design - desktop - view, but remember you will need to create those elements in responsive way still, using percentage widths for best responsive performance and small fixed dimensions for small elements smile So plan also how your design will break down to lower viewports also smile

And yes, this would be a good thing to put on the Wishlist category smile

Cheers, Dave


#4

Webflow is so flexible that you can this now without much effort or retrofit:

Create a wrapper for your page content:
- create a new section wrapper and place all of your page content elements and sections inside. Name the section class "content".

Create a tracing overlay / backdrop:
- drop a div onto the top of you stage and name the class "tracing".
- load your layout image as a background of the tracing with a the background image aligned top.
- set the div to 100% width and a height to match your layout jpg.
- set the tracing div to absolute (it will scroll aligned with the page, but should not affect the flow of other elements.)
- use z-index 100 to pop the tracing layer on top and adjust opacity to taste. (note that you cannot select any object you add to the page with the tracing on top unless the z-index is higher in the stack...

You can temporarily bump the content section on top by setting its position to relative which enables the z-index but remains in the flow. Set its z-index to 200. It works like a champ and it allows me to float everything on top by just toggling relative and auto for my section wrapper.

Adjust light and dark color or greys into your body temporarily to dim or create contrast with elements you are creating on top.

@clickryan
I just started playing with this when I read your post, but have been thinking about doing the same thing for a week. Looks super promising. I would be really interested to hear about your results. Would be awesome to have a solid technique for this until it is implemented in Webflow.

I was thinking you could even set a toggle on the live page that would allow you to show and hide the designers' original tracing layout layer for internal proofing and critical alignment. May be relatively simple to do with JS if it can't be done through a CSS interaction - off to try that next.

Be absolutely sure you clean up your classes and delete tracing from your final CSS when publishing the live site! That would be a huge loading hit to leave that giant unused background image in the CSS.

Thanks for nudging this to the top of my todo list smile - hope it works!


#5

@clickryan
Update / easy solution for live preview in your prototype:
Create a button with a fixed position (top left) on your site that transitions opacity for the tracing layer from 50% to 0%.
Works perfectly and preserves your ability to toggle relative and auto for the section wrapper for construction and editing without any retrofit.
It is cool to be able to compare the live site to the layout on a prototyped site. I am guessing you could set up something similar for each media query showing and hiding a layout's visibility for each target.

@cyberdave - I think this would be a good starting point for features in an integrated solution. smile

Will try to prep an example later in the week as I build out a small project.


#6

That's great @vlogic, I have flagged this for followup after we get some other key updates done and we have time to analyze this in more detail. Cheers, Dave


#7

Thanks @cyberdave,

The implementation Webflow uses for grid would be perfect if we could load images into something like that. Select through (or lock tracing) is the primary issue.

What I did is a horrible hack and though it does the trick OK when I need it, it is painful to use. The overlay for client review is an almost zero use case, so I wouldn't give that any thought. It is too easy to implement with existing tools for those rare times I need to show an agency that I matched critical alignment.

I also tried setting the layout tracing image to a z-index of -1 which works well to lock it so it cannot be selected. I adjust opacity of my base color (which is on top) to make it ghosted by appending a sub class %. A simple trick that may meet most peoples needs.


#8

Does anyone have any examples of how this looks / feels / works in webflow, and doesn't mind sharing them through an open webflow project.

thanks in advance wink


#9

I will try to put together a simple example as soon as possible of the two approaches Ryan.

The trouble is that I am designing on the fly in Webflow rather than designing in Illustrator and Photoshop. Trying to move my workflow to creating just a style tile / concept storyboard and everything else in Webflow - gotta love that smile


#10

@LvnLife

Here is an example demo of my favorite way to work. It is incredibly easy to set up and fluid to work with. It has become an instinctual behavior for me after just a couple of hours use.

I lifted a screenshot of a page on Square's site for the example layout. Didn't have anything I could publicly post (hope that is OK for example purposes).

Public Link
Published Version

Tracing Layer:
- The layout uses and absolute positioned section div / 100% width / taller than the height of your layout image.
- Load your layout reference as background image / aligned to top / no repeat.
- Lock down the layer by setting its z-index to -1.

Create a Page content section div:
- Set to 100% width / taller than the height of your layout image.
- Fill this content section with your base color. set the color alpha in the color setter ramp to 50-60%.

Done!

Note: I created a cool little feature for this that I love to use. I set a simple > on press state on this page-content layer and ramped up the background color's alpha value to 95%. Then as you are working you can simply click anywhere (even on object / page elements and it will jump opacity up to the higher value. It makes this a super sweet way to work allowing you to click to view your work in isolation. It is especially handy when clicking the toggle to read and match text.

Preview Tip: You can select the page-content layer and slide its opacity down to globally compare your build to the original layout.

This simple layout took a very short time, even with it being a fluid / elastic percentage based layout for each media query with a custom page width.

If you need tracing layers for each media query, load them up and toggle visibility by query. I only had a screencap of the full size, so it is toggled off for the other device views.

Hope it helps! - Robert


#11

I use this method and get the background image selected every time I want to edit a text layer. Is there a way to make it unselectable (like you add a lock to a layer in illustrator) or make the background image hidden (like turning a layer's visibility off in photoshop or illustrator)?
BTW, isn't there a place to edit the text in the properties window (like the Style and Settings)?

Thank you, Lupo


#12

Hi @LupoAsaf, setting the background layer to absolute and setting the z-index to -1 effectively locks the background layer from direct selection in the designer workspace. When an element has a negative zindex it is only selectable using the navigator tab.

You can edit style attributes for any element, but you have to assign a class first.

I would highly recommend watching the tutorial videos they will teach you all of the fundamentals and features Webflow has to offer in a very short period of time. They are very concise and quick and excellent learning resources for html and css as well.


#13