Tag Info

New answers tagged

-1

Maybe the same size with 150dpi of resolution, it will be up and ready.


1

I think you are asking about how to design whilst using a retina display, rather than asking how to design for retina displays. You don't need to change anything about the dimensions you choose. If you create a 120px header on your retina display, it will appear as 120px high on a non-retina display - you don't need to change your behaviour because you're ...


0

I see you have the image open in Index colour mode (see your Photoshop file toolbar - fb.png @ 582% (Index)). Index colour mode is a low-colour (256 colour) option that can have unexpected effects on your raster graphics. Saving from this colour profile will no doubt perpetuate any problems you are having in the Photoshop file into the exported graphic. Try ...


1

For images, then yes you would want to version of the same image. One original size and the larger version being twice the size. There are a couple of ways you can get your image to work when zooming in. Javascript way, you will want to save the images like myimage.jpg and myimage@2x.jpg. You will then need to download retina.js from ...


1

You're right - at this moment in time, there is no easy way around retina displays other than to double the resolution of your PSDs and work with 2x as many pixels. It's actually a lot easier than it sounds, and lends itself well to a non-destructive working process (e.g. using Photoshop polygons for standard shapes, vectors for solid icons and compound ...


2

If you are asking: "I just got a retina display and noticed how blurry some web graphics look even when they are saved at the actual size they are used. Should one save images for the web twice the size because there are retina displays out there?" Then this is my answer: You are correct. You should make your images for the web twice the size you ...


1

Your measurements appear incorrect. The Tablet icon looks to be 40 px wide to me, not 47. Therefore the CSS is incorrect. Updated Fiddle: http://jsfiddle.net/j7RM3/1/ And the correct CSS: .report-option:hover { cursor: pointer; } .report-option.selected { font-weight: bold; } .report-option-icon { background: ...


1

In addition to all of the assets (icons, images, etc), I prefer when other designers give me a list of fonts, font sizes, and font weights and the the amount of white space between main elements. Giving white space in pixels is important to help make sure the finished product matches the mockup as closely as possible.


1

I'm assuming you're only doing the design and not the actual implementation? In that case, PSD to HTML generally means that you need to provide the developer with all the assets and details they will need to actually convert your design into HTML. Absolutely yes, it should have the complete, final, polished design of the site, but depending on your client ...


1

I'd imagine unless they specifically ask for a wireframe, they want you to design the finished look of the site. Yes you should include all proposed final assets, as you visually see the final result. You should give them some work in progress updates though. As polishing images can take a lot of work, you don't want to head too far in the wrong direction ...


-4

I know many designer do not like to use tables for layout ... but it's way easier than div or the css layout system. and here are the reasons (layout, not design and colors) 1 - Tables layout are fixed and will not change because a div overlapped another div... extremely solid layout. 2- Why people use tables for data because the table (no matter what ...


1

If you want to use a single image for all mobile devices and displayed at its max resolution, then you will have to use a huge image to accommodate the largest device in the market. I believe it is the iPad with the retina displays which has 2048 x 1536 pixels. Having said that, I don't think this is a very good approach Hard to maintain: The ...


7

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text? This would allow the font to work on basically any image also. div { position:absolute; top:250px; left:140px; width:500px; height:50px; background-color:black; z-index:0; opacity:0.5; } EXAMPLE


2

Give it a black transparent background and some padding background-color: rgba(0,0,0,0.5); padding: 0.5em; Simply play a bit around with those numbers but it should give you an usable result.


8

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters: font-family: Raleway; font-weight:900; text-shadow: 0px 0px 3px #000; You can even combine more than one text-shadow to create a definite outline as well as a blur: text-shadow: 0px 0px 3px #000, ...


5

This to me just looks like some white shapes placed over a blurred background with their opacity reduced at varying levels. The "main" rounded rectangle has a white stroke and hardened drop shadow to give it the illusion of thickness. I've created a similar effect in Photoshop, but the same concept could be applied using CSS. Something like the following ...


3

The blurriness is introduced during scaling. If you are providing two set of images, work on the 2x size and scale down for the second set, tweaking any portions that exhibit problems after scaling (sometimes rules and borders etc become too thin and need to be bumped up {etc etc}). If you are providing one set of images, provide the larger pixels ...



Top 50 recent answers are included