New answers tagged

1

The devices are not what determines the pixel per inch value. This is determined instead by the browser used. This allows it to be more standardized, but not perfect by any means. All browsers convert physical units like cm and in to pixel values out of necessity for display. However, their true pixel values depends on whether or not it's a high resolution ...


0

Since you are using bootstrap it should be easy to use a glyphicon to show that it is a menu, instead of words. <div><span class="glyphicon glyphicon-menu-hamburger"></span></div> First, you should consider the fact that 20px is way to slim. it would just seem like some blip in the page, not at all something inviting users to ...


1

It depends what version of Photoshop you are using, but it has been made a lot easier in the recent updates of PS, especially in CC and I would recommend you to update to this version! Simply select the Move tool (v) and when you are hovering over an element press and hold Ctrl. It will show you distance etc. Then you can either use pixels in css or rems ...


0

I recommend you don’t mockup the entire website at all. It only leads to misunderstanding and disappointment. Especially when creating a responsive website, which obviously is what is required today. What I do is I start by showing the client an empty website template running on a local Web server on my MacBook, or a private staging server if I’m working ...


0

Showing the text box View > Show > Layer Edgers You selected layer will now be highlighted Getting the distance Use the ruler tool I sometimes behind hidden behind the eyedropper tool to get the actual distance. Keep the text box selected otherwise your highlighted layer will not show.


1

You might consider using a menu that slides out partially when a user has their mouse near the menu to save visual space. The default state: When the mouse is near (using animation to transition): If allowed, you may even be able to open it further when one of the sections is clicked.


1

This is just my fill-in on one of your questions in the comments regarding the close button. When using a burger menu, you usually don't see the close button all the time, what happens is, you click the menu icon (burger menu), the full menu opens and in one way or another, the burger icon changes into the close icon. When hitting the close button, the ...


8

Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked. This is just a quick sketch, but you can get icons like this from Bootstraps library.


0

Adobe is working on a new software for exactly this purpose. Project Comet is close to the first beta release (based on the increased amount of advertising I've seen in the last month, I'd guess the beta will start in February or March). You can sign up to get updates on the project now (see link above); from what they've shown so far, it will really ...


0

There is a great and simple tool that I use all the time for design and that allows for code export as well: Webflow but if you want to use the code export feauture you need to buy a monthly/yearly subscription to do so, but its not that expencieve if you do alot of work. Oh and you can convert the code to WordPress pretty easy.


4

For all the graphic designers who do web design too. Web design is a specialized branch. It is not an "aditional" one. The same as print design for flat bed press, logo design, motion graphics, etc. This basicly means you need to be... specialized. How do you knock up client design mockups for review My 2 cents from a previous question: How Do You ...


2

Sketch is good for web design and can export css styles, even though photoshop is the most used program for web designs in my opinion its not the best it encourages designers to design stuff that is not possible or requires hacky css to replicate the effect. Using sketch or illustrator limits designers to produce designs that actually support web ...


1

I'll second both previous answers, you definitely want to have a seamless transition between design and development. One option is to follow a standard 12 grid PSD template to create layout and then confirm it with a coding compliance tool like https://www.oss-usa.com/web-preflight?promo=web-preflight. Another option is to take something like a WordPress ...


2

\e61e is technically this character:  in UTF-8 encoding (the default encoding for CSS - this can be changed using @charset). So that's the literal answer to your question. But as Joonas mentioned in the comments, a font can map a character like this to a symbol, in this case an icon, of their choosing. So in actuality, what you're seeing is likely ...


8

You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones): Create the mockups in Photoshop or similar software, and then manually re-create them in HTML/CSS; Create the design directly in HTML/CSS. In option 1, you would basically use the photoshop file as a reference, mostly to calculate distances ...


0

A different solution: use the excellent Xscope app (if you're on a Mac, that is). http://xscopeapp.com/ It has a Loupe tool, which overlaps any screen under your cursor with crosshair showing the exact color value of that pixel in many different color spaces (and HSL is one of them!). So you just hover the cursor over different parts of the image and ...


1

Apparently you can download from Adobe itself: https://helpx.adobe.com/photoshop/kb/optional-file-format-plugins.html It's the one called Electric Image & HSBHSL (Optional Multiplugin)


1

You could create a script that does this for you. Start extendscript toolkit and run following in Photoshop: var fgc = app.foregroundColor; alert(hsb_to_hsl(fgc.hsb)) // http://stackoverflow.com/a/31851617/1335032 // Note: HSB and HSV is same thing function hsb_to_hsl(color) { var h = color.hue; var s = color.saturation/100; var v = ...



Top 50 recent answers are included