Is there a program that will show you guides, rulers so you can match your html layout in css to your Photoshop comp. What is best practices.
Right now I'm doing screen shots and using rectangle tool to get my measurements from the screen shot and see if they match the comp but this is taking so much time. I'm thinking there must be a program or something that can show rulers or measurements or even comp overlays with measurements to fine tune your css pixel measurements to.
Try the Pixel Perfect extension: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/
Pixel Perfect is a Firefox/Firebug extension that allows web
developers and designers to easily overlay a web composition over top
of the developed HTML.
I find the FireFox MeasureIt tool handy for things like this:
https://addons.mozilla.org/en-US/firefox/addon/measureit/
https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/ as it was said before. And btw, you can measure distances in photoshop as well: sometimes you just need a value, not messing around with pixel perfect. Use rulers and the Ruler Tool (Shift+I until you get it) in PS. I combine measurements in PS and PixelPerfect addon in my work.
Related
My site is a clothing store, and my partner has complained about the following issue.
The pictures of clothing with more complex patterns (checkerboard for example) displays like this: instead of this:
I assume the other pictures are also displaying weirdly, but it's just less noticeable. As far as I can tell, it happens most often on Macs.
If anyone has any information about this phenomenon it would be much appreciated.
It's called a Moire Pattern: http://en.wikipedia.org/wiki/Moir%C3%A9_pattern
The best solution is to not resize images, to ensure they're displayed at 1:1 scaling. If not, make differently-sized images using a tool like Photoshop that has better image-resize algorithms that avoid this problem and then use HTML5's srcset attribute so the right image is loaded for the right DPI, see here: http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
This is called the Moiré effect. From a Wikipedia article:
In physics, mathematics, and art, a moiré pattern (/mwɑrˈeɪ/; French:
[mwaˈʁe]) is a secondary and visually evident superimposed pattern
created, for example, when two identical (usually transparent)
patterns on a flat or curved surface (such as closely spaced straight
lines drawn radiating from a point or taking the form of a grid) are
overlaid while displaced or rotated a small amount from one another.
In context of images the overlaying comes from anti-aliased (in case of upsampling) or averaged pixels (for downsampling).
To resize them properly use high-quality resizing such as bi-cubic interpolation based resampling. Most browser has built-in support for this but certain conditions are affecting which stratgey is selected (bi-cubic or bi-linear), for example for performance reason. The latter is more prone to this effect.
It can be reduced using a canvas to scale down the image. I have an article here on this topic and an SO answer here showing a concrete example on how to.
I recently took up web programming, and this issue plagues my site. I set all the font sizes using px values in css and aligned everything using divs, absolute positioning, and more px values. It looks fine until I try zooming in and out, at which point the text size and page size decrease at different rates, resulting in comparitively huge text when zoomed all the way out. This also renders viewing the site on a mobile device completely impossible. I've read that font sizes should be specified with ems not pxs, but that didn't fix it.
What is going on?
It's an easy problem to get into, particularly for a beginner. Consider moving divs to percentage values etc. In terms of mobile viewing and standard desktop browsing, I would suggest you try using a grid system.
One popular example which is very easy to use & I think is great for beginners is 960.gs
I'm afraid without code snippets and your question being very generalised, its unlikely we can help.
There are also ready to go grid systems that shift the page around depending on screen size but I wouldn't recommend them until you are comfortable using 960.gs
I would also try http://twitter.github.io/bootstrap/, it makes it very easy to create a nice looking site. As redditor mentions, using pixels can result in weird behaviors when zooming especially for positioning elements. I would try to use something like bootstrap or 960, or one of the other grid systems.
When I put my Flash game into full screen interactive display mode and set stage.fullScreenSourceRect so that it uses hardware scaling, the performance at any resolution seems to be much better than if I do it without the fullScreenSourceRect. I'd really like to use this feature, but the problem is that it seems to be using a 4x blur or some similar algorithm for scaling that leaves everything looking very blurry.
It seems like an odd choice to have a blur as the only available scale mode. I would be much happier with a simple nearest-neighbor. I can't find anything about changing the scale algorithm in the documentation. Is there any way to do this while still using hardware acceleration?
What is the intended platform for this game? If this is mobile, then there are standards that can be implemented to ensure the ideal resolutions. If this is for web then, I would recommend defining rigid dimensions. Otherwise in my experience, its best to develop to your display's ideal native resolutions. Unless you have your code dynamically drawing objects to your stage, the there will always be some kind of rastering/interpolation. You can also get your screens resolutions and have the code make adjustments accordingly: How do I get the user's screen resolution in ActionScript 3?
I've developed a lot of touch screen applications that span multiple displays with different resolutions and AIR has some great options in it's 'Screen' class to make the process easier.
As a front-end developer, I've been given a mock-up design to implement. This design features several tachograph-style icons, which have me stumped as to the best way to mark them up in HTML and CSS.
The images look like the following:
Obviously these assets represent the empty state and the full state respectively.
My issue is this: how can I mark-up these images so that I can show varying levels of completion, i.e. 10% full, 60% full etc?
Waiting in anticipation to hear your answers.
I would seriously recommend looking into the Raphael javascript library. You can knock something like this up in just a few lines of code.
See also this question: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) where I gave an answer including a four-line code sample using Raphael, which provides an animated fuel gauge. You'll need to tweak it for your design, but even then it's only going to be a few lines of code.
The great thing about using Raphael to draw things like this is that it is fully compatible with older browsers, even IE (as far back as IE6 if you need it), without you having to do any special code to support it. It's a great little library.
Hope that helps.
Given that the image reprisents actual data and isn't purely a design mechanism, I'd mark the image up as an HTML image.
<img ... alt="10%">
If your concern is about showing portions of the image, one way you could do this would be to set the image as a background to some container and use width and height to identify the amount of the image to show.
i'm not an expert on html5 /css3, but would you not use the html5 arc command to create a mask to reveal the full state.
As you have a 270 degree rotation from empty to full, you'd just map the value as percentage of 270 to create the value of the arc that would mask the appropriate value.
I believe that there is a java script Math.PI that might help to.
I know you can fake full screen by expanding a window and eliminating the title bar , status bar , and other stuff, I'm not interested in this, I want to know about "real" full screen mode (I don't know how to call it else) , like in games.
what exactly is full screen mode?
what win-api should I use to achieve this?
can this be used to play movies in full screen ? I know windows media player uses a fake full screen because I can "cut" thru it and see the desktop (using regions win-api).
can I "cut" thru "real" full screen like I thru a window (using regions win-api) ore is this directly writing to video memory and there is nothing "under" it?
Thanks!
If you want to make games on Windows in full-screen, the best option is XNA. This uses DirectX underneath, but hides a lot of the implementation details and plumbing to make it easy for the developer to start working on his game.
XNA is freely downloadable, and has good documentation.
XNA Game Studio 4.0 can be downloaded here.
...and you might want to support the "fake" fullscreen mode in addition to "real" fullscreen - it's very nice for those of us that run multi-monitor systems.
If you don't want to use DirectX, create window and call ChangeDisplaySettings with CDS_FULLSCREEN flag. OpenGL applications use this way to go fullscreen.
As far as a user is concerned, full screen is just when a window takes up the entire screen such that they no longer see any window borders or other desktop stuff.
As you know, not all full screens are created equal.
'proper' full screen is where the program takes control of the screen. When a game uses this mode, it can change the resolution of you screen. If you have ever played an old game and existed to see your icons all messed up, this is; for the duration of playing the game, your desktop was at a lower resolution.
with 'borderless full screen' the program window is striped of any borders, the title bar and frame etc., and is just a rectangle of pure rendering. If you then set this rendering context to be the same size as your desktop, you get the effect of full screen.
Doing border-less is usually the more user friendly way these days, as it is easier to 'tab out' as the other programs are still graphically around. 'proper' full screen gives you full control of the hardware, so in theory you have more power for your program, but it means you have to wait for things to reinitialise when you tab out.
what you do with your rendering context is up to you, so yes, you can use it play videos. It would not matter if you are in 'proper' full screen or not, the rendering code would be the same.
As for cutting through proper full screen windows, I am not sure, but I think there would be nothing else to see, there is only your program.
as for what win-api, there is only one windows api, but I think you mean, what windowing library; as this is getting to be a long answer already, I shall just say it depends a lot on what you want from it.
Please feel free to leave comments if you need me to clarify or expand on any points.