Useful Tips

How to work in Pixlr online graphics editor


The purpose of the lesson: creation of conditions for the formation of universal educational actions among students:

  • Personal:
    • the formation of a responsible attitude towards learning on the basis of motivation for learning and cognition,
    • the formation of a conscious, respectful and friendly attitude towards another person, his opinion,
    • the formation of communicative competence in communication and cooperation with peers and adults in the process of educational activity.
  • Meta subject:
    • the ability to evaluate the correctness of the educational task, its own capabilities for solving it,
    • ICT competency development.
  • Subject:
    • expand the understanding of the types of tasks for processing graphic information,
    • give students specific ideas about the program with which graphic information is processed, consider the interface of the program, introduce the tools of the graphic editor,
    • development of computer skills.

Lesson Objectives:

  • Educational:
    • systematize students' knowledge of the main types of graphic editors and their interface,
    • develop skills using the tools of the graphic editor Pixlr.
  • Developing:
    • to develop creative abilities, memory, attention, cognitive interest, communicative culture, educational and cognitive competence,
    • to form skills of free orientation in the information environment.
  • Educational:
    • to instill skills of independent work,
    • to cultivate the ability to express personal opinion and listen to the opinion of another,
    • introduce students to information culture.

Didactic software:

  • personal computers with Internet access,
  • multimedia projector,
  • Promethean interactive whiteboard
  • ActivInspire software
  • presentation editor MS PowerPoint,
  • Flipchart “Raster and vector graphics”,
  • Presentation "Pixlr Graphics Editor",
  • cartoon “Super physical culture”,
  • task "House in the village."

Lesson plan.

  1. Organizing time.
  2. Actualization of knowledge.
  3. Explanation of the new material.
  4. Securing the studied material.
  5. Summarizing the lesson.
  6. Homework.

1. Organizational moment

The teacher welcomes the students, notes absent from the electronic journal.

2. Updating knowledge

A flipchart “Raster and vector graphics” is shown on an interactive whiteboard.
The teacher encourages students to answer questions and complete assignments to determine the hardware for representing the image, to encode colors, to determine the features of raster and vector graphics, types of graphic editors, graphic file formats and areas of application for computer graphics.
- What is computer graphics?
- List the types of computer graphics.
- Determine whether the device for input or output of graphic information is each of the devices whose names are listed below. Drag the answer choices to the desired containers.

- Describe the RGB color model.
- What features of our vision are the basis for the formation of images on a computer screen?
- Set the correspondence between the color and its coordinates on the RGB cube. Move the color coordinates up and down.

- What programs work with computer graphics?
- What types of graphic editors can you highlight? Give examples. Drag the answer choices to the desired containers.

- Do you have experience in a graphical editor? If so, describe this editor.
- What are the main advantages and disadvantages of raster and vector images?
- Indicate the "pluses" of the vector and bitmap images (connect with arrows).

- How can you explain the variety of image file formats?
- Set the correspondence between raster and vector file formats (connect with arrows).

- List the main areas of application of computer graphics.
- Drag the correct answers into the container.

Students take turns going to the blackboard and completing assignments. The remaining students participate in the discussion, offer answers, substantiate them.

3. Explanation of the new material

The teacher’s explanation is accompanied by slides from the Pixlr Graphics Editor presentation.

- Pixlr service is an interactive graphic editor that allows you to create and edit images directly on the Internet, without downloading and installing any programs on your computer. The main advantages of the service are high speed, excellent image quality and the Russian menu of the editor. A large number of functions of the graphical editor make it an indispensable assistant both for solving quite serious image processing tasks requiring precise color settings and using various effects, as well as for simpler actions, for example, to create an avatar with a beautiful inscription and color underlay or to simply remove an effect red eyes from a photograph.
The workspace of the online graphic editor is made in the same way as most of the famous editors.

The slide of the presentation with the image of the working window of the Pixlr program is shown on the screen. Students are encouraged to name the main elements of this window:

Answer Options:

  • window control buttons
  • browser address bar
  • the main menu of the program,
  • toolbar
  • tool options panel
  • file name,
  • Workspace,
  • status bar,
  • zoom window (navigator),
  • layer window
  • event history window (log).

- Working in a graphical editor, you can feel like a real artist! In your hands will be various drawing tools.
The slide of the presentation with the image of the toolbar is shown on the screen.
To see a tooltip with the name of the tool, hover and hold the cursor on the icon. For each tool, you can set additional parameters. It is to configure them that the toolbar is used. The panel automatically changes depending on the selected tool.

Let's take a closer look at the drawing tools of the Pixlr graphics editor.

Pencil - a tool for drawing arbitrary lines. Unlike a brush, it does not automatically smooth out lines, thereby simulating a sharp pencil.

Brush - the choice of the thickness and appearance of the drawing surface of the pencil.
Opacity - allows you to determine the degree of transparency of the pencil relative to the background on which they draw. It is set as a percentage from 0 to 100%.

Brush - A tool for drawing smooth lines as opposed to pencil.

Brush - sets the thickness and appearance of the paint surface of the brush.
Opacity - allows you to set the degree of transparency of the brush relative to the background on which it is painted in a percentage ratio (from 0 to 100%).
Scatter - if the option is set (checked), the brush will draw with random strokes of paint along the line along which you are moving the cursor.

Eraser - allows you to erase areas of the image. If the background of the image is opaque, then when erased, these places are painted with the background color, usually white. If the image has a transparent background, then the eraser erases to transparent.

Brush - the parameter adjusts the thickness and appearance of the eraser surface.
Opacity - allows you to set the percentage of transparency of the eraser relative to the background on which they are erased.

Pouring - the tool fills (paints) certain fragments of the image with the selected color.

Opacity - sets the percentage of transparency of the fill relative to the background to which it is applied.
Tolerance - determines the sensitivity to the borders of colors.
To disperse - allows you to smooth the edges of the poured area.
Adjacent - when the state is active, when the checkbox is checked, the tool fills the closed continuous region of a certain color gamut. In the absence of a checkmark, all areas of the image having a similar color are filled.
All layers - allows you to fill on all layers at once, regardless of which layer is currently active.

Gradient - Creates a smooth transition from one color to another in the image. Gradient colors and the number of transitions can be set by yourself, or simply choose from predefined compositions. It is possible to set the type of gradient - linear or circular, depending on it, the color of the gradient in the image will change in one direction, or in all diverging circles.

Opacity - allows you to set the percentage of transparency of the gradient relative to the background on which it is layered as a percentage.
Gradient - sets the color and number of gradient transitions. Choice of ready-made gradients.
Text - allows you to choose one of two types of gradient:

  • Linear - the color of the gradient changes in one direction, from left to right along the guide.
  • Radial - the color of the gradient changes in all directions, from the center point, diverging circles, the color of which will repeat the color line of the selected gradient.

Distribution method - allows you to choose one of three ways to distribute the gradient in the image:

  • Primer - the gradient fills the region completely, using the spectrum of the given colors once.
  • Reflection - the spectrum of colors is used several times, with each next repeat of the transition being a mirror image of the previous one.
  • Reiteration - The spectrum of gradient colors is used several times, repeating the same color transitions one after another.

Mode - allows you to select one of several individual modes of mixing the gradient mask and the image to which it was applied.

Painting (Shapes) - a tool for drawing various geometric shapes (rectangles, circles and lines).

Shape Picker - only 4 types: a rectangle, a rectangle with round edges, an oval and a line.
Opacity - adjusts the percentage of transparency of the figure relative to the background on which it is drawn.
Mode - establishes a way to overlay a figure on an image.
Border size (The size - for the Line figure) - sets the thickness of the lines by which the figure is defined.
Fill in the form - if the parameter is checked, the internal area of ​​the drawn figure is painted over with a pre-selected color. The fill color is set at the bottom using the tool Set background color.
Radius (only a rectangle with round edges for a figure) - sets the value of the radius of the circles forming rounded corners.

The teacher demonstrates the launch of the Pixlr graphics editor and the work with drawing tools and their parameters.

4. Securing the studied material

Practical work “Creating a picture using the toolbar”.

The task. Create a model of the house in the graphic editor Pixlr using only drawing tools. Save the picture to a file House in the village.jpg in your folder.

You can get started with the Pixlr program at

The teacher gives recommendations on the implementation of practical work, answers questions from students.

The task is performed by students on their own. The teacher provides individual counseling upon request.

Physical education. The cartoon Superfizkultminutka (from is shown on the screen, students repeat the exercises for the cartoon hero.

The teacher encourages students to answer the questions:

  • How to draw geometric shapes: rectangles, circles and lines?
  • What settings do the tools you have studied have?
  • Tell us about the features of the Fill and Gradient tools.
  • Tell us about the features of the Eraser tool.
  • What is the difference between the Pencil and Brush tools and what is common between them?

5. Summarizing the lesson (reflection of goal achievement)

Students evaluate their activities in the lesson.

The best works are demonstrated through the projector.

The teacher analyzes student statements. Evaluates the activities of individual students and the entire subgroup, puts students' grades in an electronic journal. Evaluates the success of achieving the goal of the lesson.

Fig. 1 Pixlr Homepage

2. Follow the link Pixlr Editor

3. In the window that appears, make a choice: open an existing image or create a new one. In addition, it is possible to download Pixlr Editor on a mobile device.

Fig. 2 Start screen of Pixlr Editor

The interface consists of the following parts:

  • Command menu
  • Tool options
  • Toolbar
  • Navigation area
  • Layer area
  • Action log
  • Image Area
  • Keyboard shortcuts