diff --git a/docs/Manual/assets/change-colors.png b/docs/Manual/assets/change-colors.png index 39cfc51..10c8c65 100644 Binary files a/docs/Manual/assets/change-colors.png and b/docs/Manual/assets/change-colors.png differ diff --git a/docs/Manual/assets/layer-options.png b/docs/Manual/assets/layer-options.png index c237c73..3a06a76 100644 Binary files a/docs/Manual/assets/layer-options.png and b/docs/Manual/assets/layer-options.png differ diff --git a/docs/Manual/assets/startup.png b/docs/Manual/assets/startup.png index 8eafe91..064c339 100644 Binary files a/docs/Manual/assets/startup.png and b/docs/Manual/assets/startup.png differ diff --git a/docs/Manual/assets/tool-circle.png b/docs/Manual/assets/tool-circle.png new file mode 100644 index 0000000..6facabf Binary files /dev/null and b/docs/Manual/assets/tool-circle.png differ diff --git a/docs/Manual/assets/tool-flood-fill.png b/docs/Manual/assets/tool-flood-fill.png new file mode 100644 index 0000000..88e49c4 Binary files /dev/null and b/docs/Manual/assets/tool-flood-fill.png differ diff --git a/docs/Manual/assets/tool-gradient.png b/docs/Manual/assets/tool-gradient.png new file mode 100644 index 0000000..430e6fb Binary files /dev/null and b/docs/Manual/assets/tool-gradient.png differ diff --git a/docs/Manual/assets/tool-magic-wand.png b/docs/Manual/assets/tool-magic-wand.png new file mode 100644 index 0000000..7bf6eb1 Binary files /dev/null and b/docs/Manual/assets/tool-magic-wand.png differ diff --git a/docs/Manual/manual.pdf b/docs/Manual/manual.pdf index 537d49b..f5df701 100644 Binary files a/docs/Manual/manual.pdf and b/docs/Manual/manual.pdf differ diff --git a/docs/Manual/manual.tex b/docs/Manual/manual.tex index 75b0767..d243e1d 100644 --- a/docs/Manual/manual.tex +++ b/docs/Manual/manual.tex @@ -10,7 +10,7 @@ \usepackage{graphicx} \usepackage{svg} -\title{intelliPhoto 0.31 - Manual} +\title{intelliPhoto 0.8 - Manual} \author{Paul Norberger \& the intelliPhoto team} \begin{document} @@ -18,17 +18,16 @@ \maketitle \thispagestyle{empty} \begin{center} -\includegraphics[width=0.35\linewidth,keepaspectratio]{assets/icon} +\includegraphics[width=0.18\linewidth,keepaspectratio]{assets/icon} \end{center} \tableofcontents \end{titlepage} \section{Introduction} -intelliPhoto is a software for creating and editing graphics of various kinds. While it allows for work with a full color space, it will also allow export in a more restriced format, which uses 1 byte per pixel. Currently its in its early stages of development and has a very limited array of tools as well as a functional, but barebones interface. This will change in future versions. -Currently the following features are implemented, which will be described in further detail on the following pages: +intelliPhoto is a software for creating and editing graphics of various kinds. It uses 1 byte per pixel and is ideal for cases where this sort of limitation is required, because of various reasons, we will not go into. It has an extensive feature set, which includes, but is not limited to: \begin{itemize} -\item A barebones user interface +\item An advanced, highly usable user interface \item Loading and Saving images from and to standardized formats (such as .png, .bmp or .jpg) -\item Drawing with a pen with adjustable width and color, clearing the whole canvas with one color and drawing lines, rectangles, circles and polygons as well as flood filling adjacent pixels +\item Drawing with a pen with adjustable width and color, clearing the whole canvas with one color and drawing lines, flood-filling similiar pixels, creating rectangles, circles and polygons \item A layer structure, that allows for creating, deleting, moving and changing the order of layers \end{itemize} @@ -38,15 +37,13 @@ After startup the following window opens: \includegraphics[width=0.55\linewidth,keepaspectratio]{assets/startup} \end{center} -\subsection{Loading images} +\subsection{Image setup} +\subsubsection{Loading images} To load a preexisting image, click on \texttt{File} in the top menu bar and then on \texttt{Open...} in the appearing context menu. -\begin{center} -\includegraphics[width=0.3\linewidth,keepaspectratio]{assets/file-open} -\end{center} A file explorer window opens. Navigate to the image you want to open and click on \texttt{Open} or the equivalent in your system language. The image will now be imported and displayed. -\subsection{Saving images} +\subsubsection{Saving images} To save the current canvas as an image, click on \texttt{File} in the top menu bar then hover over \texttt{Save As} and click on your preferred file format in the appearing context menu. \begin{center} \includegraphics[width=0.3\linewidth,keepaspectratio]{assets/file-save} @@ -54,57 +51,69 @@ To save the current canvas as an image, click on \texttt{File} in the top menu b A file explorer window opens. Navigate to your preferred save location, input a file name and click on \texttt{Save} or the equivalent in your system language. The image will be saved at that location in the selected file format. -\subsection{Setting the active layer} -The active layer is the layer you are currently editing. To change it, you currently have to specify the index of the layer under \texttt{Layer > select Active...}. +\subsection{Working with layers} +\subsubsection{Creating a new layer} +To create a new layer, simply navigate to \texttt{Layer > Create Layer} and select the type of layer you want. Afterwards popups will appear, which will allow you to specify width and height of this new layer. +For Shaped Layers you afterwards have the option to specify the bounding polygon. To do this simply navigate to \texttt{Layer > Select Polygon Data} and create the polygon by clicking on the edge points on the canvas. The description of the usage under "Using the polygon tool" might help you. -\subsection{Setting the main and secondary color} -The main and secondary color are a concept used by all the drawing tools. You select them independendly of other tool parameters under \texttt{Tools > Color}. -\begin{center} -\includegraphics[width=0.3\linewidth,keepaspectratio]{assets/change-colors} -\end{center} -The appearing popup will allow you to specify a new color. +\subsubsection{Setting the active layer} +The active layer is the layer you are currently editing. To change it, you currently have to specify the index of the layer under \texttt{Layer > Set Active}. -\subsection{Switching main and secondary color} -An often desired use case is to switch the main and secondary color. So that you don't have to this manually, which would be time consuming there is an easy command to do it under \texttt{Tools > Color}. -It is also bound to the keyboard shortcut \texttt{Ctrl+Shift+S}. - -\subsection{Drawing with the pen tool} -To activate the pen tool simply select it under \texttt{Tools > Pen}. You will be prompted to input the pen width, just put in the width you desire. -\begin{center} -\includegraphics[width=0.2\linewidth,keepaspectratio]{assets/tool-pen} -\end{center} -To edit the active layer with the pen tool simply click and hold the left mouse button while hovering the layer on the canvas. When you click within the boundaries of the active layer, the pixels in the radius you selected will change their color to the main color which you selected under the section above. - -\subsection{Drawing straight lines} -To activate the line tool select it under \texttt{Tools > Line}. You will be prompted to input the line width. -To draw a line you now have to left click on the starting point on the canvas, hold it pressed and move to the end point and release the mouse button. - -You can cancel this operation at any time by clicking the right mouse button while holding the left and then releasing both. - -\subsection{Fill the active layer in one color} -To fill the whole layer with the main color, you first specify the color on the right side of the picture. - -\begin{center} -\includegraphics[width=0.3\linewidth,keepaspectratio]{assets/tool-plain} -\end{center} - -\subsection{Moving layers} -The layers are flexible and can be moved to a different position on the canvas, their order can be changed at will. For this you can use the movement options under \texttt{Layer}. Keep in mind that the changes always only effect the active layer you have chosen in the section "Setting the active layer". +\subsubsection{Moving layers} +The layers are flexible and can be moved to a different position on the canvas, their order can be changed at will. For this you can use the movement options under \texttt{Layer}. Keep in mind that the changes always only effect the active layer you have chosen in the section "Setting the active layer". You can also alternatively use the shortcuts displayed unter this subsection. \begin{center} \includegraphics[width=0.3\linewidth,keepaspectratio]{assets/layer-options} \end{center} -\subsection{Creating and deleting layers} -Raster Layers can be created at will under \texttt{Layer > New Layer...} You will be prompted to input the width and height of the new layer. Afterwards it will be created. -\begin{center} -\includegraphics[width=0.3\linewidth,keepaspectratio]{assets/create-layer} -\end{center} -To delete the active layer you have to click on \texttt{Delete Layer...} in the same submenu. - -\subsection{Transparency and layers} +\subsubsection{Transparency and layers} Layers can also be made more or less transparent under \texttt{Layer > set Alpha}. Values between 0 and 255 are valid. There is currently no error handling and this can lead to memory leaks, so be careful. This also only effects the active layer. +\subsection{Color Management} +\subsubsection{Setting the main and secondary color} +\begin{center} +\includegraphics[width=0.3\linewidth,keepaspectratio]{assets/change-colors} +\end{center} +The main and secondary color are a concept used by all the drawing tools. You can set them individually, by clicking on the corresponding color icon on the right-hand-side toolbar, besides the canvas. The left color icon is for the main color, the right color icon for the secondary color. +After the click, a popup will appear. The popup will allow you to specify a new color. + +\subsubsection{Switching main and secondary color} +An often desired use case is to switch the main and secondary color. So that you don't have to this manually, which would be time consuming there is an easy command to do it under the color icons on the right-hand-side toolbar, besides the canvas. +It is also bound to the keyboard shortcut \texttt{Ctrl+Shift+S}. + +\subsubsection{Drawing with the pen tool} +To activate the pen tool simply click on the pen tool icon on the right-hand-side toolbar. +To edit the active layer with the pen tool simply click and hold the left mouse button while hovering the layer on the canvas. When you click within the boundaries of the active layer, the pixels in the radius you selected will change their color to the main color which you selected under the section above. + +\subsubsection{Drawing straight lines} +To activate the line tool just click on the line tool icon on the right-hand-side toolbar. +To draw a line you now have to left click on the starting point on the canvas, hold it pressed and move to the end point and release the mouse button. The width of the edge can be specified under \texttt{Width} in the right-hand-side toolbar. + +\subsubsection{Drawing circles} +To activate the circle tool just click on the circle tool icon on the right-hand-side toolbar. +To create a circle you now have to left click and drag from the wanted center point, to some point on the edge of the circle you want, the circle will be previewed. You can release the mouse button after you are satisfied. Otherwise you can also click on the right mouse button while still holding the left one to cancel the operation. +The main color dictates the color of the edge, while the secondary color is used for the inside of the circle. If you want the inside to be transparent you can set the transparency on the side under \texttt{Inner Alpha} in the range between 0 (completely transparent) to 255 (completely opaque). The width of the edge can be specified under \texttt{Width}. + +\subsubsection{Drawing rectangles} +To activate the rectangle tool click on the rectangle tool icon on the right-hand-side toolbar. +To create the a rectangle you now have to left click and drag form one wanted corner point to the other corner point diagonal from the starting point, the rectangle will be previewed. You can release the mouse button after you are satisfied. +Otherwise you can also click on the right mouse button while still holding the left one to cancel the operation. +The main color the color of the edge, while the secondary color is used for the inside of the recangle. If you want the inside to be transparent you can set the transparency on the side under \texttt{Inner Alpha} in the range between 0 (completely transparent) to 255 (completely opaque). The width of the edge can be specified under \texttt{Width}. + +\subsubsection{Drawing polygons} +To activate the polygon tool click on the polygon tool icon on the right-hand-side toolbar. +To create the polygon you now have to left click on each of the corner points you want for your polygon in the order you want them to connect. +After you've all the points added, click close to the starting point you chose (You can see it in the preview.) to close up the polygon. You can end this process at any point by clicking the right mouse button. +The main color dictates the color of the edge, while the secondary color is used for the inside of the polygon. If you want the inside to be transparent you can set the transparency on the side under \texttt{Inner Alpha} in the range between 0 (completely transparent) to 255 (completely opaque). The width of the edge can be specified under \texttt{Width}. + +\subsubsection{Using gradients} +To activate the gradient tool just click on the gradient tool icon on the right-hand-side toolbar. The gradient interpolates linearly from the main color to the second hand color. To change them refer to the section "Setting the main and secondary color". +The use of this tool is very similiar to the line tool: Simply click and hold on the starting point of the gradient, move to the end location and release the mouse button. The pixels on the active layer will change accordingly. + +\subsubsection{Fill the active layer in one color} +To activate the plain tool just click on the plain tool icon on the right-hand-side toolbar. +Afterwards you simply click inside of the canvas to fill the active layer with the main color. + \subsection{Closing the program} To close the program you have to execute the exit program routine, which heavily depends on your operating system. Usually you can find a red cross symbol at the top right, though it may be different depending on your setup. For Windows 10, the desired symbol looks like this when hovered: @@ -113,11 +122,4 @@ For Windows 10, the desired symbol looks like this when hovered: \end{center} Alternatively you can press \texttt{CTR+Q}. -\section{Next steps} -The following features are currently high priority and will be implimented in the near future: -\begin{itemize} -\item Refactoring the code, improving readability, structure and the dev documentation -\item Improving the UI and integrating all the tools in it -\end{itemize} - \end{document} \ No newline at end of file