Creating my personal crest in Affinity Designer and Photo

 

In this blog entry I briefly explain how I made my personal crest of which below you see the image. The main challenge was to find a way how to draw the snake's scale texture inside its winding body that also is narrower towards its tail section. After some trial and error I figured out a way to do it. 

The completed rendered drawing

First I did some testing in a separate drawing in order to be able to create the scales texture I had in my mind. To make the scales I drew and duplicated diamond shapes, with the result you see below. It is an early version, because the one I actually used, is too long for this blog, but this one gives a good idea of how I drew them. 

The first attempt to draw the base of a vector brush in Affinity Designer

After drawing these, I inverted the image and mesh warped it in Affinity Photo as is visible in the image below to kind of approach the texture width inside the winding and tapered body of the snake. It is possible to leave the diamonds unmeshed in a rectangular shape, but playing with the Stroke width only in Designer, to spread the scales properly over the body, leads to distortion of the texture. Hence this preliminary approximation. The inversion was done, because png's that are used for custom brushes must have a black background to make sure the brush has a transparent background once imported in Designer.

The brush visible above mesh warped and inverted in Affinity Photo

I created a png of the above and imported it in Affinity Designer as a New Texture Intensity Brush in Designer. In the Brush dialog I set the Size Variance to high in order to be able to tweak the brush's width to the desired value. If the Size Variance is left at default zero, it is impossible to tweak the width of the brush afterwards in the Stoke panel.

Then I did some testing in yet an other separate drawing that you see below. Tinkering with the stroke width in Affinity Designer and manipulating the node handles of the vector brush allows to get rid of unwanted interference of the scales. I then found out that I had to draw different brushes (particularly longer ones since the snake's body is of considerable length) in Designer that were edited in the same way as described above in Affinity Photo, to be able to make a more realistic scale texture. For such purposes trial and error to get things right is difficult to avoid. By the way, vector brushes can be given any (gradient) colour in Designer as demonstrated in the image below.

Testing of the (not clipped) vector brush in Affinity Designer

I drew the base for the texture with Designer's Pen tool, so that it could be edited accurately with the Node tool. Then I applied the Vector Brush to the stroke drawn with the Pen by double clicking on the Brush type, while the stroke is selected. Inside Designer I then clipped the vector brush inside the snake outline curve as is seen in the image below. I tweaked the brush widths in Designer's Stroke panel along the vector brush line to the proper values. Also, in the Effects panel I applied a colour overlay to tune the texture to the correct intensity.

The clipping of the custom made vector brush in Affinity Designer

Below is the deceptively simple screendump of the vector outline of this image. The essence of this drawing is within the effects applied (the feature rich Layer Adjustment & Layer Effect tools, Gradient fill tool for shapes and strokes, Gradient opacity tool) to the vector curves at which Affinity Designer excels. Attempting to match the vision in the mind's eye is a challenge, but the Affinity programs allow artists to come a long way.

Vector outline of the drawing

Finally in the Tone Mapping Persona of Affinity Photo, I enhanced the texture of the vector drawing, with the result that is visible in the image at the top of this blog entry. The Tone Mapping (to my surprise) resulted in a kind of patina effect to the shield, which I think is quite nice. It probably is the result of the multi node gradient colour function applied to the shield in combination with the Tone Mapping settings.

Note: The version of the brush I used in the end, is quite large (4208 x 164 pixels) in order to be able to properly render this image also in large sizes without getting a jagged and blurred appearance, because the drawing contains pixel elements in its complex non-linear textures.

My Chinese Zodiac sign is a Water Snake, which is the main feature of this personal crest. The meaning of the arched Latin text is 'Serpent Power' or 'Serpent Kingdom'. The X is a symbol of the Sun God who sustains life, secrecy or protection of (mystical) knowledge. The circle represents magical protection and sacred space. The mistletoes refer to protection against poisons and to mystical powers. 11 and 22 are master numbers pertaining to my birth date and name, according to the art of numerology. The infinity symbol at the bottom hints at my spiritual origin. Only after having reached the age of an elder was I considered to have grown sufficiently to understand that a symbol is worth a 1000 pictures. 

Hope this concise tutorial helps to create similar textures.

After two months of working with Nicepage

  

After just over two months of working with Nicepage, I remain enthusiastic about the program, after having bad experiences with MobiRise and PineGrow. I realize that maturing such a complex program requires time and effort. After all it has managed to allow website designers to break away from the restrictive blocks, object and element positioning of the bootstrap based programs, which is no small feat. In addition it has brought an interface that makes it ridiculously easy to learn how to use the program within a brief period of time, besides adding a ton of functions, like animation of images, icons and shapes that allows to create webpages of a different level. The integration with CMS systems like WordPress and its open source equivalent Joomla make it applicable to a much wider range of websites. Particularly since both systems support a ton of plugins, like ecommerce, that makes building web shops possible. In today's lockdowns and restrictive access to public provisions, creating online sales points have become a lifeline for many.

Click the image to visit the Nicepage website

The minor flaws that I have run into, will be corrected really fast, I'm sure, because I have noticed that the support department on their forum page responds quickly, which probably results in the high update pace of the program. Communication with the mods on the Nicepage forum is done from within the program as well, by the way, which is quite a useful feature. Since I started to use it approximately 2 months ago, there have been some 5 updates, all of which can be installed from within the program, while offering the possibility to back up the created sites before updating. I did not have to use this option, because the updates did not cause any problems, which hints at the fact that the developers do some sound testing before releasing the updates. All in all, these are positive experiences some of which I haven't encountered while using other programs that I used previously. So, for me, switching to Nicepage was a perfectly on the mark decision. 

Updating Nicepage from within the program

The minor flaws I referred to in the previous paragraph concerned to sometimes fiddly positioning of elements (text and images), in automated fluid repositioning of them in laptop, tablet and mobile devices resolutions and screen orientation. With some trial and error these can all be corrected quite easily however. Other programs I used, preform much worse in this department. Note: making sites work for display on multiple screen resolutions and orientations in an environment that is more complex than the popular, but restrictive object positioning bootstrap method, is quite an achievement. An other weird flaw I encountered, is the colouring of the bullets in a bulleted list, that strangely enough works on Opera's android vertical webpages for mobile devices, but not in the desktop versions of Opera and other browsers. Bearing in mind the proven prowess of the Nicepage developers, however, this is an oddity that they should easily be able to correct.

In the near future I plan to test Nicepage in combination with Joomla to add ecommerce functionality to a website. This will have to be done in a sub-domain that I will need to create, since my own site does not require the use of Joomla. Stay tuned to learn of my experiences with this type of web site building.

Another nice feature of Nicepage are the Animation options, that allows designers to draw the attention of the website visitors to a particular area of the page. These all work flawlessly and are fully customizable. It shows the attention to details of the developers that really understand the needs of designers.

Animating images and icons etc. in Nicepage

While on the subject of understanding what designers need - the recently introduced Mega Menu allows designers to create a so called (you guessed it) Mega Menu, in which visitors immediately see what the categories in the dropdown options are in a clear way. So the developers tailor the program to the designer's needs who then can create a website tailored to the visito's needs. Absolutely great!

The Nicepage Mega Menu

What has also become perfectly possible with Nicepage is to build websites, without outsourcing the UI / UX-design, since the program has a functionality and flexibility that its competition lacks. These features could potentially speed up the creative process, because the UI / UX design phase can be skipped entirely. In these times of budget cuts and decreased face to face communication, Nicepage may save businesses a considerable amount of costs, while freelancing website builders can accept more different types of assignments and accomplish them in less time, while being able to include visually more appealing effects in the sites they build. This makes the program the ideal choice for the designers that do not have a whole lot of legacy data to take into account. The plethora of templates the company offers makes many assignments a breeze, in addition to which these are easily editable, which includes the perpetually changing SEO requirements. Especially for non-coders this program is a dream, because it allows them to do things that required a lot of skilled coding in the past. Coding costs skill and time and the program makes creative design accessible to anyone. If you want to get a proper idea of the possibilities and use of Nicepage, take a peek at this video: https://www.youtube.com/watch?v=8iHl--K4XPs