This topic is part of our Tools, Tips, and Feedback section: http://myanimelist.net/forum/?topicid=513201 And also featured in our Graphic Design section: http://myanimelist.net/forum/?topicid=419631 This is just info based on my opinions and experiences, take it as that. Beginners may want these tips too: http://myanimelist.net/forum/?topicid=412925 Getting a good start If you're new and want an early advantage with learning CSS and making new list layouts, I suggest trying my tutorial on Inspect Element, it will teach you a lot and make things easier in the start: http://myanimelist.net/forum/?topicid=1329419 If you're new and want an early advantage with graphic design, I think you should ease into Photoshop with my wallpaper tutorial: http://myanimelist.net/forum/?topicid=1392420 Three most important tips of all 1. Even if you feel discouraged for any reason, keep in mind no one does perfect 100% of the time especially on their first tries. If you feel discouraged save the project and try again soon. 2. Sometimes, you may find you can't figure out to "finish" a project. If you find yourself in this situation, I often find the answer will come to me if I do everything else I can. I guess you could say its easier to figure out how to climb the peak of a mountain if you're close enough to view it, rather than if you're looking at it from the bottom (hope that makes sense!). 3. The the number one most important thing to remember is to always save your work before and after making changes! This applies to everything: BBcode, CSS, and Photoshop! Save copies of your work in multiple places, just in case of any unforeseen event. Coming up with creative ideas for new layouts or designs I try to find ideas from games or anime and somehow implement something I like about them into a design. This makes the design more interesting and often more interactive! For example, if you see a cool menu in Ghost in the Shell or a game, you may want to make your list menu similar in your layout. It will be very unique and be a treat to fans!! Listening to exciting or emotional music while looking at potential images for your design may stimulate your brain to come up with some ideas while looking at the images. I also try to make designs interactive or appeal to a person's emotions somehow, to do this you have to think hard how your work could be interactive in these ways. Possible try to make a cool battle scenario with list images, or sad scenario with a member card. List example For our Halloween list design contest, I wanted to make a list design that was actually scary for users, so I based the design on a horror game with an elevator theme (each category is a different floor). Such a thing would be very difficult to impossible for beginners to make right away, but with enough experience and practice you can make super creative list designs. It paid off when my list design won the Member's Favorite category and Creative category: http://myanimelist.net/forum/?topicid=1454149 Card example Once I was trying to come up with an idea for a cool unique member card. Most cards are simply character + background + borders + overlay, and while this is cool I wanted something more interesting and creative. I liked a scene from the anime Akame ga Kill where a bunch of enemies were frozen. So I decided to make a card where Esdeath froze Akame! I am much more satisfied with this design than any other cards I made! You can also make designs based around scenarios or unique perspectives from other cards to make yours stand out. Learn and use Inspect Element if making list layouts As recommended in the first tip. I mainly use Chrome these days for browsing, but I prefer to make list layouts in Firefox. You'll learn alot from this tool too. The Inspect Element tool is very useful for making designs, use my tutorial on it: http://myanimelist.net/forum/?topicid=1329419 After making it in Firefox, I make adjustments for Chrome. Great sites for finding images I've compiled them all into a list of sites here: http://myanimelist.net/forum/?topicid=504129 Best image uploading sites These days its definitely Imgur, unless you have a high quality image over 1 MB, then use Dropbox. Programs/image editors to use What should you use? Graphic design programs are hard to recommend since everyone is different. Most advanced designers use Photoshop, of course. I mainly use Photoshop CS5 for graphic design, and JASC Animation Shop for animation and quick and dirty edits like screencaps, unimportant croppings, and pointing out stuff in visual examples. I would recommend getting Photoshop CS2 at least (try the topic below) and JASC animation shop for its amazingly easy use. Getting into Photoshop free and easy! If you plan to get into any kind of graphic design, try this before thinking you can't use Photoshop. I have made topics to make getting into Photoshop easy for several popular activities. I provide cost-free and cheap links to the program as well: http://myanimelist.net/forum/?topicid=419631 Gimp? Most users shy away from Photoshop as its complicated and can be expensive, so they use GIMP. It is great for beginners looking to do basic or even some advanced work and honestly 99% of users won't need anything above that, if even that. Contrary to what some ppl say, most users will not be putting themselves at a disadvantage by not using Photoshop, since they won't need its advanced functions for what they want to do. But if you plan to use special effects tho, you should absolutely use Photoshop. There are GIMP tutorials here too! http://myanimelist.net/forum/?topicid=419631 Learn the different image file types if you don't know Its important you know these if you're gonna make layouts and images. Theres literally like a 100 different file types for images and such but the four main ones I encounter that you will use online are: JPEG example: http://i44.tinypic.com/zwcbk3.jpg Basic image file type, lowest quality, unanimated. They're never animated and don't support features like transparent/translucent backgrounds. Try to avoid these, always use GIF for animated files and PNG for all others. However, they're still good images for wallpapers and forum pics and support a lot of colors. PNG example: http://i41.tinypic.com/dfwqd.png High quality unanimatedimage. You will have to save and upload images as PNGs to use transparent or translucent backgrounds. Try to use this for all unanimated image files. They have higher quality then JPGs. The example image has a transparent background, and vivrant colors. Move it into a image editor to see it. GIF example: http://i43.tinypic.com/2efozgp.gif Basic animated image file type. Supports transaparent backgrounds, but not translucency. Real useful and though they aren't as high quality as APNG or PNG they can still look very good. Saving a GIF over and over will often lower its quality. They're split into frames, whether it be 1 frame of 500 frames. You can edit and view the frames easily in any programs that supports GIFs. The example above has a transparent background save it and move it into such a program to see for yourself. APNG (animated PNG) Example: http://danbooru.donmai.us/post/show/783590/animated-animated_png-cake-crescent-eating-food-fo Extremely high quality animated files. I'd avoid this because they are not supported by all browsers. However, its the best looking for animated layouts and supported by the most popular browsers. Youtube Link: https://www.youtube.com/watch?v=ke7_rndF60E Youtube Link: https://youtu.be/mb_z4_I0vNU |
Shishio-kunOct 13, 2019 3:53 PM
| This is some grat advice! *mental note to revisit* As for anime image sites, I like zerochan, though a lot of what is uploaded there can be found on DA or Konachan. I use minitokyo if I need high-quality scans, but zerochan loads a lot faster, and has plenty of good-quality images. The only downsides would be that they are all jpeg, no exceptions, and that some of the images *are* LQ (mainly for screenshots and demotivational posters). :) |
  |
| So, this is what I can say. It is only my opinion. of course Hosting your files with direct links These are other variants for hosting your files with direct links possible. It can be really useful if you're going to use CSS @import (which is great because it reduces page loading time) or just don't want to be limited by image hosting rules like automatically resizing images. Cloud storages DropBox Free space: 2Gb (can be increased up to 10Gb) Public bandwidth: 10Gb per day + sync software My rating: 9/10 This is what I use and I think it's the best variant for hosting any design-related things. It comes up with a piece of soft that creates special "Dropbox" folder and monitors int so that any file you put here will be uploaded to server. And it is truly awesome because you can put your .css file there and edit it with text editor of your choice - and it will be applied to your list. It is much more convenient then just editing it in MAL's standart input field. To get direct link, just put file in your "Public" folder, then right-click it and choose "Dropbox > Copy public link". Of course, you may upload files using the website as well. And now, for the bad side: since DropBox is not a file hosting service, they will suspend and then eventually delete your account, if you will be running out of bandwidth. It's ok for me, since my design is ~250Kb with all images, but you'd better put all these 5Mb GIFs to somewhere else. Use my invite link (or others') and we both will get additional 250Mb OpenDrive Free space: 5Gb Total bandwidth: 1Gb/day + sync software My rating: 8/10 Well, this is also good because it doesn't blocks your account or else, but I hate it's total bandwidth limit. I haven't also tested their sync soft, so I can't really tell you is it good or bad. I'm using it for my non-essential small files I don't think I'll change. Other variants Some of the Jabber Disk services may provide direct links for files uploaded to public section, like one on disk.jsmart.web.id. This, however, will include your full Jabber ID in link, so it may be not a good idea. You can also host a file in your own site (or some create-a-blog engine like wordpress.com or blogspot.com), but if you have one, you should already know how to do it. Web-dev tools Apart from Firefox & Firebug there are dev tools in other popular browsers: Safari & Crome -- Web-inspector Opera -- Opera Dragonfly IE9 -- F12 They all share functionality we need for dynamically adding styles to elements, as well as having some specific pros for each: IE9: you can switch between IE7, IE8, IE9 and IE9 compatibility render modes. Not really useful feature unless you're going to make your style compatible with as many browsers as possible. I should also mention, it is less convenient to use then any other Firebug -- autocomplete and CSS tab where you can edit directly the text (dynamically, of course). Chrome -- autocomplete and color notation style rotation(rgb-hex-hsl and rgba-hsla) and invalid code highlighting - it'll be marked with [!] and strike through the whole text. All other tools seem to just remove invalid code from "styles" section (don't know if it works for Safari though) Opera -- color picker & palette for custom colors and field to enter custom CSS. Btw, Dragonfly is completely different from any other tool because it is actually a web application with open source. F12, Firebug and Dragonfly are also multilingual. And if you need to perform some simple calculations, you can use console in your tools. Just type something like 462/3 and the result will appear. My look on image editors Photoshop - huge and really expensive tool that can be used for most image editing tasks. It is not really hard to learn, but it will require some additional time just to get familiar with what it can do. It also has a huge community, you'll easily find tutorials or brushes, styles, etc. if you'll need some. Even if you're new to PS, you may try messing up with layers & styles to make buttons or gradient backgrounds for e.g. top bar. It's fun and really simple and eventually you may get the result you want. GIMP - I haven't used this for really much time, but I can say it can replace Photoshop for some actions and it's community is fairly large and there are also loads of custom content like brushes or gradients for this one. In my opinion, you'll also have to install some plugins (like layer effects) to make it truly awesome :3 Also unlike PS, which is only for Win & Mac, it does have linux version (and freeware & open source by the way). So I would suggest you using one of these if you're going to take web-design more seriously than just MAL styling or if you like playing with images and effects. Very short overview of image types: type - compression - animation - transparency - usage JPG - Good compression - static - no transparency - non-transparent backgrounds GIF - Forced color compression - animated - transparent color - animated elements PNG - Color compression possible - static - alpha channel - any transparent element Both APNG and MNG are not supported by some of popular browsers, you'd better avoid using them. Ok, that's all for now. Maybe I'll add some more later. |
 |
| Wow, I'm learning so much in your club. I have not totally finished reading this over, but I already have a question, and I may have more when I finish reading. I'm kind of a nut when it comes to the pictures for my songs on my MP3player. I really want them to fill the screen and of course the nice the better. Was just wondering how much bigger are the APNG file's over PNG's. Currently I have 8 Gb on my MP3 player, and I hardly have used much up. |
Himari_Chan said: Wow, I'm learning so much in your club. I have not totally finished reading this over, but I already have a question, and I may have more when I finish reading. I'm kind of a nut when it comes to the pictures for my songs on my MP3player. I really want them to fill the screen and of course the nice the better. Was just wondering how much bigger are the APNG file's over PNG's. Currently I have 8 Gb on my MP3 player, and I hardly have used much up. Most APNGs are really big, like the size of an MP3 which is very big for a picture file. So around 3MB. Most regular PNGs that are worth being PNGs are like .5 to 1MB on average (I think?) but some can be up to 10MB for the high quality renders and scans. There aren't even that many good APNGs out there, so you won't have many to choose from for your player anyhow: http://danbooru.donmai.us/post?tags=animated_png&commit=Search |
| Thanks, just as I figured. I guess I'll just go with the good ol' JPEG. |
| Great guidance and tips above for us beginners. Instead of asking users to do it for me, it would definitely be better to study, or be taught, and implement myself! Thanks for putting in the time and effort in this btw. |
Meira said: Zerochan is also a good site to find images ^-^ Oh wow it is! Thanks for adding that, thats the kind of info I need in this club! |
| I've updated this guide a little more, adding imgur to the sites you can host images on. I'd highly recommend it its very fast and easy. |
| Hi there ... I don't know where to ask this question ... but it seems that this thread is the right place. So here is the thing ... i am making a special edition Cards for Christmas for a club ... i have the idea, and everything ... but there is one problem ... i don't know where to get the thing's i need, nor do i know if there is what i need. So i was thinking of giving my cards a effects as if they were real photos hanging by a piece of tape or clip, but i don't know i how where i can find shapes or brushes that allow me to do that. I don't know if i am explaining the way i am supposed to but i hope you guys understand and help with this :) Regards ASilva :) |
Asilva said: Hi there ... I don't know where to ask this question ... but it seems that this thread is the right place. So here is the thing ... i am making a special edition Cards for Christmas for a club ... i have the idea, and everything ... but there is one problem ... i don't know where to get the thing's i need, nor do i know if there is what i need. So i was thinking of giving my cards a effects as if they were real photos hanging by a piece of tape or clip, but i don't know i how where i can find shapes or brushes that allow me to do that. I don't know if i am explaining the way i am supposed to but i hope you guys understand and help with this :) Regards ASilva :) That sounds easy to do if you just took a decent quality clip art (one somebody made, not a real one) of a photo with tape/paper clip and made it see through, then just move your image into the see-through part. Kind like what they did, but they made theirs by hand: http://myanimelist.net/forum/?topicid=421873 http://myanimelist.net/forum/?topicid=392627 I think the PSDs for the first link's background are available here: http://myanimelist.net/forum/?topicid=412909#msg15427761 you might be able to use those as your clip art. When you put the pic in you'd just have to move the image into the photo, maybe adjust its angle and give it appropriate lighting since its supposed to be a photo. btw posting in this topic is ok for your question, but this is the best topic for when you don't know where to post: http://myanimelist.net/forum/?topicid=200323 |
| Hi there ... thanks for the ideas. While i was waiting for a reply i was also searching the net for a way do what i wanted and i found something on this link that is called the Pollaroid Generator, from what i have read it is some kind "Action" Thing for Photoshop. And since i am here ... do you know what this action thing is ... i read the page from the link and i still didn't get what it is. And could you take a look at the link see if there is more "Action" that might me useful for my works, that is, if i am not asking to much. Regards ASilva :) |
Asilva said: Hi there ... thanks for the ideas. While i was waiting for a reply i was also searching the net for a way do what i wanted and i found something on this link that is called the Pollaroid Generator, from what i have read it is some kind "Action" Thing for Photoshop. And since i am here ... do you know what this action thing is ... i read the page from the link and i still didn't get what it is. And could you take a look at the link see if there is more "Action" that might me useful for my works, that is, if i am not asking to much. Regards ASilva :) Actions are like prerecorded settings or techniques, to easily change your photos to how you see in the 'after' shots. Like if you put my avatar in the 3-D photo action here, its going to have a 3-D kinda look after. http://perfectlyhudgens.deviantart.com/art/3D-Action-144512201?q=boost%3Apopular+in%3Aresources%2Fapplications%2Fpsactions&qo=204 Of those actions, most are made for photos of real stuff. Some look unnatural and weird on anime pics tho. You can be clever and try to use some on anime pics and it works sometimes like for profile About Me. For your thing, it will be good to find a setting to make anime photos looks more like photos, kinda like Bastevera did in his layout I linked to you. If the polaroid action you're referring to makes the Polaroid for you, it might be real good. Hopefully it renders the photo out or something. |
| Hummm ... Ok :) Thanks for the explanation :) |
| Thought I'd share some tips on designing lists as well :))) (I think this is gonna be a long post xD) ❀ Photoshop palettes If you already have an image you want to make a layout/profile out of, you can make a quick "color palette" with the corresponding colors of that image. Here are the steps: ➀ open the image in photoshop ➁ resize it so it is smaller (around 300px width or height would do) ➂ go to filter (from the top menu) → pixelate → crystallize ➃ drag the button to set the cell size (I'm using 50 for the example) ➄ click ok and use the eyedropper to get the code of the color you want to use :) ⍟ tip: if you don't like the resulting colors, undo/redo to get different palettes! ❀ Web Palettes There are sites with the premade palettes (with less colors) out there! So if you were set on a color before starting the list design, or you need some creativity boost, maybe the colors will help you decide! ➀ http://www.colourlovers.com/palettes search the palettes, you can sort them by: new, most loved, most views, most comments, most favorites or search by a color. when you go to the palette page, it shows HEX (#xxxxxx) and RGB (x,x,x) codes. (side note: they also have patterns section, will talk about it later) ➁ http://pltts.me/ this one is really nice because it has a "random" button on top! if you don't have anything in mind, it might help you to decide! on the palette page it shows a big, full width version of the palette you chose, and the HEX codes. no RGB codes thoug, so you would have to get them manually. one more downside is that the search isn't working (at least not for me). ❀ HEX to RGB(A) (and vice versa) convertors ➀ http://hex2rgba.devoth.com/ if you're using photoshop (or any other image editing software that works with HEX, this is a must for CSS styling. I am aware that such photo editing programs include RGB values as well, but it's easier this way since it generates a css code (you can set transparecy as well!). it supports HEX without the '#' as well! ➁ http://hex.colorrrs.com/ this one is pretty neat too, allows both way conversions, and displays the inputted color as the background. rgb must be inputted in the rgb(x,x,x) format ❀ Patterns! it's fun experimenting with patterns! I love them! you can apply them in shapes using photoshop or use them as a whole background. ➀ http://www.colourlovers.com/patterns this is the site I've already put up before for web palettes. another cool feature they have are patterns~ they even have pattern tremplates, so you can find one you like and see all the color variations :) (or even make your own color variation). ➁ and here's a download for some pixel patterns I've made~ preview: 15 kuroneko patterns download: clickity click~ aaand, that's it for now .__. I will probably do photoshop tutorials in the future *cough*whenIdon'thaveexams*cough* ヾ(｡･ω･｡) |
nymphiaeDec 17, 2013 11:23 PM
kuronekodesu said: Thought I'd share some tips on designing lists as well :))) (I think this is gonna be a long post xD) ..... aaand, that's it for now .__. I will probably do photoshop tutorials in the future *cough*whenIdon'thaveexams*cough* ヾ(｡･ω･｡) Oh wow thanks thats really good info! Photoshop would be great since there is a free version. I'll try to add your tips into the top post later when I edit these posts for better info alot of what I said is outdated or could be improved. But I want to use img tags tho so I can explain things better so have to wait http://i.imgur.com/PvCIFxf.gif |
| fixed and updated for 2015 with new info |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
7 hours ago |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |