Web designers who spend a lot of time in Photoshop will often build their own repeating patterns from scratch. Yet for some projects it can be easier to work with an existing background to save time. The problem is that it can be difficult finding the exact background which fits your needs.
Take a look at these fantastic online resources for repeating backgrounds. Some are galleries while others help you generate repeating tiled background images. Ultimately these tools are efficient and powerful resources to web designers and developers around the world.
Read the rest of this entry »
Marvel is a free, web-based tool for creating prototypes for any device: desktop, tablet, mobile and more.
The app works by synchronizing with your Dropbox account which simplifies updates (as local file updates are instantly reflected to the Marvel-powered prototypes).
It accepts both images + PSDs and prototypes can be shared with unique URLs, SMS or QR codes.
There is a growing number of web fonts, each have lots of items and, sometimes, we only need few from each.
Font Combiner is a free and web-based tool for picking the letters from each font and generating a custom one.
It also empowers us with features like changing the kerning, subsetting, hinting options and multiple font glyph combinations.
The tool hosts lots of free web fonts to choose from and works can be downloaded as PNG or SVG.
Responsive Wireframes is a free and web-based tool for quickly creating wirefames for any project.
It enables us to insert elements, style them (color, opacity), add text and also resize if wanted.
These elements can be re-positioned with drag ‘n drops and the work can be saved for future reuse.
The tool is focused on responsive layouts as we can define multiple viewports and decide how each element will look on different viewports.
This again work by positioning + resizing each element for each viewport and simplifies the sharing of “responsive ideas” a lot.
Previously, few web-based CSS3 generators were shared at WRD which helped getting started with the new features of CSS3.
Create CSS3 is another one but more complete compared to others as it has support for most of the CSS3 properties.
It lists the properties + allows us to customize the values of each and displays the preview instantly.
Multiple rules can be added to the same element and the generated CSS code can be edited as well.
Not every PSD file is created equal : ). Sometimes they are very badly layered/grouped and it is hard to work with them.
In case you are trying to find out the fonts used in such a PSD file, .PSD Fonts can help.
It is a website that simply asks you to upload the PSD file (directly or via Dropbox), analyzes the layers and lists the fonts used. That simple.
extractCSS is a free and web-based application that is capable of extracting style-related information from HTML.
These include ids, classes + inline styles and the output can be customized too (indent and brackets usage).
The tool is very useful when we quickly create an HTML file with inline styles and want to generate the stylesheet of it.
extractCSS is also open source and it is built with only client-side code.
Tridiv is a free-to-use web application for creating 3D CSS shapes pretty easily.
Using the app, we can insert 4 different shapes (cuboid, pyramid, cylinder, prism) and resize or rotate them.
The editor interface displays all views (side, front, top) at the same time and it is possible to use any number of shapes.
Each shape can be styled (color, opacity, background image) and previewing the work is only a single-click away.
Once completed, Tridiv generates the HTML-CSS code and a “save button” can store it on localStorage.
Compatibility: All Modern Browsers
If you are already using a CSS or front-end framework, creating responsive layouts shouldn’t be hard.
However, if you are new to such layouts, Responsive Web CSS can help you get started quickly.
It is a web-based tool that enables anyone to create a responsive layout skeleton with drag ‘n’ drops.
You can simply add any number of pages, divs and define the widths in percentages.
There is support for nested grids and it is possible to select the targeted devices. After all, the HTML-CSS is created automatically and will be ready-for-download.
Presenting website/app-related screenshots with device mockups help users to picture the real product easier.
MockUPhone, a free to use web app, simplifies creating such mockups a lot.
It asks you to choose a device from a list of popular tablets + phones and upload the screenshots with drag ‘n’ drops.
Once uploaded, the screenshots in different orientations + views are generated automatically and offered for download.