Jump to content
You must now use your email address to sign in [click for more info] ×

Hi! and Bye! Tote Bag design


Recommended Posts

Hi! and Bye! Tote Bag design

tote_bag.png.d5df9515de6cc3e46ca583f1c6c7f6cb.png

The tote bag shape itself was produced using Affinity Publisher, using the Rectangle Tool and the Segment Tool. The symbols are from a font made using FontCreator. The design was assembled in, and exported from, Affinity Publisher. Export was as a png file.

William Overington

Wednesday 3 July 2019

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

Two days ago I posted the above picture.

At the time the handle had two pieces made using the segment tool, a coloured piece and a smaller white piece on top of it.

Today I have learned of, and used, the Layer, Geometry, Subtract facility so as to make the handle as one piece.

I then grouped the pieces of the obverse view and I grouped the pieces of the reverse view.

I then exported two files, tote_bag_obverse.syg and tote_bag_reverse.svg as svg of selected object without background.

Please find those files attached.

I have in mind the idea of having an image of someone, probably a lady, holding the tote bag.

Now if she is holding the bag in front of her, then that seems possible to do, but I would like to be able to produce, learning how to do it as part of the exercise, the lady holding the bag in a three-quarters view as if she is walking towards the camera but not going to walk into it. As if she is holding the bag from her left hand and she will, after being in the image, go to the left of the camera as we view her.

As far as I can tell there is no direct 3d way in Affinity Publisher. I tried using PagePlus X7, but I cannot get the bag thin enough and the transparency round the handle is lost.

Can it be done in Affinity Publisher or in any of the Affinity products please?

William

 

 

tote_bag_obverse.svg

tote_bag_reverse.svg

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

19 minutes ago, William Overington said:

Today I have learned of, and used, the Layer, Geometry, Subtract facility so as to make the handle as one piece.

It seems that you may have forgotten this discussion:

 

Quote

I would like to be able to produce, learning how to do it as part of the exercise, the lady holding the bag in a three-quarters view

Affinity Designer doesn’t yet have vector perspective or mesh warp tools.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

Hello Alfred

> It seems that you may have forgotten this discussion:

I checked out the discussion to which you linked, but I do not follow what you mean. Could you clarify please?

Later Edit: Ah ,yes, your note where you produced an illustration and wrote as follows.

> If you don’t feel confident about drawing with the Pen Tool, try adding and subtracting shapes (e.g. drawn with the Crescent Tool) to approximate the desired end result, and then use the Node Tool to refine the new shape.

William

 

Edited by William Overington
7 minutes later I found the note to which I think Alfred was referring.

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

I have produced a picture using Affinity Publisher.

lady_with_a_tote_bag.png.18cdca8ba07171f3cea548268340b5e1.png

The picture is interesting in that the hand holding the tote bag is behind the front of her sleeve, and the handle of the tote bag is behind her hand, yet part of the tote bag is in front of her dress.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

I think you might want to consider changing the colour of the dress to provide more contrast with the tote bag (and to avoid clashing with the shoes). For a little more realism, clip a texture image to the shape of the bag, and add whites to the eyes.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

2 minutes ago, Alfred said:

I think you might want to consider changing the colour of the dress to provide more contrast with the tote bag (and to avoid clashing with the shoes).

Our posts passed by in cyberspace.

What colour would you suggest?

3 minutes ago, Alfred said:

For a little more realism, clip a texture image to the shape of the bag, ...

How is that done please - you may use the svg files posted earlier in this thread if you wish.

5 minutes ago, Alfred said:

... and add whites to the eyes.

Ah, yes, I should do that.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

I am thinking about a variant design of the bag, with the symbols as they are, together with !176 below the Hi! symbol and !178 below the Bye! symbol. Also, on the obverse, below the number, a QR code with !176 encoded within it and, on the reverse, below the number, a QR code with !178 encoded within it.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

59 minutes ago, William Overington said:

What colour would you suggest?

As it happens, I chose a colour not dissimilar to the one you chose for your added background!74BBF04D-B490-4DA2-9026-D224456FE70A.jpeg.40f3576f821ade423fa4c13485cb0892.jpeg

For the texture, since the bag is just a rectangle shape (ignoring the handle) I didn’t actually bother with clipping. I simply covered it with a new rectangle with a bitmap fill applied, setting the blend mode of the new layer to ‘Darker Colour’ to allow the ‘Hi!’ symbol to show through.

To learn about clipping, watch this video: https://player.vimeo.com/video/168186956/

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

6 hours ago, Alfred said:

 

For the texture, since the bag is just a rectangle shape (ignoring the handle) I didn’t actually bother with clipping. I simply covered it with a new rectangle with a bitmap fill applied, setting the blend mode of the new layer to ‘Darker Colour’ to allow the ‘Hi!’ symbol to show through. 

To learn about clipping, watch this video: https://player.vimeo.com/video/168186956/

 

!176

Thank you for having a go at it.

I suppose that the wall of the conference venue will need repainting now! :-)

So could you explain step by step how you did the texturing of the tote bag please, stating which Affinity applications you used please.

From where did you get the bitmap fill please? Maybe a PagePlus disc? :-)

I watched the video, but I did not really understand it, particularly as the resulting image was not affected by which way it was done. At present I just don't 'get' how that video is relevant to what you have done.

I notice that you have done her eyes too.

Please find attached a copy of version 2 of the font. I used version 1 when I made the pictures. Version 2 has OpenType liga substitution for !176 and !178 so as to avoid needing to use the glyph browser to find the glyphs.

!178

William

 

hibye002.otf

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

1 hour ago, William Overington said:

So could you explain step by step how you did the texturing of the tote bag please, stating which Affinity applications you used please.

From where did you get the bitmap fill please? Maybe a PagePlus disc? :-)

I used Affinity Designer (the iPad version, as it happens, but I could have done exactly the same with the desktop version). As I said, I covered the tote bag with a new rectangle and applied a bitmap fill: ‘Bitmap’ is one of the fill options for the Gradient/Fill Tool.

That particular bitmap fill almost certainly came from Genetica Viewer.

Quote

I watched the video, but I did not really understand it, particularly as the resulting image was not affected by which way it was done. At present I just don't 'get' how that video is relevant to what you have done.

The video is relevant to the clipping that I originally suggested, but (as I explained in my previous post) I didn’t actually do it that way! I simply placed the new rectangle on top of the main part of the tote bag, applied the bitmap fill as indicated above, and set the blend mode of the rectangle layer to ‘Darker Colour’ via the dropdown list in the Layers panel.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

On ‎7‎/‎6‎/‎2019 at 9:37 AM, Alfred said:

I think you might want to consider changing the colour of the dress to provide more contrast with the tote bag (and to avoid clashing with the shoes).

Here is an svg of the lady with a tote bag and a blue dress, upon a transparent background.

William

Supplementary note: This svg file had a problem that Alfred reported in the next post in this thread and I subsequently produced a revised version in the post after the post by Alfred. I have deleted the original svg file from this thread.

 

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

1 hour ago, William Overington said:

Here is an svg of the lady with a tote bag and a blue dress, upon a transparent background.

My browser attempts to display your PUA ‘Hi!’ glyph, with less than satisfactory results:

403170D4-362F-46A1-BA09-6B193D069CEB.jpeg

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

1 minute ago, Alfred said:

The SVG file attempts to display your PUA ‘Hi!’ glyph, with less than satisfactory results:

403170D4-362F-46A1-BA09-6B193D069CEB.jpeg

Ah, yes, I checked that the file worked properly, but of course the font is installed on my computer, so it looks like the system found the correct font but just on my computer.

However, it looks like U+E176 is the code point that has been used in some font for the glyph that is in your picture.

Do you know from which font the glyph displayed  in your picture comes please?

I have just looked at the svg file in WordPad and the following is included.

<g transform="matrix(1,0,0,1,380.758,1124.7)">
                                <text x="0px" y="0px" style="font-family:'HiandBye', 'Hi and Bye';font-size:400px;fill:rgb(0,0,255);">î…¶</text>
                            </g>

Ah, it is not the font that I published in the forum but the earlier TTF version, that does not have the OpenType liga table in it. That font is installed on my computer yet not elsewhere..

I am not sure what the >î…¶</ sequence is about, it may possibly (but not necessarily) be a UTF-8 rendering of the U+E176 code point. 

I remembered that there was something about converting text to curves when making an svg file so I have now made a new version using that facility.

Please find the new version attached.

@Alfred Could you try this new version please?

William

 

lady with a_tote_bag_blue_dress.svg

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

Thank you.

I have now found the following.

https://www.w3schools.com/graphics/svg_text.asp

I have not yet found out what happens with text maybe beyond ASCII, or maybe beyond 8-bit or whatever.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

Following the above, I have made an svg intended to show whether the Hi! Bye! font attached to an earlier post in this thread is installed on the computer where the svg is displayed.

The upper line of text is in one svg, curves.svg that had the text converted to curves, and then the curves_and_font.svg includes curves.svg and also the Hi! glyph and the Bye! glyph and not converted to curves.

William

 

curves_and_font.svg

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

  • 1 month later...

I used the images in a chapter of my second novel. The PDF document was produced using PagePlus X7. This was because I have been using PagePlus all along so I did not switch applications. I used svg files produced in Affinity Publisher for the illustrations of the designs of the tote bag. The svg files being vector-based made their use very flexible.

http://www.users.globalnet.co.uk/~ngo/localizable_sentences_the_second_novel_chapter_015_musical_version.pdf

William

 

 

Edited by William Overington

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

  • 2 years later...

There is reference in the story to an earlier discussion.

Here is a link to the story that contains that discussion.

http://www.users.globalnet.co.uk/~ngo/localizable_sentences_the_novel_chapter_017.pdf

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

On 7/6/2019 at 9:51 AM, William Overington said:

I am thinking about a variant design of the bag, with the symbols as they are, together with !176 below the Hi! symbol and !178 below the Bye! symbol. Also, on the obverse, below the number, a QR code with !176 encoded within it and, on the reverse, below the number, a QR code with !178 encoded within it.

William

 

The codes suggested for the messages that are, when localized into English, Hi! and Bye! fit into the following list.

http://www.users.globalnet.co.uk/~ngo/A_List_of_Code_Numbers_and_English_Localizations_for_use_in_Research_on_Communication_through_the_Language_Barrier_using_encoded_Localizable_Sentences.pdf

I had forgotten to add them into that list.

I have added other codes elsewhere, some for weather and some for metals.

I need to either produce a second edition including those codes, or an addendum document, maybe both.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

On 7/6/2019 at 9:51 AM, William Overington said:

I am thinking about a variant design of the bag, with the symbols as they are, together with !176 below the Hi! symbol and !178 below the Bye! symbol. Also, on the obverse, below the number, a QR code with !176 encoded within it and, on the reverse, below the number, a QR code with !178 encoded within it.

William

 

 

2 hours ago, William Overington said:

The codes suggested for the messages that are, when localized into English, Hi! and Bye! fit into the following list.

http://www.users.globalnet.co.uk/~ngo/A_List_of_Code_Numbers_and_English_Localizations_for_use_in_Research_on_Communication_through_the_Language_Barrier_using_encoded_Localizable_Sentences.pdf

I had forgotten to add them into that list.

I have added other codes elsewhere, some for weather and some for metals.

I need to either produce a second edition including those codes, or an addendum document, maybe both.

William

 

Codes from !172 to !175 (inclusive) refer to the seasons, whilst !179 means “The colour is sky blue.” I’m afraid I don’t see how “Hi!” and “Bye!” fit in here.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

5 hours ago, Alfred said:

 

Codes from !172 to !175 (inclusive) refer to the seasons, whilst !179 means “The colour is sky blue.” I’m afraid I don’t see how “Hi!” and “Bye!” fit in here.

I don't remember why I put them in that range. I expect that I had what at the time seemed a good reason for doing so.

Looking at the two codes, I expect that part of the reasoning for the specific codes is that the binary representations of the characters for 6 and 8 differ bitwise from each other in three bit positions. Also I would have avoided 177 as it has two characters the same one immediately after the other.

So perhaps with just two available codes in that range unallocated, it seemed a good idea to use them for Hi! and Bye! as they needed to go somewhere.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.