Archive for the ‘Web Design’ Category

Edit PSD files online with Photopea

Love playing around with images but don’t have a licensed copy of Adobe Photoshop or similar cool image editing tools? Wish to unleash your creativity by enhancing a few pictures from your latest travel trip but have very limited editing options in the tool you have? Monitoring the online space for a great tool that can help you easily bring out new shades in your pictures without having to pay too much?

Did you answer all those questions with a ‘Yes’? If so, your search should end at Photopea – the perfect free online image editor.

Photopea – Load, Edit, & Save Images easily

Photopea is a free online image editor that lets you load, edit, and save Adobe Photoshop (PSD) files, Gimp (XCF) files, and Sketch (Sketch App) files without using any plug-ins. And that’s what sets this tool apart from conventional photo editors.

Popular image editors like Picasa, Pixlr, Fotor, etc. can work with a wide variety of generic image formats like JPG, PNG, BMP, GIF, etc. However, most of them fail to load and edit image files created with other photo editing tools like Adobe Photoshop, Gimp, or Sketch. So what should a user do if he wishes to edit an existing PSD / XCF / Sketch file downloaded from the Internet or one that is created by him with a version of Photoshop / Gimp / Sketch that has expired? Answer – use Photopea.

Photopea uniquely gives you the freedom to work on image files as you would using popular commercial photo editors like Photoshop. Since the tool is free to use, it is an extremely useful alternative to Photoshop or Sketch. So while professional users and organizations might want to stick to commercial tools for the features they offer, home users who cannot afford them can use Photopea to the same end. The tool doesn’t need you to download or install anything; you can use it directly from within your web browser.

Some of the coolest features of the tool include:

  • It can work with both raster and vector graphics
  • Enables dragging-and-dropping images into the browser to import for editing
  • Allows saving work as PSD or as JPG / PNG
  • It can work with layer styles, masks, smart objects, text layers and more
  • Adjustments include Brightness, Contrast, Levels, Curves, Vibrance, Hue, Saturation
  • It can run on any device (desktop, laptop, tablet, phone or any other computer)

Photopea can be used for tasks as simple as image resizing to complex work such as webpage design, photograph processing, creating illustrations, etc. The tool doesn’t have much of a learning curve attached so you can start playing around with it in no time.

How to use Photopea

Land up on the tool’s homepage (www.photopea.com) and you should see the editor open up in the window. Plus point one – no signup needed, it lets you get straight to the point. Since it is free of cost you might see some advertisements in the right hand panel of the screen; if they’re distracting to you, close them using the small x on the top-right.

To start editing images, you can start a new project by clicking on ‘New Project’ in the center of the screen or by going to File -> New. You’ll be asked to give your project an appropriate name, a preferred width and height, and choose a background color. Click on ‘Create’ to open up a white canvas for your first Photopea project. Alternatively, you can load an image from your computer by clicking on ‘Open From Computer’ or going to File -> Open. The third option is to load a demo PSD or Sketch file and start editing it.

Once the file opens up, editing it is pretty much the same as Photoshop. The tool’s interface too resembles Photoshop so that users can have a sense of familiarity. All editing options have clear Alt texts so if you don’t understand the symbol for any tool, just hover your mouse on it and you should see its name.

The tool is largely user-friendly except for a few glitches here and there. For example, it doesn’t let you modify any text on the image directly. To do so, you either need to hide the text layer or delete it and add a new text object on top. Similar minor restrictions should be expected at every point while using the tool.

One of the most useful editing options is the Move tool that lets you drag and position any part of the image to any place you want. This is because like Photoshop, Photopea regards an image to be composed of several layers with each layer hosting one image component. That’s the reason it gives you the kind of image editing flexibility it does.

To understand the tool’s working in detail, visit the ‘Learn’ section through its button on the top-right menu.

Pros VS Cons

Photopea scores some major plus points:

  • Doesn’t require any download, install or plug-in to work
  • Loads quickly and is very responsive
  • Drag-and-drop support
  • Very familiar to Photoshop
  • Eliminates environment constraints that Photoshop or other editing tools have

There are a few drawbacks too:

  • Users with no prior knowledge of Photoshop might get lost easily
  • If only basic image editing options are what you’re looking for, this might be a very complex tool for you
  • Load, edit, save PSD/XCF/Sketch file within your browser with @photopeacom photopea.com/ via @supermonitoring

    Tweet this

Verdict

True to the claims of it being a worthy alternative to Photoshop, Photopea is a very useful tool that gives users access to quite a few Photoshop features at absolutely no cost. However, it does have its limitations. It can easily get confusing for beginners or home users with no extensive image editing experience. It is ideal for users who are familiar with Photoshop, Sketch, or Gimp and who know their way around image editing terminologies.

Create your own website in the WebWave wizard

Many people wonder how to create a website. Some are ambitious and learn various programming languages to build their own website. Other can’t decide which interactive agency should they choose, or look for cheap freelancers, which does not guarantee good project.
Fortunately for all of the above (and not only them) creating a website can be really simple and does not require specialist knowledge. Webmasters, entrepreneurs, hobbyists, amateurs and curious, can use the help of Webwave, the Polish website editor.

Create websites without coding

WebWave appeared on the Polish market in 2013 and since then has been systematically developed and improved. This tool allows you to create your own site using drag and drop interface. It doesn’t require any expertise in web designing and web development or coding skills. You can easily place every object with the accuracy of 1 pixel exactly where you want, using only mouse.

Using the wizard is completely intuitive, simple and pleasant, and give the creator full freedom of design. You can start your website completely from scratch, or use one of over 30 pre-defined templates. Both the wizard itself and the templates are completely free, but we will write about money later.

What word would best describe this wizard? Professionalism! Websites created in the WebWave editor are no different than projects created by specialized marketing agencies because:

  • they are fully responsive – they work well on every device, from a computer to a smartphone;
  • they are search engine (Google, Yahoo, etc.) friendly;
  • they have very well optimized code that allows pages to load quickly.

The wizard has a lot of flexible features, and we can easily integrate it with external tools. WebWave’s major advantages include:

  • unlimited transfer and disk space;
  • multilingual websites;
  • possibility to upload your own HTML, CSS or JavaScript code (for more experienced webmasters);
  • site statistics;
  • own “404 error” and “301 redirect” pages;
  • integration with Facebook, Disquss, Google Maps, Google Analytics, LiveChat, Freshmail, Shopify, Salesmanago and many others.

How to create a Web page in WebWave

To start working with the wizard, go to the WebWave website and sign up. All the work – creating, editing and administering the pages is done through the webmaster panel. After creating an account, click on the “New Page” button and either choose an empty website or choose one of the templates. After selecting the choice we are looking for, the entire wizard is shown.

WebWave creators do not leave their customers to grope in the dark. A 15 minute movie explains the most important elements of the wizard right from the start. This tutorial is really recommended to all users as only several minutes are enough to present most of the tools and capabilities. At webwave.me/Help we will also find a detailed guide to each option.

To get to know WebWave even faster, we recommend to select and edit one of the templates first. By clicking on any part of the page, we can easily modify it – change position, edit content, color, background, images, add animations, etc. A great feature is the ready-to-add elements such as gallery, slider, menu, contact form, buttons, Google map, or new subpage. In the top right corner of the screen you can switch between your pages, add a new language or go to the page preview. However, the most important option seems to be the RWD edition, where we can see how the whole site looks on computers, tablets and smartphones.

We save the changes using the Save icon at the top of the wizard. When we are ready to show our project to the whole world, we just click the Publish button. We can later modify our project at any time.

What are the costs?

We can publish our page for free in the subdomain of webwave.me under random ID. If you want a site to appear under a particular domain, you should buy a hosting that costs from $3.5 per month. In addition, for each such package WebWave offers registration of a .pl domain for free. The wizard itself, regardless of the number of pages created and the time spent, is completely free.

You can also earn money with a WebWave because this way the company encourages users to recommend the wizard to others. If we get people to pay for hosting, we will receive 30% of their deposit. The money we receive can either be spent on local services or simply paid out. Therefore, if you are a marketer, you may also find WebWave interesting! The company also makes it possible to create a special account for agencies, webmasters, freelancers or anyone else who will create pages for clients in the WebWave wizard.

It is worth to mention that WebWave is not just the editor. In addition to it, we have a simple content management system (CMS) and the already mentioned webmaster panel. If someone else adds content to our site, we can give that person access to the CMS panel so that he or she can edit existing posts, change images in the gallery or add a new article but can’t move or delete any items on the page. The webmaster panel allows you to easily switch between our pages without having to memorize another passwords and addresses.

  • Try webwave.me/ – a simple and intuitive website creator – via @supermonitoring

    Tweet this

Summary

Considering all the elements and functions, WebWave is a really great and cheap tool. On its site there is an online chat where we can ask for help with the editor or other things related to it or the company. Answer during working hours? Immediate and detailed. There is also a Facebook group for WebWave users, where people exchange experiences and knowledge. So if you need to create a new website, redesign your existing site, or just want to experiment with something new, use the WebWave Wizard. Or recommend it to others and benefit yourself!

Create stunning background-less images with ClippingMagic

Many artists today are taking the e-commerce road to market their talent. And that’s actually a great idea. Amazon, eBay and other popular online selling platforms play a pivotal role in making art reach the right customers. But what do you think attracts users most when monitoring art online. It’s true a low price is a crowd-puller, but to truly appeal the senses, an art-work needs to look absolutely stunning. The same logic applies to clothes, accessories, home décor, and pretty much everything that’s available for sale online. Something that’s low priced will never sell if its depiction or image on an e-commerce website isn’t attractive. However, an item that looks ravishing tends to sell despite a slightly steep price.

Bottom line – to sell something online, its depiction / image / photograph should be perfect. We know where you’re going – Photoshop? Nah, here’s something simpler and more reasonable – ClippingMagic.

ClippingMagic – give photos a makeover!

ClippingMagic is an online tool that lets you accomplish all the editing tasks you need to publish great images. With a few clicks, it lets you remove image background, make them transparent, adjust colors, add / drop shadows, as well as crop the images to create an eye-popping result. Of course it doesn’t have all the features of Photoshop but if editing photos to highlight your work / product online is what you’re looking for, ClippingMagic is the perfect choice.

The tool’s intuitive algorithms make complex tasks like removing image background seem like child’s play. All you have to do is mark the foreground with a green line and the background with a red line and a click later, you’ll have a great transparent image that you can post on Amazon and eBay to sell. And all that for a fraction of the hassle and cost – neat!

Here are some exciting features of ClippingMagic at a glance:

  • Allows you to pan and zoom images to deep levels for inspecting details and making changes accordingly
  • Auto-save and Undo-Redo options to help revert changes and save automatically
  • Configurable brush size to adapt to your zoom level dynamically
  • Scalpel to cut off uneven faint edges
  • Tools like refine edges, dedicated hair tool, color control, color cast removal, etc give you the kind of control you want to have while editing images and making them look perfect
  • Enables you to select preferred file format, DPI, color space, and JPEG quality
  • Facilitates advanced lossless or lossy web optimization to minimize image file sizes
  • Support for images up to 8 megapixels

With ClippingMagic you can quickly create a catalog of neat results by conveniently clipping a number if images simultaneously. The above mentioned features are just the tip of the iceberg. To find out about the complete spectrum of the tool’s features, visit its homepage (https://clippingmagic.com/).

This is how it works

To say that ClippingMagic doesn’t have a learning curve attached with it wouldn’t be wrong. Depending upon how you wish to enhance your images, you can select which feature of the tool to use and view its dedicated tutorial on the website. Each tutorial includes a series of easy to understand steps and following them really isn’t difficult.

To test how simple the tool actually is, we scrolled down the homepage to reach the link for Basics Tutorial. On clicking the link, we landed on a page where a sample image was edited to remove background. There was also an option to “Try Your Own Image”. We clicked on the button to experiment with the tool first-hand.

Here are steps we followed to remove the background from our sample photo:

  1. Dragged the image into the box outline on the web-page (there are also options to browse-upload, copy-paste, or fetch from URL)
  2. Once the image loaded in the tool, a number of editing options appeared in the file menu
  3. We only needed to remove the background, so as mentioned on the homepage, we highlighted the foreground with green color and the background with red

The results were updated in the adjacent panel in real-time. We could see the affect of each mouse click and movement which was quite interesting. A convenient ‘undo’ button helped revert any changes we didn’t like in the result.

There was a variety of other editing options available including color changes (saturation, temperature, brightness, etc.), adding shadows, cropping, fine-tuning the edges, etc. Once all changes were done and we were satisfied, we tried downloading the image. That’s when we were required to sign-up. To download even a single edited image you’ll need to subscribe to one of the affordable plans.

Pros VS Cons

We actually found the tool to be quite useful. You can upload and edit any number of images in any way you like. But to save edited images to your system, you’ll need to subscribe. Fair enough!

As far as cons are concerned, we found only a single one. While marking image foreground and background you’ll have to be really careful. The wrong kind of marking can cut off too much or too little of the image border or background or edge. The real-time preview window will help you out with this. Come to think of it, this isn’t a con, just a precaution you’ll have to follow while using the tool.

  • Make any image background transparent with a few clicks with clippingmagic.com/ via @supermonitoring

    Tweet this

Final Verdict

We loved the tool – less hassle, less investment and a number of great photo editing features. Thumbs-up to the creators!

Stylize your web app with icon fonts from Fontello

The world around us is changing. Internet has made it possible for people from all walks of life to access information about any and everything. Today, it is possible for a housewife to create a fully-functional dynamic website using just her laptop, and all she would need is a set of the right tools and a few manuals. That’s the kind of power automation has brought to our doorsteps.

Speaking of which, today there are a number of web toolkits or editors that allow non-technical people to do stuff that only professionals could do up until a few years ago. Take Twitter BootStrap for example. Everything one would need to create a good-looking working website is in there. Now imagine you’re a fashion designer with zero information on the way websites are made. You want to advertise yourself on the Internet but don’t know anyone who can build a nice website for you, or maybe you don’t have the money for it. What you would need is something exactly like BootStrap that’ll let you create your custom website with everything you have in mind, with no prior knowledge of the subject, and with practically no investment.

Sounds wonderful, doesn’t it? Well, we’re not going to elaborate on BootStrap any more but a similar tool that lets you customize the way images and icons look on your web-apps, websites, and mobile-apps, without the need to code or have any prior tech-knowledge. The tool we’re talking about is called Fontello, and we’re sure by the end of this review, you’ll fall in love with it.

Fontello – the wonder Icon Font generator!

Okay before you get confused about what Icon Fonts are, here’s a little intro. When we create documents on computers, laptops, or handheld devices, the way numbers and text are displayed is controlled by what is called the Font Family. Numerous fonts are included in a Font Family (for example, Arial, Verdana, Times New Roman) and there are ways to customize those using different styles like Bold, Italics, Underline, etc. Most people who’ve created Word documents would be familiar with fonts.

Now, Icon Fonts are also fonts, but instead of containing letters or numbers, they contain symbols and glyphs. Consider Emoticons used in popular social media platforms and messaging apps for example. Smiley faces, cartoon faces, animal pictures, direction signs, and basically anything apart from text and numbers that can be used to depict some information can be categorized as icon fonts. Icon Fonts are a smarter choice over regular images since they don’t take as much time to load, scale better, and can be customized using CSS in a lot more ways.

Now that we’ve cleared the pleasantries, let’s get to business. Fontello is an online tool that lets you create your own custom icon fonts by packing vector images into web-fonts. It provides you with everything that’s necessary to include graphics into your web pages without the need to actually code. Also, the tool has a huge built-in collection of open source icon fonts and art-works that you can scan, download, customize, and use for free. /they keep updating their databases so you can keep monitoring it for new fonts every now and then.

Essentially, the tool transforms you into an icon font wizard who can generate personalized icons to match your website and work style, look, and feel. And all of that with no need to code, and absolutely no cost.

God Bless the creators of Fontello!

How Fontello Works

Open Fontello.com and you’ll see a wide range of icon fonts displayed on the home page. Select any font by clicking on it and proceed with the customizations. Or, you could search for an icon font through a search box on the upper left corner.

For our test runs we searched for the keyword “smiley”. The results showed us all icons that had names containing the word “smiley”. Next we selected one of the smiley icons and that activated many options on the interface. We could resize the icon using a convenient slider on the top, change the name of the font through the Customize Names tab, customize the code for the font through the Customize Codes tab, and then we could download the web-font. Apart from these options, we could import our own icon font files into Fontello, customize them using their tools and save them. However, we came to discover this feature was suitable only for professional icon font developers. There was an API we could use in our website too. You can also get in touch with the creators of specific icon fonts to know more about their creations and how you can customize them further.

There are literally hundreds of icon fonts on Fontello that you can download and use in your projects. And that really is the beauty of the tool. Just go to it, take what you like, donate if you wish to, or contribute a font or two, access GIT code for the icons, create new icon fonts, and that’s it. No need to sign-up or pay anything or even mention your name / email.

It’s a beautiful, open source, free world!

Pros VS Cons

We’re going to change the way we list down pros and cons for Fontello because there isn’t a clear distinction between the two in this tool’s case. Actually, the points we’re going to mentione aren’t really pluses or minuses; they’re just features of the tool.

  • Fontello as an online tool isn’t beautiful, but then it isn’t meant to be. Instead, it is convenient and lets you get straight to the point.
  • Fontello lets you search for icon fonts, customize them, and quickly preview results.
  • It gives you a lot of control over iconic fonts through CSS. But the icons are single-colored. There are ways you can make them multi-color but they’re a bit complex for everyday users. Plus, human-interface guidelines suggest using single colored fonts.
  • There is a slight learning curve involved. But then, a very small percentage of people actually need iconic fonts and if you’re among them, you’ll focus on the end results.
  • Create custom icon fonts for mobile apps and websites with fontello.com/ by @puzrin via @supermonitoring

    Tweet this

Verdict

Double thumbs-up for Fontello.

Ace user experience design with UXPin

Modern products and services are all about excelling in the field of customer satisfaction. The organizations that have user experience, popularly known as UX, as their primary objective are the ones that have the highest chances of success as compared to others. That’s the reason modern day UX designers are some of the highest paid professionals in the technology field. But when the costs go high, the road gets steep for small organizations. What they need is killer UX design skills at a price they can afford. Enter – UXPin.

UXPin – Collaborative UX design tool

UXPin is an online tool that lets you and your team work collectively on wire-framing, prototyping, user testing and more without the need of writing code. It lets you create user flows, static / interactive designs, prototypes with advanced states, and interactive wire-frames within minutes and share them with your team in different formats (PDF, PNG, HTML, etc). Other team-mates can monitor the designs shared with them, leave their feedback in the form of comments and notify the people the comments are meant for. You can even get manager approvals for your UX designs directly through the tool. With its state-of-the-art features and easy working interface, UXPin is one tool that helps save teams hundreds of hours by simplifying product development and collaboration through elimination of coding.

Some of the most interesting features of UXPin include:

  • Thousands of built-in elements for UX designing on mobile, web, and desktop
  • Editor for building static / interactive designs and advanced prototypes with interactions
  • Facility to import designs from Sketch and Photoshop
  • Custom libraries to help you standardize your designs
  • Auto-update that reflects changes you make to one element in all other elements of your design
  • Lets you assign roles and permissions to team members
  • Enables tracking project status in the dashboard
  • Eliminates lengthy redlining of mockups with spec mode

UXPin can play a pivotal role in bringing distributed UX design teams together through its platform. With this one tool, people sitting across different continents can work together in real-time. It lets teams quickly test their UX designs across platforms and allows people to actually go into a design and cut and paste components where needed. It is a tool that lets you go beyond the traditional limits of designing.

Here’s how you can use UXPin

You can jump right into the action by starting with UXPin’s free trial. It is simple to register. All you have to do is enter your company email address where required and hit on the big blue button that says “Start using it now!” on the tool’s homepage. You could also let the experts at UXPin give you and your team a helpful demo. For now, let’s stick to the free trial.

Once you’ve entered your email id, the tool will ask you for a few more details before proceeding. It’s the usual process most tools follow to customize themselves to suit your needs better. Typically, the details you’d need to provide would include the size of your design team, information as to how you got to know about UXPin, and what role you play in your project. A short and sweet tour later, you will arrive at your dashboard.

In the dashboard you’ll see a dummy project, options to add new members or manage your team, options to upgrade, and most importantly, the option to create a new project. We suggest to start with new project creation as that will give you the most exposure to UXPin’s features. Click on “Create new project” and give it a name. Save and proceed.

The next screen will ask you to choose between using the UXPin editor to create designs from scratch or import them from Photoshop or Sketch. We chose to start from scratch and arrived at the handsome UXPin editor. The UXPin editor has a gray colored work area in the center of the screen with drag-and-droppable elements on the left. By default, the “Basic Elements” library is selected but you can change that through a convenient drop-down. You can create pages and layers in your design and name it whatever you wish to. The top margin of the work area is lined with more editing options, a play button that says “Preview”, and a button that lets you “Share” your prototype or wire-frame with your team.

When you’re done, click on the “More” button at the top right of the screen and then click on “Log out”.

Pluses VS Minuses

The pluses are many and can be easily gathered from the features section. The tool isn’t very costly either.

As far as the minuses are concerned, we think there are a few minor ones:

  • The tool does have a slight learning curve associated with it. It might take some time for getting used to.
  • A good catch suggested by one of the designers is the lack of an “Offline” mode in the tool. You’d always need to be connected to the Internet to work on UXPin.
  • The tool could benefit from more design options like fonts and customizations.
  • The tool #UX designers across the world are loving: @uxpin uxpin.com/ via @supermonitoring

    Tweet this

Verdict

Overall, UXPin is one tool no UX designer should miss. Despite the tiny drawbacks, it is awesomely useful owing to the advanced editor and integrated collaboration features.

Present your ideas better, with Symu

When working in an organization, brainstorming and coming up with innovative ideas is considered quite a big deal. That’s how the wizards of technology develop cool stuff for users. But as a designer or developer, thinking of something great and explaining that idea to teammates are two different tasks. It is essential that the purpose you’re trying to achieve doesn’t get lost in describing the functionality to others. And that’s precisely why so often, practical examples, or more correctly, mockups are used to demonstrate ideas.

Interested yet? If you are, we’ve got a brilliant tool for you this time that will not only help you present your ideas in an awesome way, but will also act as an online collaboration and project monitoring tool where you can share your ideas with teammates through links, accept their feedback, and apply changes accordingly. Plus, you could do a lot more. Get ready to checkout Symu!

Symu – Present Practically & Professionally

Symu is an online tool that enables you to present your projects in a browser. Projects here mean website designing projects with actual working button clicks, links, animations and targets. The tool lets you prepare dynamic presentations for your websites with features such as fixed headers, clickable hotspots, etc. Moreover, you can create dedicated folders for each of your projects in the Symu portal where you can add teammates and give them permissions and accesses to upload work collectively. It even lets you upload video files and accept feedback on them as comments.

It lets you work through a 6 step process:

  • Upload your project (as an image file or a design file)
  • Create clickable mockups (buttons, links, targets)
  • Save the changes
  • Share the project with your team via email
  • Get feedback on the project in the form of comments (each comment is made into a task automatically so that it can be tracked easily)
  • Work on the feedback, share again

It’s as simple as that. Additionally, the tool also lets you manage your workflow by arranging your tasks in progress, ready for review, on hold, approved through a convenient drag-and-drop feature.

Enough with the talk, let’s get some hands-on experience.

Tool Usage

To get in the action, sign up for free with the “Sign up free” button on the homepage. The tool requests for your name and email address, or you can sign up with your Facebook or Google credentials. Thereafter, you’ll be asked to activate your account by confirming that you received an email from Symu.

When your account has been activated, you’ll be directed to your Symu dashboard. You’ll see the option to upload your project. You can upload files of JPG, PNG, or PSD formats. Once the picture has been uploaded, you can begin working with it. You’ll find a “More” option on the upper right corner of the uploaded picture. Click on it to see various options like Copy URL, Share Project, Assets, Versions, Duplicate, etc. By default the image you upload will be kept in the outer-most directory level, but you can move it to any folder that you create. Check the box on the upper left corner of the image and a file menu of sorts will appear on the top of the screen with the options to Share, set project Status, Move, Duplicate, or Delete.

To edit the image, hover over the image. A button that says “View Screen” will appear in the center of the image. Click on it to open your uploaded image in full screen mode with a ton of editing options in the left hand panel. The options include:

  • Versions: A look at all the different versions of the uploaded image
  • Comments: Options to allow comments on the image or not. To add comments on the image, click on it anywhere. That should open up a comment dialog.
  • Build mode: Click and drag over the image to select an area. As you release the mouse, a pop-up will open with options to set the destination that will open when you click on the image next. This functionality lets you set target on clicks (beneficial for button clicks).
  • Desktop mode: Option to view the image as it would appear on desktop, mobile or tablet
  • Upload option
  • Settings: Image editing options
  • Share
  • Status: Option to put the image on hold, for review, mark as approved, archive

When you’re done with editing and wish to return to your dashboard, click on the Symu logo on the upper left corner of the screen. Another set of options you’ll find on your dashboard screen will be in the main menu on the top. Here you’ll find:

  • Projects
  • Workflow
  • Tasks
  • Activity
  • Shared
  • Teams

Pretty self-explanatory we guess!

Additional features include free templates, UI kits, etc. that you can access through the “Freebies” button on the upper right corner. To access many more of the awesome features of this tool, start your free trial and upgrade to one of the pricing plans later.

  • Present your projects dynamically within your browser with @SymuCo symu.co/ via @supermonitoring

    Tweet this

Concluding Lines

Symu is quite a promising tool that budding designers should definitely try out. It is gradually capturing the interest of field enthusiasts and hopefully will soon rise as one of the dynamic presentation tools having the most potential.

Study Fonts in detail with Identifont

An integral part of any designer’s job is choosing the correct font for his blueprints, not just for texts, but also where shapes are concerned. The height, width, and weight of a font family can make or break a great design and that’s the reason even huge organizations like Adobe Systems develop dedicated tools to deal with fonts (read Typekit).

If fonts interest you professionally or personally, you’ll find this post especially intriguing. That’s because herein we’re monitoring online tool that’s more than just a tool, it’s a library, a library of fonts.

identifont

Identifont – The largest online font library

Identifont is the world largest independent library of digital fonts and font families over the Internet. You can easily find information about thousands of fonts within this tool along with the websites that offer them for sale or for free download. In addition to a simple index of all fonts, the library is equipped with almost a dozen inbuilt tools to help you search for particular fonts based on different criteria or perform various operations on fonts such as comparisons and blends.
Here are a few of the features of Identifont:

  • Lets you search for Fonts by appearance, name, similarity, picture, or by designer / publisher
  • Allows you to save the Fonts you like to your ‘Fontset’
  • Enables users to compare Fonts by their height, width, optical look, differences, etc
  • Regularly updates Font database to include latest developed fonts

Identifont not only lets you look up the latest Fonts over the Internet, it imparts you knowledge about them including the year of their development, the name of their developer and publisher and also the websites from where you can download them for free or for a price. In that sense, Identifont can be regarded as the ultimate Encyclopedia of Fonts.

identifont1

How to use Identifont?

There’s nothing to learn here really. As mentioned above, Identifont is just an encyclopedia wherein you type a keyword and search related information.

Just visit Identifont’s homepage and search for any font based on any of the following criteria:

  • Name: Type in all or parts of the name of any font you wish to look up
  • Similarity: Type in the name of any font and find all fonts that are similar in appearance to it
  • Picture: Type in the name of a picture or symbol and find all fonts that contain it
  • Designer / Publisher: Type in the name of a publisher or designer and find all fonts developed by him

In addition to the above simple search, you can click on the ‘Tools’ button from the file menu to perform additional operations such as:

  • Unusual Features: If the font you’re trying to identify has a character with an unusual or feature, select that character from a list on the left, then click the feature to show a list of fonts with that feature.
  • Differences: Enter the names of two fonts to compare and see a list of their differences
  • Tall Fonts: Lists extremely tall fonts for narrow spaces
  • Wide Fonts: Lists extremely wide fonts for tight vertical spaces
  • Companions: Identify different styles of typefaces designed to work well together in creative applications
  • Optical Sizes: Find families of typefaces with versions optimized for use at different sizes
  • Equal Width Fonts: Identify families of fonts in which the different weights or styles have identical character widths, allowing you to change weight or style without reformatting the text
  • Font Blender: Enter the names of two fonts and see a list of fonts that blend in appearance between them

What Identifont basically helps you achieve is, select a font that best suits your design’s purpose and description by helping you compare and evaluate all the different available fonts.

identifont2

Pros VS Cons

To be honest, there aren’t many pros in favor of Identifont, primarily because the tool has a very limited purpose for a very limited audience.

  • It is focused on designers
  • Helps them select the most appropriate font for their purpose by letting them compare and evaluate different fonts
  • Provides detailed information on various latest and old fonts

The cons are obvious too:

  • There isn’t much to the tool
  • Very limited purpose for a very limited audience
  • Looking for information on a font? Try @identifont! identifont.com/ via @supermonitoring

    Tweet this

Verdict

Overall, an okay tool for most users; however, field experts and designer might find it useful. There isn’t much to the tool as far as offering a significant larger advantage is concerned.

TinyPng – Optimize images without losing quality

A blog post, a social media share, or an article gains a lot of weight if accompanied with an appropriate picture. But more often than not, the problem with including a picture in an online post lies in the picture’s size. Let’s look at this problem from another viewpoint. Many software applications need to work with photos – picture editing & enhancing tools, photo monitoring websites, databases, etc. Large sized photos could mean bulkier applications that take more time to complete operations. Another take to the issue – email attachment limitations; you can only attach pictures within a specific size limit.

tinypng

Where there’s a problem, modern day technology presents a solution. And in this article we’re describing an awesome tool that solves the problem described above in a few clicks. Introducing, TinyPng, online image compression tool that reduces your image file size without decrementing its quality. Let’s check it out.

TinyPng

Have you ever faced image size issues while trying to upload self-taken photos online? If you want to upload a photo taken with a good quality camera like a digital SLR, high resolution Smartphone or any other point and shoot camera, the typical file size of images ranges in a couple of MBs. The higher a camera’s resolution, the bulkier the resulting images are with respect to disk size. And bulky images can not only be difficult to upload to social media, they are tough directly attach to emails, to share easily via collaboration tools, and can even cause performance problems in tools that work with them.

Ideally, the solution to these problems is an image compression tool that can reduce photo size. But most image compression tools end up reducing image quality (clarity, resolution, sharpness, etc) during the compression process.

TinyPng is a great online tool that lets you optimize your PNG images by reducing only their file size, not their quality. The tool uses smart ‘lossy’ compression techniques to reduce image size by selectively decreasing the number of colors in it. The resulting images require fewer bytes to store the data. The effect is nearly invisible but it makes quite a large difference in file size. And the coolest thing about the tool is that it’s 100% free. What more can you ask for!

Here are the best features of TinyPng at a glance:

  • TinyPng plays around with color indexes in image files and strips off unnecessary metadata to dramatically reduce file size.
  • PNG files compressed using TinyPng do not lose their transparency factor. They still support 100% transparency.
  • The files produced by the tool are displayed perfectly on all browsers and mobile devices.
  • The tool allows you to use its Developer APIs to connect your server to it and automatically compress all your images on the fly.
  • Sister tool TinyJPG.com performs the same operation on JPEG images.
  • Thumbs up on the convenience factor since you can upload images directly or specify image URL.
  • You can choose to preserve image details such as copyright information, GPS location and creation date in the compressed JPEG images. For PNG images the copyright information can be preserved.
  • Facilitates image resizing along with optimization. Upload the original photo once and then generate the sizes you need.
  • You can even use the tool to create image thumbnails with various aspect ratios through ‘smart cropping’ technique.

Interested yet? We bet you are!

tinypng1

Here’s how you can use TinyPng

Visit the tool’s homepage and you’ll see a large picturebox-like rectangle in the top half of the screen that says “drop your .png or .jpg files here!” So navigate to the files you wish to compress, drag and drop them into the box and wait for the tool to upload them to its online compressor. Depending upon your Internet connection speed and original image size, the image will be uploaded, compressed, and prepared for download within a few seconds. A green colored progress bar will help you track the whole process.

Once the image is ready for download, you’ll see a textbox-like rectangle below the picturebox that lists image details such as original filename, original file size, procedure status, file size post compression, a download link for the converted image, and what percentage of file size you saved. With our test image, we were able to save about 82% of the file size. So an image that was about 1.5MB is size originally was compressed to a mere 265.8KB in about 3 seconds. Neat! You’ll also be given a link to either save the compressed image to Dropbox or Download it to your computer.

In addition to providing image compression, the tool also offers a Photoshop plugin with which you can save compressed JPEG and PNG images directly from Photoshop. Once you install the plugin, a new menu option will appear in Photoshop from where you can resize, preview, select a folder and save your images. The plugin is available for Windows as well as Mac machines and it is compatible with Adobe Photoshop CS5, Photoshop CS6, Photoshop CC, CC 2014 and CC 2015. This plugin however, is not free of cost; you’ll have to shell out about $50 to get it.

Benefits VS Drawbacks

To be fair, TinyPng does have some decent benefits to it:

  • Free image compression for up to 500 images a month, maximum 20 images a day.
  • The tool is super easy to work with
  • Developer APIs for the tool are available for Ruby, PHP, Node.js, Python and Java.
  • Tool plugins are available for WordPress, Photoshop, Magento 1, and Magento 2.
  • In addition to resizing and optimizing, the tool performs additional operations on image automatically such as correcting gamma scaling, bicubic transparency edge correction and natural image sharpening.
  • Smart cropping resizes images by cropping away image parts that are visually the least interesting.

On the other hand, although it isn’t very pricey, it does have some drawbacks which include:

  • The free version of the tool is able to compress images that are a maximum of 5MB in size
  • The tool can be used only for PNG and JPEG format images at present
  • Optimize your images with a perfect balance in quality and file size – @tinypng tinypng.com/ via @supermonitoring

    Tweet this

Final Words

Great compression tool for PNG and JPG file. Just wish it could work with other file formats and larger photos.

Generate a unique color palette instantly with Coolors

As a website designer, you need to play around with colors quite often. Be it picking the right color for banners, buttons, image borders or the entire theme of your website, a majority of a website designer’s tasks revolve around combinations of VIBGYOR. And though it may seem to be trivial, selecting just the right combination of colors has a deeper impact on the appeal of your website than you might think. A good color scheme adds a lot of weight to a website’s design and that’s why web designers need to be spot-on with their choice of hues in order to deliver the perfect design.

coolors

Every organization, individual and type of work/service has some color that is most suitable to them. But when it comes to promoting that organization, individual, or work/service online through a website, a designing editor or tool might not support each color. Thus, often, designers need to program color-codes into their designs. But, this process is rather tedious and involves a lot of monitoring and hit-and-trials to find the exact colors suitable. Wouldn’t it be easier if there was a more direct way to choose any desired color instantly? With Coolors.co, now there is!

Coolors.co – Generate cool color schemes at lightning speed!

Coolors is an intuitive color scheme generator that makes color selection for your website designs extremely simple. Aimed at web-designers primarily, this handy application also has appeal for photographers in finding the right colors to complement their clicks.

Available as an Android / iOS app, you can install it on your mobile device / tablet, or use it as a desktop application through an Internet browser. It can also be used as an Adobe Illustrator / Photoshop add-on. Talk about flexibility!

The app lets you instantly generate a 5 color palette for any situation with the simple click of a button. And if you don’t like it, just hit the button to generate a new palette. Talk about simplicity and ease-of-use!

It will keep cycling through different palettes that are all beautiful. What’s more, if there are specific colors you like, lock them in and then let Coolors find the remaining colors for your palette that complement the ones you’ve locked in. Talk about variety, and awesomeness!

Above all, the tool if used as a desktop application is completely free of cost, no sign-ups required too. Talk about pocket-friendliness!

6 great plus points in just its introduction! No wonder, the app has users going ga-ga over it and media pouring in attention too! Let’s check out its usage.

coolors1

How to use Coolors.co?

As mentioned earlier too, using the app is a piece of cake.

Generator

Just visit the tool’s homepage and click on the “GENERATOR” or “Start the Generator” button to start generating random color palettes.

You’ll be directed to a page displaying a random color palette with 5 colors. Each color has a broad color bar depicting it and the associated hex code for the color is displayed at the bottom of each bar. Hover the mouse on any color bar and some options will appear:

  • HSB color model
  • RGB color model
  • CMYK color model
  • PMS value
  • COPIC value
  • A 2-way arrow
  • A camera icon
  • A lock

You can choose any of these options by clicking on them. Respective to each option, a few sub-options will be displayed beneath. For each color model 3 sliders depicting the current combination values and for PMS and COPIC values, the numeric values. You can use the slider to change the color values in color models or type in new numeric values for PMS and COPIC if desired. Each action will cause a change in the color of the respective color bar and also in the hex value displayed at the bottom. The 2-way arrow is a toggle button that lets you lock – unlock that color. The camera icon lets you upload an image or provide the URL of an image from which you wish to choose a specific color and find a matching palette. The lock icon depicts if the color is locked or unlocked.

If at any point you think you’ve made a change you don’t like, hit on the ‘UNDO’ button from the top-right menu to reverse your action. You can also choose to alter other aspects of the color palette by clicking on the ‘REFINE’ button. Clicking on it will reveal 4 options:

  • Hue
  • Saturation
  • Brightness
  • Temperature

Each of these options will have buttons to increase / decrease their set values. As with the previous options, all actions will cause the color of color bars and their hex values to change. The only difference with these options being that these affect all bars at once whereas the previous set of options were specific to each color bar.

coolors2

Once you’re satisfied with the palette you’ve created / modified, you can export it by clicking on the ‘EXPORT’ button. Clicking on the button provides you with another set of options in which to save your palette:

  • Copy URL
  • PDF
  • PNG
  • SCSS
  • SVG
  • COPIC

If you wish to make alterations to the palette in the future, copy its URL. The URL will let you access it instantly without any login required. To save your color palette offline and share with other, save it as PNG, PDF, SVG, etc.

In order to save your color palettes within the Coolors app, you’ll need to create a free account. Signing up is easy and quick. Once logged in, you can view all color palettes you’ve created and can save new ones for later use.

Browser

The other way you can use Coolors is through the color palette browser. Click on the ‘BROWSER’ button from the main menu to see all color palettes generated by users. You can choose to ‘Resave’ a palette to your account, ‘Export’ another user’s palette or ‘View’ it in detail.

Tool Pricing

While the browser version of the application is free, you’ll need to pay if you wish to use the app on your Android or Apple device or as an Adobe add-on. The prices for each are very nominal though and completely justified for an app that’s so helpful and totally cool.

  • The easiest way to pick the right color set for your website graphics is here: coolors.co/ @coolors_co via @supermonitoring

    Tweet this

Time to sum it up

We’ve already mentioned all the plus points of the app and as far as the negatives are concerned, there really aren’t any. Bottom line – if you’re a web designer or a photographer looking for interesting and out of the box color suggestions, do check out Coolors; you’ll be beyond delighted!

Present your designs in style with Prevue.it

Are you a designer? Do you make or review hundreds of designs each month? Is sharing your designs with clients mostly an email only job requiring heavy attachments that sometimes fail to attach? Do you wish there was an easier way?

Okay enough with the barrage of questions! But on a serious note, if for you, the answer to the questions above is ‘Yes’, you’ll be delighted with what we have in store for you. A brilliant online tool that allows designers to upload their designs as presentations (we did mention the style bit right?), share them with clients (gone are the days of PDF or email sharing) and get immediate client feedback (cool like social networking!). Excited yet?

prevue

Prevue – Design styling for pros

Could the name be any more appropriate? Prevue allows your clients to ‘preview’ your designs as presentations and leave their suggestions and feedback at one easy-to-understand-and-use online platform. This makes the design phase of the Project Lifecycle easier and much more fun. This unique tool gives the whole usually lengthy task a new feel and style thus making work better.

Here’s what makes Prevue so irresistible:

  • Allows designers to upload their designs (as images) through simple drag-and-drop into their library from where they can view each image in full screen.
  • Allows creation of projects and client groups where all designs can be accumulated as work-in-progress thus making collaboration easier.
  • By way of adding comments to projects and images, clients can leave quick and direct feedback.
  • Stylized editing options like retina, auto-crop background, control positioning, color etc. enable you to make sure your designs catch the clients’ eyes at first glance.
  • Allows presenting designs from any browser, thus eliminating the need to install necessary software at client location.
  • Allows you to create branded designs by applying your agency logos on all your work.
  • Enables you to invite your team to the platform to manage feedback and images in your library or just see the work-in-progress in real time.

prevue1

Here’s how to use Prevue

To start using Prevue, create an account. The sign-up is free and easy and can be done by clicking on any of the large convenient buttons on the home page. Just punch in your email address and a password and hit enter. You’ll be welcomed to the platform with a pleasant pop-up and a message reminding you to drag your Prevue profile link to your bookmarks. Neat!

A free account entitles you to upload up to 30 images to your profile. Drag-and-drop images from your computer to the middle of the screen to upload them. You can also click on a ‘cloud with an upward arrow’ sign or on the ‘+’ sign next to the word ‘Images’ to browse and upload images. There is, however, a catch here. You can upload images only less than 5MB in size. Unfortunately, this is not mentioned anywhere on the website, not even on the Help page. We had to learn this through trial-and-error.

Once an image is uploaded, it can be edited / replaced, renamed or deleted. These options can be accessed through a settings icon beneath each image. Click on it and choose what you wish to do with the image. If you choose to edit the image, you’re redirected to a page with these editing options for the image:

  • Distance from top (e.g, Top or 10px)
  • Horizontal position (left, center, right)
  • Background color (choose from a palette or let the tool auto-detect)
  • Background image (none, use an image, Smart Crop)
  • Enable Retina

Once you’ve done the desired changes, click on Save (you’ll see an option to select ‘view after saving’ on hovering on the Save button) or simply hit enter. Another loophole here was the absence of an Undo button if you would like to reverse a change. Of course, exiting without saving reverses all changes, a convenient Undo button would eliminate the need to go back and enter edit mode again.

In addition to the above mentioned options, you can also choose to Share the image (through a copy-able URL or through Tweet), Move it to a project, Rename it or Delete it. Moreover, forward and backward arrows toward the upper right side of the screen allow you to smoothly switch between images and open them in the editor directly.

On the left hand side of the screen, you’ll always see the options to go back to the Home screen, upload more images, add images to projects (option visible from within a project), create a client, and view your timeline. Each term is self-explanatory and the associated operation easy to understand. Additionally, once you’ve created a project and added images to it, you can choose to:

  • Manage Project
  • Edit Images
  • View Project Stats
  • View Feedback
  • View / Edit Project Settings

All-in-all, there’s a lot to play around with once you’re inside.

prevue2

Pros VS Cons

Though they’re pretty evident by now, here are the plus points compared to the minus points at a glance:

Pros

  • Simple to use
  • Affordable
  • Improves collaboration
  • Easy feedback process
  • Allows presenting designs from within browser
  • Allows you to brand your work by applying logos
  • Sufficient project management options appropriate for a design sharing platform

Cons

  • Image up to 5MB can be uploaded, so not much of an advantage over the email/PDF attachment size limit
  • No indication of the maximum size of image that can be uploaded
  • No Undo button within the editing area
  • More editing options can be added
  • Present your designs to clients from within the browser with @prevueit prevue.it/ via @supermonitoring

    Tweet this

To sum it up

Trust us. The simplicity, utility and affordability of the tool will blow you away, despite its minor drawbacks. Try it out for a free 14 days if you’re unsure. If you like it, shelling out $10 a month would be something you happily do for a tool that’s so cool!

Reviews of Web Tools for Web People

  • Your website is down!
  • Get notified of new reviews


  • Follow us


  • Browse Categories


  • Your website is down!

    check customer browser