Posts Tagged ‘sketch’

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 ( 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 via @supermonitoring

    Tweet this


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.

Make perfect flowcharts with Lucidchart

Flowcharts are one of the basic building blocks of system design. They depict complex details of a proposed system through simple rectangular, diamond-like and circular shapes. They’re a picture that can explain a layman what a technically advanced, IC powered system would behave like when fully functional. So it is extremely important that designers who make flowcharts make them right. And that’s because when a business approver views a flowchart, that image is how he perceives the system to be. Thus, to avoid later confusions a flowchart needs to be bang-on.


If you’re sure your flowcharts are absolutely correct, good for you. If you think otherwise or would like some reassurance, trust Lucidchart to help you out. This online flowchart maker will make sure you don’t mess up the very first step of system development.

Lucidchart – draw better, depict more!

The online diagram application from Lucidchart makes it extremely easy to sketch as well as share professional flowcharts. It is compatible with a host of other programs including Google Apps and Microsoft Visio and allows users to export their diagrams to standard file formats or publish them through a convenient online viewer. The best part about Lucidchart is its ease-of-use; from a beginner to a pro, anyone can create great flowcharts through it. The tool is very intuitive; the shapes just snap together and glue a designer through the process of setting up a diagram.

There are three different types of flowcharts that can be created through Lucidchart depending upon what end-use you’re going to put them to. Here they are at a glance:

IT / Engineering

For engineering or IT systems, Lucidchart offers competent Network Diagram designing tools. The ERD (Entity-Relationship Diagram) tool of the platform helps you instantly generate database tables and schemas with GraphViz import, smart shape prompts and a multi-featured API. Lucidchart is tailor-made for technical diagrams and this focus is evident from their feature set.


Business Diagrams

With thousands of shapes and icons, instant organization charts, and bulk Visio imports and exports for business use, Lucidchart helps build business diagrams and improve productivity, build project maps, improve sales processes and customer service flows. Plus, its drag-and-drop editor gets the work done in almost half the time. Compatible with different operating systems (Mac, Windows and Linux), all you need to start using Lucidchart is a web browser.

Product Management & Design

A sophisticated graphics palette, fully customizable editor, keyboard shortcuts and master pages helps put neat product management diagrams in place. With the ability to modify grid settings, hex codes, page layout/size, fonts and even the angles of lines, Lucidchart is probably the most flexible online flowchart maker.

This is how it rolls

To experience Lucidchart, try the demos available on the portal. You can try out engineering, business or product management flowcharts through their dedicated demos. Navigate to any of these pages by clicking on the direct links to them on the homepage. Thereafter, scroll down and click on “Try the demo” button.

In the Engineering & Business demos, at first you’ll see a sample ERD on the canvas with a single entity (user_account) and various attributes. You can play around with attributes adding more or removing some by single-clicking the anywhere on the diagram to open a ‘Settings’ box. This box can also be opened through a ‘Settings’ icon on the upper-right corner of the entity box. On clicking on ‘Manage Fields’ within this box you’ll see a pop-up displaying all field names, their data-types and their Primary Key – Foreign Key status. Add or remove fields as per requirement and click ‘OK’. The attributes can also be modified by double-clicking on them directly and typing, but we suggest the pop-up method to avoid typos.

To add more entities to the diagram, click on any of the connecting points on the edge of one entity and drag it away. Release the mouse pointer at a random point on the canvas; you’ll see a prompt asking which shape you wish to add. Select the desired shape and it will appear there. At any point, you can visit customization options and tutorials from a panel on the right corner of the canvas.


You can change the diagram from an ERD to UML or Org chart or more by clicking on a ‘More Shapes’ button on the bottom-left corner of the screen. The pop-up window that opens on clicking this button also provides you the option to import Visio Stencil or Custom Shapes into the diagram. To collaborate directly through Hangouts, a convenient chat window is provided next to the ‘More Shapes’ button at the bottom and a Comment box on the upper-right corner.

In the product management demo, your drawing canvas will have a Smartphone template drawn over it with several customizable fields. Editing options, chat window and comments section are placed at the same spots with options differing for each type of diagram.

If you wish to save your diagram, you’ll need to create an account with Lucidchart first. The signup is free and quick and the tool automatically shows a reminder to do so when you haven’t saved your work after every couple of seconds.

Pros VS Cons

The pros of the tool can be easily identified through its features’ description. Add to that the ability to present your diagrams through online presentations and sharing options to boost collaboration.

The cons include:

  • Dragging and dropping stuff to add it to the diagram depends on the speed of the Internet connection. It can be slow to the point of not working at all.
  • Finding things is a bit difficult; nothing is right in front of you. To achieve mastery over the tool you need a lot of hit and trials.
  • The tool though affordable for a basic plan, requires a hefty investment for professional, team and enterprise plans.
  • Make, present and share better diagrams with @lucidchart via @supermonitoring

    Tweet this

Final Words

All-in-all, the concept behind the tool is great but in practice it needs a lot of improvement. It’s not perfect, but then, it’s not pathetic either.

Create cool prototypes with Marvel

A major reason behind the steep increase in the Smartphone and mobile device user base is the development and popularity of unique mobile apps. From health monitoring to party planning, shopping for clothes to groceries, today, there’s an app for everything. And keeping up with this trend, hundreds of new apps are launched every other day. If you’re thinking of becoming a part of this current scheme of events with your own app, the tool that we’re discussing in this review will be of particular interest to you.

Once you’ve done the preliminary planning for your new app including its name, purpose, functions, target audience etc., an important juncture where you land up is the look and feel of it. Developers and designers brainstorm for hours to come up with the perfect colour schemes, images, arrangements and presentations for an app before it reaches the stage of being launched. And once that is done, comes in the technical part – the actual programming to achieve what’s planned. While large organizations may be capable of affording developers who can code everything, small teams or individuals might not have that liberty. As such, learning a new programming language and dealing with it might seem like a time taking and tedious activity.


This is where mobile prototyping tools come into play. With such tools, creating a mobile app is something that doesn’t need one to be a technical guru. And in the field, Marvel stands out from its competition. Read on to know why.

Marvel – Mobile & Web prototyping made easy!

Marvel happens to be the easiest way to turn your sketches, images and mockups into realistic mobile and web prototypes without having to code. With an auto-sync option that updates changes to Dropbox in the background, all you need to focus on is the work; Marvel takes care of the rest.

With this awesome online tool you can create Apple Watch, Android, iPhone and Web prototypes easily. What’s more, you can keep the prototypes synced with Dropbox or choose to share them with friends and colleagues. With a click-done methodology to support it and leading names like Smartrecruiters, Reddit, Housing and more is its user base, Marvel is fast becoming a frequently heard name in the app prototyping circles.

Here’s a brief description of the tool’s features:

  • The key highlight of Marvel is the lack of technical expertise needed to use this tool. Regardless of whether you are a designer, entrepreneur, a startup, an agency or just a student, you’ll be able to create your app prototypes in minutes with Marvel.
  • Since the prototypes can be viewed in browsers, you can work on any device including desktop, iOS, Android etc.
  • It also makes sharing prototypes easy via email, SMS or even embedding into blogs and portfolios.
  • It lets you create as many teams as you want and of any size.
  • Getting real-time feedback is extremely easy through a direct commenting feature; it doesn’t even need you to create an account to comment.
  • Turn your prototypes into offline apps (.apk) that you can install directly to your homescreen.
  • Supports Sketch and Photoshop so you can turn your ideas on paper to ideas on the Web


How it works

The basic working of the tool is quite simple really. You sign-up with your Dropbox account and once connected, you can move straight to creating your first project.

Thereafter, you can choose to add images from your system (they can be Photoshop files [PSDs], PNGs, JPGs or GIFs) or Dropbox or Sketch. Alternatively, you can choose to take photos of your paper sketches for Android and iOS.

Once the images are uploaded, you can start linking them by hovering over the images, clicking on Edit, making desired changes and then clicking on the next image you wish to appear. You have an option to choose from a variety of edits like transitions, moving the header / footers, changing colours etc. If you want to make changes to any of the images and restart, all you need to do is change the image at your desktop or device. Marvel will then automatically update the changes to your Dropbox account and hence in your prototype too.

Once satisfied, click on ‘Close’ button on the upper right corner of the screen and then click on ‘Play’ to playback your changes. You can choose to share the prototype through a Share button on the upper right corner of the screen.
To understand the process better, you can watch a detailed demo video from the home screen.


Additional Features

In addition to creating your own prototypes you can also choose from some of the readymade prototypes available in the tool. These can be seen by clicking on the Explore button on the upper right corner of the screen. Moreover, you can choose to upload your online sketches directly from the App Store or Google Play.

Pros Vs Cons

The highlight of this tool is – no coding required. Anyone who is not even remotely related to programming can also use this tool. Apart from this, the pros of the tool are pretty much derived from its features, so there’s nothing more to add there.
There are however a few cons with this tool. While Marvel claims to be a free tool, in effect it doesn’t prove to be one since all prototypes created with the free membership contain its branding. To remove the branding, you’ll have to upgrade to one of their pricing plans. Plus, free prototypes are not private so in order to protect your secrecy, you’ll need to upgrade thus making users enter a password if they wish to view your prototype. So basically, you’ll only be able to commercially use this tool if you fish out money.

  • Create amazing mobile & web prototypes with @marvelapp via @supermonitoring

    Tweet this

Wrapping it up

All-in-all, Marvel could prove to be a revolution for you if you’d been waiting for a simple way to create ready to use mobile app prototypes. You’ll have to pay for it of course, but then what you get in return would be well worth it.

Moqups – mockup and wireframing online tool

Creating wireframes is an essential task when it comes to website designing. Wireframes help you to create simple sketches and illustrate the basic skeleton or structure of the website and its components. While cerebrating on the features we want on the website for example Homepage, Layout structure, Site components and navigational scheme, this is known as Wireframing.
Wireframing is surely going to save you time as before designing the website you’ll be creating site’s architecture, content and functionality On the other hand Prototyping is the process of creating a version of the website with full functionality and has same navigational features as the final website is expected to have. Special Prototyping tools are used to create prototypes.


One of the best tools used to create Wireframes, Prototypes, Mock ups and User interface is ‘Moqups’. This free HTML5 app is straight forward, easy to use and allows you to easily share prototypes that you create. The feasibility of using this app built on HTML5 and JavaScript makes it impressive and best in the Wireframing domain. A Google Chrome extension is also available in the Chrome App store making it easy for you to access your moqups account.

Providing a wide range of stencils and formatting options this app allows you to store the offline version of the design that you create or you may even store the design on cloud services like Google Drive or Dropbox. You are even allowed to share it through a link with your clients and colleagues.

A sample page with instructions for creating a mockup loads up quickly when you open the app. The stencil library located on the right hand side of the screen as a sidebar enables you to add components to the mockup while dragging and dropping them to the canvas. These stencils include radio buttons, slider, avatar, Rectangles and boxes, grid, iPhone, iPad, Pie chart, links, placeholder images and much more. We can change the color, states and shapes of some stencils while some stencils offer editable content on the other hand some can never be edited at all. Also, it has powerful stencil search options and with plentiful tags for the same. To annotate your wonderfully beautiful designs moqups provides a notes stencil to add descriptions, explanations and comments about designs and features of the design.


Moqups allows you to set the title as well as the height and width of your webpage and one of the most unique feature of moqups is the Grid snapping option and you can choose the size of your grid and select to snap objects to the grid for an enhanced alignment. It has smart guide feature which allows us to snap objects, align, edit and transform the objects. Moqups also allows you to lock and group various objects as per your need. It has 960 Grid System used in every part of the CSS frameworks. The 960 grid system helps the web developers by providing dimensions which are commonly used and are based on a width of 960 pixels. This grid is customizable and the dimensions can be changed according to the user requirements.

Moqups supports the Hotspot feature which allows you to link objects and elements to other pages. You can upload images using the upload images option and link them to pages using hotspot feature. Hotspot enables the user to link different prototypes together. You can use desktop keyboard shortcuts which you may already be familiar with, for example Ctrl+X for cut and Ctrl+V for paste, Ctrl+Shift+Z for redo and Ctrl+z for undo. There are many other keyboard shortcuts specialized for creating hotspots and editing stencils. These keyboard shortcuts enhance your wireframing experience and you can use the objects easily in a desktop like fashion. You can now even copy paste objects between different pages and projects making the mockup experience more comfortable.

Moqups uses secure SSL communication and all the data is backed up regularly on different servers where they are securely stored the privacy of the different projects created on moqups is taken care of seriously. It also offers markdown support too which is a text to html converter for web writers. Markdown allows you to write using an easy to use, easy to write format, then convert this plain text to structurally valid HTML or XHTML.
Moqups is free to use with or without signup. The signup procedure is very easy and hassle free you just need to have an email account. One can store up to 3 projects simultaneously on an account. While it also offers some premium features which are:

  • It offers real-time collaboration with clients and coworkers. This feature is very useful for people who work in teams to develop a certain project. Not only this, real-time collaboration with client helps the developers get reviews from the client and improve the flaws in the design according to the review. This also allows client to keep a check on the daily progress of the developer on a project.
  • Ability to leave a comment and feedback is a feature through which the client may leave a feedback for the developer when the design would be shared.
  • Master Pages for increased productivity enables you to set a basic page for all your pages which would save your time and energy while you work on different projects.
  • It allows you to create unlimited revisions on the projects which you store and even allows you to fork a new project from the current revision or branch off in a different direction as per your wish.
  • It offers Public as well as Private Projects.
    • Public Projects: Anyone having the link to the design can access it.
    • Private Projects: Only the people with whom you collaborate would be able to access the design.
  • Moqups offers unlimited archived projects to help you maintain your project quota and this may prove to be a good feature if you are planning to work on various projects at a time.

Easily create wireframes, mockups and prototypes with this free yet powerful HTML5 app: @moqups via @supermonitoring

Tweet this

The simple user interface and the ability to create wonderful wireframes this tool is earning a lot of appreciation by the web and graphic designers. As it is widely available to users free of cost and can be used instantly this app is now used popularly with over more than 30,000 unique visits daily. This Tool not only saves your time but also saves environment as you would drop down your pencils saving many trees and would love to design on this extremely pleasant and serene tool. This incredible tool deserves a 5 on 5 rating! What say?

  • Browse Categories

  • Follow us

  • Super Monitoring

    Superhero-powered monitoring of website or web application availability & performance

    Try it our for free

    or learn more