New answers tagged

0

50 different styles does sound like a lot of styles to cycle through, I would suggest narrowing it down a bit first! You can sort of cycle through classes in the Chrome inspector, it's not the cleanest solution though... Save your classes in your regular CSS file (or another CSS file and link it in your HTML). Name the classes you want to cycle through ...


1

This question was asked before somewhere. Then, I asked on the stack overflow forum and the question was more conclusive. Normally they just take the layered PSD, they will take what they need and generate what they don't need. On this case that the web developer do not want to use Photoshop just pass a PNG as a template, and the important elements ...


0

I would recommend having an open conversation with your agency's developers on how they would like to receive guidance (instead of myriad of layouts). From personal example, we recommend following 12 column responsive grid for desktop layouts in Photoshop, with understanding that mobile layouts will be driven by whatever CSS framework is used, in our case ...


1

We build WebSpek as our own tool, specifically to address communication between designers and developers, it generates full job specification with marked up screens and code requirements It also generates interactive presentation from the same spec. You can see it in action on YouTube Free registration will be available starting Tuesday, May 24, 2016


1

Assuming you're using the most up to date version of Adobe Photoshop, the easiest way to do what your asking is to export the layers' CSS. Right click on the layer in the layer panel and choose 'Copy CSS'. This copies the CSS rules to your clipboard which can then be pasted into any text editor. You've got to set your document up with the appropriate ...


0

The easiest solution is to just use one widget – text with appropriate spacing around it. The workaround for your situation with two separate widget goes like this: Give a name to the text widget (this helps finding it during step 4) Right click the text widget and select 'Interaction Styles' Go to the tab 'Selected' and set the desired styles. Save the ...


1

You don't need text labels. In your example images it's not clear what the two color bars are, but in context it should be perfectly clear. Assuming that choosing a new color in the picker will update the 'new color' bar, that will make it clear what the that color is, and the user is either aware of the color they already have selected, which makes it ...


0

The same thing happened to me in CS6, but I saw what I was doing wrong. When I created a new document/ artboard for web, I use to change the measurement units to millimeters (because it was easier to put into perspective when designing) but when I didn't change the units and copied the mm image to the pixels image it was much larger. Lesson - don't change ...


1

The problems you see are compression artifacts. If you want to make them less visible apply less JPEG compression on your Image, this in turn will make the banner larger in size. Image 1-2: 2 compressed JPG images, the one on the left has more compression (25) that the one on the right (90). But the less compressed image is more than 4 times larger in ...


0

I figured out what the problem was. Since I'm designing on a Retina display, I needed to set the Image -> Image Size resolution to double the standard resolution, 72 -> 144. Then when I send it to the developer, he should set it to whatever his display's resolution is, in this case 72. This way we get consistent results. These links helped me out: ...


0

Are there some best practices for making the site scale to different sized screens? Is there a font size I should be using as a guide? Yes. What you're interested in is Responsive Web Design with a Mobile-First approach. This is often a difficult concept for individuals who are used to graphic design in a print setting. Don't think about designing ...


1

Honestly, those in-between sizes are more wildcards than anything else. I would design against the "standards" (iPhone 5 and 6/Samsung Galaxy) and anything in the middle is up to possibly adjusting the breakpoint itself (i.e. whether tablet goes down to 600px rather than 640px). If there is an in-between and you really need to have it look a certain way, ...


0

This is the correct way to take high DPI screenshots exactly how you want. The best part is you can do this on a normal DPI display. It will take full screenshots even when the high DPI rendering is bigger than the monitor. Use Firefox. Choose Tools > Web Developer > Responsive Design View. Set the resolution accordingly (iPhone 6: 750x1334, iPhone 6 ...


0

First of all, what everyone else is saying is correct, you really should have different assets for print and web. However, depending on your desired print results you may be able to do what you want. As a general rule, 300PPI at your desired size is an acceptable resolution, it could be double that for high-end products or half that may be acceptable for ...


0

In this day of 1TB (and larger) external drives for less than $100, not to mention all the cloud space/dropbox etc. available, there's absolutely no reason not to have at least two versions of every image. Especially when most web images will (and should) be under 100kb.


4

The cost of disk space is insignificant if you value your work. Buy an external hard drive, save your RAW files. If you really adjusted your RAW files export your JPG at the original resolution. Use theese for print. Use very little compression, maximum quality. Make a batch action on photoshop or whatever program you have to make a copy at lower size, ...


7

You can not compensate. Obsessing about the perfect hue is largely irrelevant for most audiences. All you can really do is make your part and use a monitor that is calibrated or emulating sRGB. Average user does not really have a choice on the color they are displayed. They can have bad, cheap, damaged or old panels. Since the color effects are global no ...


0

You may not want to use physical units on the screen, the main reason I can think is, the vast amount of screen sizes and pixel density combinations currently available. It will be a nightmare to fix position issues in each combination available, in fact the main reason for units like rem, ems, etc. to exist is because of this paradigma.


0

I have been running a personal website for 15+ years together with the usual Behance and Linkedin profiles. In my case i constantly (weekly) get new project quotes via Google searches that land people on my website. Only a few times (under 2%) did i get contacted via Behance and almost never via Linkedin, although i am also keeping these accounts updated ...


0

Sketch can handle and export parts of code, but cannot create a whole website. As a possible (and free) alternative, you could check out Macaw, which was recently made available free of charge as it's going to be discontinued, but it's still a rather good piece of software for a graphic approach to building website.


0

Sketch was intended as a design tool for creating responsive websites without having to write code. If the website has additional functionality that cannot be done in Sketch and requires collaboration with coder / developer, you'll need to use additional software such as Avocode.


2

Skeuomorphism The whole purpose of skeuomorphism is to tackle the problems you are facing. Emulating the aesthetics of physical objects that people are used to in the real world helps them to understand the functionality of your interface. Skeuomorphism has got a bit of a bad name recently, mainly due to Apple taking it a bit too far. Pre iOS 7, the ...


2

Currently, the three little nubs don't look like a slideable object, which is why people may not try using them. I suggest taking a look at some sliders/slider plug ins to see how they handle their sliding arms. You may want to use something with a point to it so it pinpoints what exactly they are sliding too. Something like this perhaps. Here's why: ...


0

From illustrator. I normally save as SVG then it will look sharp on a a screen and will re size nicely on gadgets. Then you dont need to worry about screen resolution


5

Traditionally, screen resolution has been 72dpi, though newer high-res monitors like Apple's Retina displays can go up to 400dpi. That said, when saving images for the web, image resolution doesn't really matter. Most people will export at 72dpi, but the most important thing to do is to export at the pixel dimensions at which the image will be displayed. ...


-1

72 dpi is best for web or 92 dpi for retina displays. 300 dpi is generally only for print. Using it for the web will just make a bulkier file.


-5

layout is the attraction for readership and to optimize the Newspaper's effectiveness in presenting information



Top 50 recent answers are included