I have a psd file with layers that is a mockup of a web page I need to create. You can view a page scheme here. For each page element (header, menu, main body, footer, etc) there are layers in the psd file. There are also some rounded images with drop-shadow that also constitute layers and they overlap among themselves, as well as the main body text area and the header of the page, as you can see in the page scheme.
My question is, what would be the correct method to export slices for using the exported images in the page markup:
Option 1: Export the rounded images as layer-based slices (after I turn off any other layers below them) and use transperency attributes for the images.
Option 2: Export rectangular user-slices that contain a page part (eg, main body) and the parts of the rounded images that overlap this page part.
For example, in the 1st case, I would export all 3 rounded images as a layer-based .png slice (after I turned off the header and main-body layers), ending up with the 3 images with transparency. Then I would place this image with absolute positioning, so it overlaps the main-body and header.
In the 2nd case, I would slice the whole header part with the part of the img1 that overlaps it, then I would slice the menu, then I would slice the main body part, including the parts of the images that overlap it, then I would cut another slice to the right, containing the rest of the images' parts and so on. If you go to this link and click on the template thumbnail, you could check with Firebug a similar approach to the 2nd option, regarding the floating images on the upper left of the page.
Option 1 is the way to go. With option 2, a design change or repositioning of the circles requires you to re-slice everything again.
Related
I am trying to incorporate the following image into the cover page of my report.
It's currently saved as a PNG file with dimension 1275 x 1650.
Like a lot of online posts suggested, I
* inserted a rectangle
* set the image as the background image
And here are my properties for the rectangle.
When I rendered my report to PDF, the image was splitted
into multiple blank pages and the bottom of the graphic (with logo and URL)
didn't even show.
How can I make sure this graphic is displayed fully on only the first page?
I can't tell if you have other objects on your cover page, but here's what I did to get this working correctly.
Add an image object to your report.
Make sure the margins are set fairly low(I used .25in for top, bottom, left, and right).
With the margins set at .25in, I set the image object to a size of 8in x 10.5in to fill the remaining space on the page.
In the image object properties, set padding options all to zero and Display to "Fit to size".
Now the trick here, is to put the image object in the very top left corner and resize the report to the exact size of the image object -- no whitespace in the design view. For me, this returns a single page report with the entire image shown on a single page.
Hi all,
I am trying to place floorplan image (Using object tag) within the brown border in the tool i created. Then i try to display the same floorplan on the other page. But if you notice the two images i shared, border of the two floorplans within its graphic varies (Black outer border) . CSS is exactly same on both the page. I do not know what could be the reason behind the graphic shift
It has to do with how the image was created. The spacing on the left side is part of the art board while the top side could be the image escaping the container.
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have the following
image as a powerpoint flow chart (text with hyperlinks not shown).
I want to turn this chart into an html-website.
Any ideas how to get a good result for this task?
I think recreating this with coding in html is troublesome.
Thank you.
Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.
Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:
Simple scalable CSS based breadcrumbs (by Veerle Pieters)
Breadcrumb Navigation with CSS Triangles (by Chris Coyer)
They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account)
As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.
Red arrows could be anchor links, probably.
I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.
A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...
Hope this helped...