All Media Lab

I'm not the one who was saying this! Moderator and Affinity staff member @Ben was! I quoted him to show you the way they think about it and with what info on the subject they motivate their ideas.

Hi @R C-R Think you didn't read this: https://forum.affinity.serif.com/index.php?/topic/85857-affinity-not-for-webdesign-no-webp-still/

Yes true! I even linked them to the Google developers page with the source code to implement webp, but no luck. Of course we all use some other app to solve this problem, but it's strange that it's still missing in Affinity apps.

Hi @NoSi Because despite the fact that all major browser support webp (except for Safari) and it's widely used in modern webdesign and game design, somehow the Affinity staff and some developers don't see the importance of having webp in the export panel. Have had discussions with a developer from Affinity on this forum and it's like talking to a brick wall. This feature is ask for for years now! David

Yes they are square nodes. Do they only appear when you activate them with the pen tool or can you pull them out with the node tool? (it's my first tutorial with the pen tool, but it's not well explained).

Hi, I'm working with the pen tool to create some shapes that are merged together with "add" later on. Some nodes that I have created don't show the handles. What can be the reason? Regards & Thanks, David

Hi, Is there any way to create for example a square and change the stoke thickness only at the bottom of the square in Affinity Designer? Regards & Thanks, David

Hi, I have set the preferred application (Affinity Photo) for my Tiff files in my Mac. Now part of the Tiff's only show the Affinity Photo icon instead of the thumbnail image. How do I get only the images shown instead of the icons? Regards & Thanks, David

Thanks Walt! Editing text works now. But it still doesn't look like it should. The text is grayed out in Affinity Photo and in Photoshop it looks like a engraved peace of rock/stone.

Was trying this one, but can't edit the text: Stone_engraved_text_effect.zip

Thanks for your reply!

Hi, Just wonder when I export slices in multiple sizes in Affinity Photo is sharpen already taken in account by the application or is there a way to apply sharpen to the slices during the export? Regards & Thanks, David

Hi Mark, When you are UX and UI designing for an IOS application the "points methode" can be a way to do it, but this is a very specific app in devices design methode. There is a whole chapter in the Affinity Designer workbook about this! The title of your post and your questions have lead me to the impression that you wanted to make a website mockup? If so that "points methode" is completely unnecessary and you can use any PPI DPI (it doesn't make any difference) and use the Bootstrap mockup templates I provided you with. Stay in the "web 72 dpi" modes (for you own well being😉 makes no difference anyway) of the Bootstrap mockup template document setup and start filling in the multiple device templates with content like text and images etc. And that's all there is to it!!!! Be aware that common icons that are part of a font set (like font awesome) are all made out of vectors and don't need any responsive images (you can scale them without quality loss). For images you only need one size (and orientation/art direction for all devices in the template) and the webdesigner takes care of the multiple sizes. In most cases web design companies use a service like Cloudinary that can resize and optimize images on the server and on the fly. In one of the seal examples I gave you the link for I used imagekit, It takes care automatically of all image sizing cropping etc. when it is loaded in a device. All I have to do is deliver 1 image in a big size and the art directions to the imagekit server. And if they (the web design companies) want you to deliver the images you can do it the way I showed you in the Affinity Photo export examples in my previous posts. Regards, David

Hi Mark, https://www.udemy.com/course/web-design-affinity-designer-affinity-photo-windows-serif/ I did not give you the link for nothing! Your replies in German still prove you don't understand it. I attached the grids for you to this post. They come from: https://hackerthemes.com/bootstrap-4-affinity-designer-grid/ Have a close look at it! They contain the proper sizes as a start and give you a idea how to set it up. Regards, David There are two links at the bottom: bootstrapGrid.afdesign bootstrapGrid_noArtboard.afdesign

https://www.udemy.com/course/web-design-affinity-designer-affinity-photo-windows-serif/ Mark, I suggest to follow this course first to clear all things up! Regards, David

I wonder do you read what people post to help you? If your going to print your designs it matters on the web not. So if you print your designs you can use like 300 dpi or more. If you print your mock up you stay in that one DPI value for everything on that page say 300DPI! Then when you start a mock up you create a page in Affinity Designer and give it a 300DPI value and from there you go. If you place an image on that page it has to be 300DPI too etc.etc. The same idea but even more advanced grid sits in Bootstrap 4. On the web only pixels count. Higher resolution screens just pop more pixels in the same place as low resolution screens. So you can have a iMac with 1080px X 1929px and a iMac of 5120px X 2880px and the screens can be the same size. This is explained 5 times now. https://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

I'm sorry with all due respect but this proves that you have no clue how it works! That's why I gave you de links to the `<picture>` and `<srcset>` examples. Someone that's want's to create a design for a website needs the knowledge of image resolution on multiple devices with "Art Direction" (yes "Art Direction" it's an important thing to know when you design a website) I uploaded the images for you that show the "Art Directions" for a image header. No matter if it's on a peace of paper you do the design on, the "Art Directions" is the most important part of your design. It implicates using the proper Aspect Ratio's of images, video, typography and animations for the proper orientations of the multiple devices. That's why it's so important to get your head around those things and study the `<picture>` and `<srcset>` examples and the basics of responsive webdesign. You don't have to become a coder, but at least understand how the mock up has to look like including all devices and orientations Desktop, laptop, tablet, phone and small phone. Anybody that learns web design front or backend knows that the order is: "Mobile First" and from there you go with your design. If you do this in the Pinegrow Pro Editor it takes you 2 minutes to set up a responsive Bootstrap 4 website (HTML Prototyping) including header, footer and content parts and it is already full responsive (works on any device and you can see it in a browser on your laptop in any nowadays device phones, tablets, laptops, desktop etc all included in the Pinegrow app). If you create a mock up for all devices and all non identical pages it takes you weeks in Affinity Designer. A Bootstrap 4 example:

Did you really read my post? And did see the http://www.pinegrow.com (it's the best visual editor there is with multiple frameworks like Bootstrap4) and I gave him this info 2 times! Well "I do" the design for my clients and I think Affinity Designer is not capable of creating fast mock ups with CSS output, links, hover states and transitions or animations. Sketch that I also pointed out multiple times (and have here my self) is very capable of doing that. But still more work then going straight in to a CSS framework like Bootstrap4. A mock up is not a peace of toilet paper with a sketch on it! That said I also made mock ups with Photoshop 10 years ago but developed my skills during the years and do HTML prototyping now. It's 10 times faster then any mock up attempt. Still believe that a basic knowledge of HTML and CSS is needed for any sensible web design (despite the fact that you work with a drag and drop application if something drops wrong you don't know how to solve it!!!!!) and during the years my theory is proven by the many crappy website designs I encountered.

Don't know what your educational background is, but HTML and CSS knowledge is the minimum you need to make any sensible webdesign. In Affinity Designer or Photo you will have a hard time making a working mock up . I don't understand what you mean by: If you came to me with a design out of Affinity Designer and said make a website out of this I couldn't. Simply because you will have a useless design. In Bohemian Sketch you can export your stuff to CSS and make working prototypes with links and transitions etc. But it's a lot of work and you have to study that too! That's the reason I gave you the link to http://www.pinegrow.com and the tutorial about HTML prototyping. You can't just start designing when you don't understand how it's implemented. (I'm talking about the basics of HTML and CSS not even about Javascript and advanced development of websites).

Yes on Mac I have to wait for the update anyway, because putting all the presets in the Beta version makes me loose them.

It's fixed in the latest beta!

We do HTML prototyping strait in to Bootstrap 4 with HTML SASS CSS JavaScript and PHP. All responsive images are already in the prototype. https://medium.com/@andreas.johansson.dev/do-you-find-yourself-designing-the-same-screen-over-and-over-html-prototyping-may-help-f87d45787e11 I also have the Bohemian Sketch app and never tough it, but HTML prototyping saves you a lot of time and you have to translate it to code anyway. https://www.pinegrow.com works with Bootstrap 4 (has even a visual editor) and more frameworks and can setup a Bootstrap site in minutes.

It doesn't matter PPI and DPI only contains some code for the printer and will not reflect on the result I never look at it. Only when something go's out for printing it matters. I use Sublime Text 3, Pinegrow, Affinity Photo for images, Affinity designer for logo's and print work. https://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

Like I said before DPI/PPI don't work on screen. I have a iMac 5k here 5120px x 2880px this means when I have a image of that same size it fills pixel precisely the screen. But you have also iMacs of 4k 4096px x 2304px or HD that only needs 1080px x 1920 to fill the screen. The screen size can be even the same size.

1000w means width of 1000px (pixel ratio stays the same) I show you an example I made with my own developed background foreground image system. When you are in Chrome and do right click "page source" you can see the image links. Be aware that I use a JavaScript plugin to achieve this, but the principles are the same as in the examples you read in the tutorials. https://www.yourweblab.nl/kit When you enlarge or make your browser smaller the images change automatically. Here you even see the image sizes appear on the image I also use webp with jpg fallback: In Firefox it works even better for responsive testing this site: https://www.yourweblab.nl/full-screen