How do I go about designing a background image for a responsive website? - responsive-design

I've been looking around all day for an answer or a guide but I can't seem to find anything. I may be missing a key word here.
I have a single page website that I would like to design a background image for in photoshop. I would like to be able to design this image around the elements on the webpage. This wouldn't be too hard to design for one specific screen size, but the positioning of elements and the width of the screen can change dramatically from device to device. I only have two ideas of how to go about this, neither of which seems like a good method:
Create a background image that ignores elements on the page and doesn't have too much detail on the right/left to get chopped off on mobile devices.
Create a separate background image for each device size and use media queries to load the correct image.
Is there a better way to go about this?
Here is an example screenshot of the kind of background I'm talking about:

Lets address this: "How do I go about designing a background image for a responsive website?"
Obviously, there are more than one correct answers to this question. The simplest solution (IMO) would be to create a high-res image that is abstract and thus won't appear amiss if parts of it are chopped off as screen size becomes smaller. The background image on the site you posted is using this method. The wood paneling results in a design that is irrelevant to screen size.

Related

Unity3D Grid Layout Group [closed]

Hi, guys I need help on grid layout group system.My problem is in resolution.I put some buttons inside the grid layout, it looks good on editor, But when I try on my device, looks bad because of different resolution how can I solve this problem?
In reference screen resolution.
https://i.hizliresim.com/MvR05a.png
*In another resolution.
https://i.hizliresim.com/Q7yaEV.png
Note: I tried content size fitter, etc..
Thanks..
You should be anchoring elements in order to layout controls inside panels, those panels should cover the same number of pixels on the screen with a small or large device.
If a requirement of yours is that the UI should actually scale to UI size, you could consider having multiple sets of image assets, picking which set to use based on the rough size of the device screen.
I'm going off having brief experience in making UIs in unity on mobile devices and, and then googling the Unity Manual website.
Does that make sense?

How would I approach creating a window skin (GDI+, C#)

I'm currently creating a GameEngine in C# using GDI+ and am implementing a "MenuComponent" for a 2D style game, but I've come to a point where now I want to my make my menus look nicer, with images behind each button, instead of just text.
However, the issue is that each menu can have different sized text, which in turn means different sized images need to be created for each menu. To me, this sounds tedious and annoying to do this in a 3rd party program (like photoshop, or paint.net) and I'd much rather create a class which will make sure the images will have the right dimensions, but still maintain the same quality no matter the size of the 'control'.
Clearly, there's a better way to approach my issue, but I just don't know how. Like how does RPG Maker allow their windows and buttons to be any size, whilst maintaining the quality of the images, are they making their images on-the-fly?
Any help would be appreciated!
Thanks
If it helps, by menu I mean something like this title screen:

How to get blurred background on WP8 app

How do we get that awesome blur effect in our apps? I don't think a blurred PNG file is the solution - or is it?
Below is a sample of what I'm talking about. I found it on this page.
Edit: I cannot seem to get SO to upload an image so I will keep trying in the meantime, but you can see the picture I'm referring to via the link above, just scroll down a bit to just above the "prototype" section where it shows pics for the Cocktail app.
I suspect the original app to which you linked used a blurred image (i.e. the image had a blur effect applied to it already). That seems like the least processor-intensive way to get the effect you want.
On the other hand, if your background is customisable and you still want to apply a blur effect, you could use the Nokia Imaging SDK (also on Nuget) to blur any image on the fly. There is some patented technology inside that SDK that helps to keep processor / memory use to a minimum and therefore might make it usable for this kind of background effect.
Example.
this link might help you upto some extent but not exactly the focus blur effect which you need.
WP7 background blur effect

Responsive Websites with “cover” background images

I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks

Silverlight: Adding transparency to images

I hope someone can help us. We’re trying to put together an image editor, with similar functionality to Photoshop in Silverlight (but nowhere near as intricate). We’ve hit a weird problem when it comes to creating layers (several independent images in a z-index stack). Layering images on top of each other seems fine, but we want users to be able to edit the image in a given layer and we can’t seem to get it working.
In particular we want users to be able to cut “holes” in an image layer (and therefore allow the image below to be seen through), but no matter what we do, Silverlight won’t let us alter the Alpha transparency of PARTS of the image.
Strangely it will allow us to turn the entire image transparent and it will correctly show any transparency the image already has, but we can't figure out a way to make the user's selection transparent.
I hope that’s clear enough for someone to be able to help us!
Thanks a lot.
If each layer is in a canvas, you can add complex clipping regions to the canvases to remove content from the rendering.
These would need to be generated from polygons for each hole, so not good for random pixel-based regions.
You might want to look at this sample on silverlight.net site: http://www.silverlight.net/community/samples/silverlight-samples/scratch-surface/

Resources