Sarah Frisk
Forum Replies Created
-
AuthorPosts
-
Sarah FriskParticipant
Pinterest also has some documentation and some specific meta tags for Pinterest that allows for specific meta information to appear in tags. While I haven’t done a ton with Pinterest, they seem to have two categories that would probably work for this group: Articles and Products. You can also use their validator to see how things appear.
Sarah FriskParticipant@Ian – sorry just saw this reply. I am planning on coming up with a proof of concept on how to get it to work with comic easel, but I probably won’t have a chance for another few months (in the middle of a move at the moment)
Sarah FriskParticipantYou do have stuff like Motion Comics (I think Marvel used to make a bunch of these?) which are more cinematic versions of comics, that have characters moving, and sometimes some level of voiceover work. The company that created Clip Studio (Smith Micro) did create an application to help with this type of comic format called Motion Artist, although I don’t know much about it beyond what I saw in trailers.
Sarah FriskParticipantI’ve seen some comics use SVGs, such as Amphibian – which is fun in the perspective that all text in the comic is technically readable by the browser. Otherwise you see mostly jpegs/pngs (although I would love to see more WebP, but that’s mostly me getting really excited about new web tech that decreases the load size of your page). You see the occasional gif for a panel/strip if the cartoonist wants to show some level of animation.
Sarah FriskParticipantI think I’m a bit confused about what you mean by “format that includes actions that don’t come from the surrounding website” Are you talking about stuff like what’s in Comixology or Marvel comics apps vs on an actual physical website?
Sarah FriskParticipantI agree with Brad – I think it makes sense if the first installment is free from the beginning, with the other chapters behind a paywall. That way, readers have a chance to check out to see if your story is the type of story that will appeal to them. Hook them with your free opening chapter, and keep them coming back (with money) for more!
Oddly enough, you see a lot of mobile visual novel games working that way. The first “chapter” is free, which introduces the characters, gets you invested in the story. Then, once everyone is introduced, you pay a few dollars to unlock the other chapters of the story. Considering the number of visual novels I’ve seen using this system – it seems to be a system that can work well.
Sarah FriskParticipantAre you doing this on the sketchbook silliness website? or somewhere else? It looks like you have CSS on the Sketchbook Silliness website that causes the header to always be 345px x 160px wide, which might cause logo shrinkage.
You might be able to use a header widget if one is available in your theme to put the image/link in as well.
Sarah FriskParticipantI don’t think you need to worry too much about the height (except for maybe in the mobile view?). I was using the flexbox css attribute, so I didn’t even need to worry about the width of the image, it handled all the resizing for me. Going with flexbox over something like bootstrap columns keeps you from being constrained by the available column widths in bootstrap, so your panels can be as wide (or thin) as you want them to be. Only issue with the method I linked to is if you have a panel that takes up multiple rows, since that would probably involve a lot more custom CSS for the layout. (CSS Grid attribute can handle it nicely though! But support is more iffy, and you would still have to write custom css based on your layout)
Sarah FriskParticipantI’ve actually looked at making something with a static site generator such as Jekyll or Metalsmith about a year ago since I don’t think we necessarily need a database for the type of content we create. (yay speed and saving backups of all pages in version control) Here is my random first pass experiment that included the ability to have hidden copyright images on the comic, in case someone decided to copy your comic image and post it elsewhere. It was something Table Titans does, (image vs site) and I wanted to see if I could easily replicate it. It also allows for multiple image uploads, so you had a different comic shown for mobile, desktop, and retina devices. However other than that, it was fairly minimalistic in features, mostly I was using it as an excuse to try out Jekyll.
If I did start over and tried to make this for real, rather than have the hidden image copyright, I would have the ability to include multiple images that would make up one comic. In the example above, I had a retina, desktop, and a mobile version of the comic using the <picture> tag, but I think I rather do something where you can specify images for different cells in the comic, so everything can rearrange itself when you switch from desktop to mobile (like this).
Anyway, that was a few ideas I had when I was playing around with rolling my own webcomic system. I look forward to seeing what you come up with!
Sarah FriskParticipantIt didn’t take me too long. I used an existing comic I already had on my computer. I copied each panel into it’s own file and then I cropped out the white space around the panel, I might have resized the images down slightly to be a better size for the web than the resolution I usually worked with. Took my maybe 5-10 minutes to do all six panels.
Sarah FriskParticipantNot sure if this will help, but I had some spare time tonight and created a simple version of what they did on the Nib with one of my comics on Codepen. Let me know if you have any questions.
Sarah FriskParticipantIf you want to know what the Nib did – this is roughly what I’m seeing from looking at what I can see of their code.
They’re using the flexbox css attribute to do the layout in the desktop view. That is what’s helping everything stay the right height/width during resizing, despite each panel being it’s own image file. That’s mixed with using media queries to ensure that in the mobile view, there is only one image per row, and in the desktop view, the correct panels are shown in each row.
As Ava Jarvis mentioned, there are some concerns about using flexbox due to browser compatibility. However, luckily, most browsers DO support flexbox, so unless you’re finding yourself needing to support people looking at your comic using a version of Internet Explorer older than IE11, flexbox should be okay to use.
January 6, 2017 at 10:02 am in reply to: Comic border that doesn't get in the way of my background without FTP? #21448Sarah FriskParticipantThat’s actually what the Rivin Seal site did (background image on the div that surrounds the comic).
Alternatively, there is the border-image CSS property, although it doesn’t work in browsers lower than IE 11.
- This reply was modified 7 years, 2 months ago by Sarah Frisk. Reason: adding in note about border-image
Sarah FriskParticipantThe i2.wp.com bit I got from the URL of the image on your website originally. Looks like if you’re using Photon, the image acceleration and editing service for WordPress.com and Jetpack-connected WordPress sites, it saves your images at that domain name. In theory, removing that bit shouldn’t cause a problem.
Sarah FriskParticipantSo it looks like wordpress is adding “?resize=500%2C118” to the end of your image url, which is resizing it down to the smaller image size, as well as setting a set width and height on the tag. You might have a weird setting that got clicked on when you were inserting the image with the media button?
You’ll want your image tag to look something like this:
<img class="aligncenter wp-image-540" src="http://i2.wp.com/brosinspace.com/wp-content/uploads/2016/10/About-Bis-Button-e1477051984880.png" alt="about-bis-button">
Also in your CSS, I would add the following, to make sure your images don’t end up wider than the content: The
max-width: 100%
makes sure that the widest an image can be is the amount of space available in it’s parent element, and then theheight:auto
resizes the height to whatever is the best fit given the rendered width.img { max-width: 100%; height: auto; }
That will give you something like this:
Not sure what you mean by the “Every Friday” graphic being massive on mobile, unless for whatever reason I wasn’t able to bring up a mobile theme of the website. Seems to be the same size.
-
AuthorPosts