Capture web page whole size

  • F12 – Browser developer mode
  • Ctrl + shift + P
  • Popup appear
  • Write there “Screen” or “Capture”
  • Find “Capture full size screenshot”

Snipping tools

  • The following tools used to capture t opicture the screen of part of it
    1. From within windows run snipping tool.
    2. LightShot
    3. GreenShot

Screen recorder (video)

  • VSDC Video editor
  • Flashback Express
    • Download Flashback express.
    • Install
    • Record your screen to video.
    • Recorded Video will have fbr extension.
    • Open the fbr file and export it to wmv video file.
  • CamStudio
    • Free Desktop Recorder Streaming Video Software
  • Captura
    • Capture Screen, WebCam, Audio, Cursor, Mouse Clicks and Keystrokes
  • Screencastify – Screen Video Recorder
    • Chrome extension, screen, webcam video recorder.
  • Zoom
    • Create instant meeting and save the recording.
    • There are many graphing tools while presenting.

Clipboard tool

  1. Pixlr – A free online image editor. Enables to fix, adjust, and filter images in a browser
  2. Befunky – Produce stunning photographs and captivating designs with fun, easy-to-use editing tools.
  3. Canva –  makes design simple for everyone. Create designs for Web or print: blog graphics, presentations, Facebook covers, flyers, posters, invitations and so.
  4. Photopea–  Great online photoshop alternative.
  5. EPIC PEN – DRAW WRITE HIGHLIGHT DIRECTLY OVER SOFTWARE VIDEO WEBPAGES GAMES.
  6. UMLET – FREE UML TOOL FOR FAST UML DIAGRAMS.
  7. DRAW.IO – GREAT DIAGRAMMING TOOL

Description

Epic Pen lets you draw, write or highlight directly over software, video, webpages or games. Unlike many other annotation tools we don’t just screenshot your desktop, we let you edit it live. Our easy to use software is great for business, academics and creatives alike. Make notes, give feedback, improve video tutorials & presentations or just get creative!

Epic Pen Web Site

Categories

Features

  • Easy to use
  • Lightweight Install
  • Hotkey Support
  • Pen pressure Support
  • Touch Compatibility
  • Allows Click-through
  • Multi monitor support

http://epic-pen.com/

How to Open Adobe Illustrator .ai File in Paint.NET:

  • Download Ghostscript software and install it on your system.
  • Download zip file Illustrator Encapsulated PostScript plugin for Paint.NET and extract  it.
  • Go to the location where you have installed Paint.NET on your system and open folder named FileTypes.
  • Copy and paste all the extracted files (step 2) to the location mentioned in step 3.

This is a filetype plugin for Paint.NET that enables both loading and saving of Photoshop .PSD files. It was originally written by Frank Blumenberg in 2006, and has been maintained by Tao Yue since 2010.

https://psdplugin.codeplex.com/

How to install the plugin

  1. Make sure you have Paint.NET 4.0 or later installed.  (Check this in Help-About.)
  2. Close Paint.NET.
  3. Open the ZIP file, and then copy PhotoShop.dll to: C:\Program Files\paint.net\FileTypes
  4. Restart Paint.NET, which will automatically detect the PSD filetype plugin.

Paint.NET file open dialog box, showing Photoshop as a file format option

 

Features

The plugin can load and save the following features of Photoshop .PSD files with no loss of fidelity:

  • RGB images
  • Color depth of 8 bits per channel
  • Raster images with no use of vector features
  • Layers, using the common blend modes
  • (Optional) RLE compression

In this way, you can use the plugin to exchange work between Paint.NET and other programs. This is especially important since Paint.NET preserves layers only for the default .PDN format — other file formats are flattened on save. The .PSD file format thus offers the best way to preserve layers when editing an image in multiple graphics programs.

The Photoshop .PSD file format is a de facto standard in the graphics industry. In addition to the Adobe Creative Suite, many non-Adobe programs can also read the PSD format: Autodesk Sketchbook, 3ds Max, The GIMP, Microsoft Expression Design, etc.

What if my .PSD file doesn’t load or save properly?

Paint.NET is ultimately a much less complex application than Photoshop. There will be features that do not translate over. If your file fails to load or looks different in Paint.NET than it does in Photoshop, please see:

If you still have problems or questions after reading the above, please feel free to:

  • Contact me via email
  • Post in the PSD filetype plugin thread on the official Paint.NET forums
  • File a bug in the Issue Tracker on Codeplex

Links may be found at the top of this page. In all cases, please attach the .PSD file so that I can further investigate the problem.

User feedback is directly responsible for most of the improvements made to the PSD filetype plugin. The PSDPlugin has been downloaded over 400,000 times from Codeplex.  Thus, even a small bugfix could potentially help out a lot of other people. So please, don’t hesitate to write in!

Paint.NET is free image and photo editing software for PCs that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins.

Download it from here

Plug-ins

Keywords

Paint, Paint.Net, Paint .Net, Plugins, Plug-ins, Plug ins, Graphics, Grafix

EASILY CREATE STUNNING ANIMATED CHARTS WITH CHART.JS
BY SARA VIEIRA · JAVASCRIPT · NOV 4, 2013
Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly, but they’re not always easy to create.
A great way to get started with charts is with Chart.js, a JavaScript plugin that uses HTML5’s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more, incredibly easy.
To see how to use chart.js we’re going to create a set of 3 graphs; one will show the number of buyers a fictional product has over the course of 6 months, this will be a line chart; the second will show which countries the customers come from, this will be the pie chart; finally we’ll use a bar chart to show profit over the period.

SETTING UP
The first thing we need to do is download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

Chart.js demo
DRAWING A LINE CHART To draw a line chart, the first thing we need to do is create a canvas element in our HTML in which Chart.js can draw our chart. So add this to the body of our HTML page: Next, we need to write a script that will retrieve the context of the canvas, so add this to the foot of your body element:
(We can actually pass some options to the chart via the Line method, but we’re going to stick to the data for now to keep it simple.)
Inside the same script tags we need to create our data, in this instance it’s an object that contains labels for the base of our chart and datasets to describe the values on the chart. Add this immediately above the line that begins ‘var buyers=’:
var buyerData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”],
datasets : [
{
fillColor : “rgba(172,194,132,0.4)”,
strokeColor : “#ACC26D”,
pointColor : “#fff”,
pointStrokeColor : “#9DB86D”,
data : [203,156,99,251,305,247]
}
]
}
If you test your file in a browser you’ll now see a cool animated line graph.

DRAWING A PIE CHART
Our line chart is complete, so let’s move on to our pie chart. First, we need the canvas element:

Next, we need to get the context and to instantiate the chart:
var countries= document.getElementById(“countries”).getContext(“2d”);
new Chart(countries).Pie(pieData, pieOptions);
You’ll notice that this time, we are going to supply some options to the chart.
Next we need to create the data. This data is a little different to the line chart because the pie chart is simpler, we just need to supply a value and a color for each section:
var pieData = [
{
value: 20,
color:”#878BB6″
},
{
value : 40,
color : “#4ACAB4”
},
{
value : 10,
color : “#FF8153”
},
{
value : 30,
color : “#FFEA88”
}
];

Now, immediately after the pieData we’ll add our options:
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
These options do two things, first they remove the stroke from the segments, and then they animate the scale of the pie so that it zooms out from nothing.

DRAWING A BAR CHART
Finally, let’s add a bar chart to our page. Happily the syntax for the bar chart is very similar to the line chart we’ve already added. First, we add the canvas element:

Next, we retrieve the element and create the graph:
var income = document.getElementById(“income”).getContext(“2d”);
new Chart(income).Bar(barData);
And finally, we add in the bar chart’s data:
var barData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”],
datasets : [
{
fillColor : “#48A497”,
strokeColor : “#48A4D1”,
data : [456,479,324,569,702,600]
},
{
fillColor : “rgba(73,188,170,0.4)”,
strokeColor : “rgba(72,174,209,0.4)”,
data : [364,504,605,400,345,320]
}

]
}
As you can see, the data is largely the same, except this time we’ve chosen to use RGBA to specify our colors which allows us to add transparency.

CONCLUSION
You can view a demo of this in action here, and if you prefer copy and paste, here is the full script:

Chart.js demo

The great things about Chart.js are that it’s simple to use and really very flexible. Plus, once you’ve mastered the basics here, you’ll discover that there are tons of options

No Link License Platform More info
1 Highsoft Workshow Commercial
2 Chart.JS Open Source Javascript
3 D3.JS Open Source Javascript D3 Gallery
4 Chartist.JS Open Source Javascript
5 Dimple Open Source Javascript Dimple Examples
6 Flot Open Source Javascript/JQuery Flot Examples
7 Sencha Ext.JS Commercial Javascript Sencha Examples
8 pChart Commercial, Free for non profit PHP pChart Examples
9 Google Charts Free Javascript
10 jChartFX Commercial
11 NVD3  Free  Javascript
12 PHPChart  Free  PHP
13 AMCharts  Commercial
14 ZingChart  Commercial

16 JavaScript Libraries for Creating Beautiful Charts

10+ Free jQuery Libraries for Interactive Charts and Graphs

5 Tools for Creating Amazing Online Charts

 

 

3 Simple steps to display Graph with Chart.JS 

First download chart.js

Step 1: Create HTML Template:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Chart.js demo</title>
    <script src='Chart.min.js'></script>
  </head>
  <body>
  
  </body>
</html>
Step 2: Add Canvas:: 
<!DOCTYPE html> <html lang="en">
   <head>
     <meta char////set="utf-8" />
     <title>Chart.js demo</title>
     <script src='Chart.min.js'></script>
   </head>
   <body>
    <canvas id="LineGraph1" width="600" height="400"></canvas>
  </body>
 </html>
Step 3: Add Script:
(Download demo here Chart.js.Demo)
<!DOCTYPE html> <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Chart.js demo</title>
     <script src='Chart.min.js'></script>
   </head>
   <body>
    <canvas id="LineGraph1" width="600" height="400"></canvas>
    
   <script>
       //Init the Data with colors      
       var LineGraphData = {
                          labels : ["January","February","March","April","May","June"],
                          datasets : [
                                       {
                                           fillColor : "rgba(172,194,132,0.4)",
                                           strokeColor : "#ACC26D",
                                           pointColor : "#fff",
                                           pointStrokeColor : "#9DB86D",
                                           data : [203,156,99,251,305,247]
                                        }
                                      ]
                        }

       //Bind the data to the Canvas 
       var GraphData = document.getElementById('LineGraph1').getContext('2d');       

       //Draw the graph
        new Chart(GraphData).Line(LineGraphData);

   </script>
   </body>
 </html>
The result:

Chart.js.Demo

Chart.js – Simple, clean and engaging charts for designers and developers

 

Resources:
01 - Homepage:
     http://www.chartjs.org/ 
02 - Exaples:
     http://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/
03 - 3 and a half steps for creating graphs an charts with Chart.JS:
     http://wp.flash-jet.com/4-simple-steps-to-display-graph-with-chart-js/