11/14/13
In this article we continue our exploration of Adobe Edge Reflow. One thing to consider is how many devices you want to use. If it’s for all three types, namely desktop, tablet and mobile, a strategy put forth by Adobe is to create a mobile-first layout, then build for the tablet and desktop. If you work with the lowest common denominator, it’s easy to scale upwards. Unfortunately, it’s not as simple to go the other way.
Here’s an example of what that would look like. In the layout above, there’s a box on a background which I’ve filled with color to make it easier to see. The box is set to 400x80pixels.
To make sure that the box stays centered on the layout, go to the Advanced section and click on the Center icon (Margin: auto; float: none). This will ensure that the box (which could be a logo) will stay centered in the layout.
Here’s what the layout looks like at 650 pixels wide. Even if you reduce the layout to smaller than 400 pixels wide, the box will retain the same dimensions and begin to move off the page to the right.
In addition to the box, you have access to several styles, including Borders with control over the color overall or color by side, width, radius, shadow and styles of border including Solid, Dashed, Dotted, Double, Groove, Inset, Outset, Ridge and None. We’ll look at those and images in the next section.
Images and Styling
In this section we’re going to add some images to a layout and style them a bit.
We’ll add a background image and some images within the various boxes. The first thing I’ll do is to add a gradient.
To do so, go to the Styling tab and click on the Background. You’ll notice two buttons that have been highlighted. These are Add Image Layer on the left and Add Gradient Layer on the right.
When I click on the Add Gradient Style button, it brings up the color picker where I can set the gradient, in this case, going from transparent to white.
Next, I’ll click on the Add Image Layer icon to add an image. This brings up the dialog box. To add an image, click on the “+” sign in the center.
This brings up the image in the dialog box. You can also see it in the background. In this case the image is too large for our scene, so it has to be scaled and repositioned using the tools in the dialog box.
At this point we have the image in the background, but we don’t have the opacity applied. If you look to the left side of the screen shot, this is because the aircraft layer is positioned above the gradient layer, so we have to move the aircraft layer below the gradient layer.
Here’s the end result.
The next stage is to add an image to one of the boxes in the layout. To do so, click on the box, then the styling tab; then click on Add Image Layer in the Backgrounds section.
Here’s the image in position, after manipulating the scaling and positioning. Now, we’re going to add some styling to the box and create a drop shadow.
To do so, click on the Shadows section and Add a Shadow button. Above are the setting applied to create a soft drop shadow.
Here are the effects of on the image. Now, I’ll add more images and apply the same effect.
Here’s the finished result. As you can see, we’ve done some very basic styling but you can go much further with rounded corners, colored shadows, etc.
Add and Style Text
With text, you can edit individual blocks of text and style them, or style sections of text within the text block.
When working with text, activate the Styling tab, which gives you access to the text controls.
For a block of text as in the screen shot above, a simple change, such as increasing the weight will make the text easier to read…
…but it might not give us the effect we’re looking for.
In this case, we might want to change the color or make use of any of the installed fonts. And if that’s not enough, click on the highlighted Type icon as in the above screen shot, which will give you access to the Edge Web Fonts. We’ll look at how those work below.
At the top of the design area, I’ve entered the text above. As you can see, it’s not very exciting. I’m going to enhance it by use of the Edge Web Fonts.
To do so, I’ll click on the Typeface icon as in the screen shot above.
This takes you into the Edge Web Fonts dialog box. You’ll notice quite a few options appear onscreen. On the far left, there are even more options. Each icon represents font types such as: Sans-Serif, Serif, Slab-Serif, Script, etc.
We’ll use one of these fonts to style the text above. Note that when you find a font you like, click on it to select it, which will place a checkmark at the top-right on the font icon.
When you finish selecting the fonts you want to use, scroll to the bottom of the Edge fonts dialog and click on the check button at the bottom-left.
This copies the fonts to Typeface drop down, ready for use.
Here’s our text which has been styled with a new font, resized and with a bit of color.
We’ve barely scratched the surface of what you can do with web fonts. You could easily spend hours in this area alone, coming up with right look and feel for your layout.
Notes
It’s important to realize that all of these changes are creating CSS, which you can view at any time by going to the bottom of your screen. As an example, I clicked on the box at the lower right. Here’s the CSS:
#box {
float: left;
height: 147px;
width: 225px;
box-shadow: rgb(37, 37, 37) 4px 4px 10px 5px;
background: url(“assets/img/IMG_0234.JPG”) 38% 39.4% / 150% no-repeat;
margin: 49px 0 0 7.55863%;
}
Conclusion
Overall, Adobe Edge Reflow is fun to use, but you should be aware of some limitations. When working with images, there doesn’t appear to be a tool that will allow you to rotate images, so if you need to change the orientation, you’ll need to use Photoshop or some other image editor. Secondly, sizing and repositioning of large images is a bit clumsy. You would be better off to resize them before you begin a project to speed up the workflow.
With text, I found it frustrating to use it properly. There were issues with selecting text and there was a noticeable lag time between selecting text and moving it around. I don’t know if this was the result of my connection (WiFi).
These issues aside, Adobe Edge Reflow is a great program to use and experiment with to create designs.
