The editor

The editor is where every design is made. This page is a tour of the workspace so you know where each tool lives and how to move around. Open it at qurangallery.com/studio/editor.

The layout

The workspace has four main regions:

Region	What’s there
Left sidebar	Your toolbox — tabs for adding content: Elements, Text, Media, Quran, and more.
Top bar	The tools for whatever element you currently have selected, plus the design name and a save indicator, the Layers button, and undo/redo.
Canvas	The centre stage — your artboard, with rulers along the top and left edges.
Bottom bar	Canvas size, undo/redo, Preview, the Help & Shortcuts button, and the Share and Export buttons.

There’s no separate File menu — saving is by Ctrl+S (see Saving, exporting, and sharing). The Properties controls for the selected element open from the selection tools in the top bar (the Effects button) or with the g then p shortcut.

The left sidebar (your toolbox)

The left sidebar is a strip of tabs. Each opens a panel for adding a kind of content:

Tab	What it’s for
Elements	Shapes, lines, and icons.
Text	Add text boxes and pick text styles.
Media	Two tabs — Library searches free stock photos, Uploads holds images you add yourself.
GIPHY	Search animated stickers and GIFs.
QR Code	Generate a QR code.
Widgets	Live elements like the time, date, and weather.
Data	Bring in your own data from a list to fill repeated elements.
Brand Kit	Save your own colours, fonts, and logos for reuse.
Apps	A hub of mini-tools: generators (QR code, barcode, charts, tables), Islamic apps (prayer times, Hijri calendar, 99 Names, geometric patterns), web embeds (websites, videos, maps), and utilities.
Quran	Insert Qur’an verses — pick a surah, juz, or hizb and a verse range, and choose the Arabic script.
Templates	Browse ready-made designs to start from.

The left panel stays put as a stable toolbox — selecting an object doesn’t replace it. To reach an object’s detailed settings, use the tools in the top bar or open the Properties controls (the Effects button, or the g then p shortcut).

The canvas background isn’t a left-sidebar tab — open it from the Background tool in the top bar to set the background colour, gradient, or pattern.

Selecting and moving

• Select — click any element on the canvas.
• Multi-select — hold Shift and click several elements, or drag a box around them.
• Move — drag a selected element. Hold Shift while dragging to keep it on a straight horizontal or vertical line.
• Nudge — with something selected, press the arrow keys to move it 1 pixel at a time, or Shift + arrow to move 10 pixels.
• Resize — drag the handles around a selection. Hold Shift to keep its proportions.
• Rotate — drag the rotate handle above the selection. Hold Shift to snap to 15° steps.
• Edit text — double-click a text element to start typing; press Escape when done.
• Deselect — click an empty part of the canvas, or press Escape.

Zoom and pan

• Zoom — scroll to zoom in and out, or use the floating zoom controls on the right edge of the canvas (a plus and minus, with the current zoom level in between).
• Zoom presets — click the zoom-level percentage on those floating controls to choose Fit to screen, Fill viewport, or 100%.
• Fit to screen — fits the whole canvas in view (Ctrl+0).
• Actual size — shows the design at 100% (Ctrl+1).
• Pan — hold the Space bar and drag to slide the canvas around, or switch on the Hand tool (H).

The rulers along the top and left edges show measurements as you work, which helps when placing things precisely.

Undo and redo

Every change is tracked, so you can always step back.

• Undo — Ctrl+Z, or the undo button in the top bar.
• Redo — Ctrl+Shift+Z.

Studio keeps a deep history, so you can undo many steps back through a session.

Arrange: align, group, lock, order

Once you have a few elements, these tools keep them tidy. They live in the Properties panel sections and the top-bar tools, and most have shortcuts.

Align and distribute

Select two or more elements, then align their edges or centres:

• Align — left, centre, right (horizontal); top, middle, bottom (vertical).
• Distribute — space several elements out evenly, horizontally or vertically.
• Tidy up and remove gaps help arrange a set neatly.

When multiple elements are selected you can also choose what to align to — the canvas, the selection as a whole, or one key object.

Snapping, grid, and guides

Studio helps things line up while you drag:

• Snap to objects — elements snap to the edges and centres of nearby elements.
• Snap to grid, snap to guides, snap to artboard, and snap to pixel — keep things aligned to the grid, your guides, the canvas edges, or whole-pixel positions.
• Angle snap — rotation snaps to set angles.
• Grid — turn on a visible grid and choose its size and style.
• Guides — add guide lines to align against, and lock them so they don’t move by accident.

Group, lock, and order

• Group (Ctrl+G) — combine elements so they move and scale together. Ungroup with Ctrl+Shift+G. Double-click a group to step inside and edit one piece.
• Lock — lock an element so it can’t be moved or changed by accident; unlock it the same way.
• Order (stacking) — bring an element forward or send it backward so it sits in front of or behind others. Use Ctrl+] / Ctrl+[ to move one step, and Ctrl+Shift+] / Ctrl+Shift+[ to jump to the very front or back.

The Layers panel gives you the full stack as a list — see Effects, layers, and pages.

Keyboard shortcuts

Studio is built to be fast from the keyboard. Open the Help & Shortcuts panel from the bottom bar (or press ?) to see the full, grouped reference. The most useful ones:

Group	Action	Keys
General	Save	Ctrl+S
General	New design	Ctrl+N
General	Open a design file	Ctrl+O
General	Deselect / exit drawing	Escape
Tools	Select / move tool	V
Tools	Add text	T
Tools	Add rectangle	R
Tools	Add ellipse	O
Tools	Add line	L
Tools	Eyedropper (pick a colour)	I
Tools	Hand / pan tool	H
Selection	Select all	Ctrl+A
Selection	Copy · Cut · Paste	Ctrl+C · Ctrl+X · Ctrl+V
Selection	Paste in place	Ctrl+Shift+V
Selection	Duplicate	Ctrl+D
Selection	Delete	Delete
Transform	Nudge 1px · 10px	arrows · Shift+arrows
Transform	Flip horizontal · vertical	Shift+H · Shift+V
Layers	Group · Ungroup	Ctrl+G · Ctrl+Shift+G
Layers	Move forward · backward	Ctrl+] · Ctrl+[
Layers	Lock · Show/hide	Ctrl+Shift+L · Ctrl+Shift+H
Canvas	Pan	Space+drag
Canvas	Zoom in · out	Ctrl+= · Ctrl+-
Alignment	Align left · right · top · bottom	Alt+A · Alt+D · Alt+W · Alt+S
Alignment	Centre horizontal · vertical	Alt+Shift+H · Alt+Shift+V

The keys shown use Ctrl. On a Mac, use Cmd in its place. The in-app Help & Shortcuts panel always shows the bindings for your device, plus the text and navigation shortcuts not listed here.