Where to Start?

Like I mentioned in the summary, I’m working on Wordpress and how the admin works. I’m currently documenting myself on it, and I’m not sure if I’m going to re-edit the notes to make it easy for some people to follow, or just leave as is where people can follow my process and see all the links and resources I’ve used to create my theme.

I’m hoping that get that finished at the end of March (pending any other jobs that I may have at the same time). It’ll be a great resource for people that really want to just start Wordpress from scratch and understand what it actually is and how a theme can be made.

Las Vegas with Intothedarkroom

Tomorrow I’ll be headed out to Las Vegas with my company to attend the WPPI 2010 Convention. We’re not running booths, but we are doing something special to promote our newly launched website and also our new products. It’s been a long process to develop the products, website, testing the products, and sprucing everything up, but in the end, everything is in tip top shape. If you’re a photographer or becoming one, I recommend checking the photography slideshows and wordpress templates.

One product to look out for is the Pimp My Vanilla Wordpress Template. You can customize colors, drop shadows, upload header, have twitter, and upload background images. It’s a great product for people that like to get techy and mess around with colors to discover what they like or for people that like to change colors constantly for fun.

Launch Demo

There are lots of neat tricks and surprises that you will find out about their products, and for the price, it’s definitely worth it to give it a try. Either way, you are welcome to call or contact them to ask any questions. Sometimes it may be for you, sometimes they aren’t. From a designer’s perspective, I really enjoy the products even though they are meant for photographers (pretty ironic).

Check them out and follow them on twitter @intothedarkroom to see some tweets on photography, and also discount codes you can use for their products.

(I hope I didn’t sound too promotional)

As far as Vegas go, I’ll be there from March 5th to March 8th. I’ll record and take pictures, and I’ll post them when I can.

And some more updates…

As you probably noticed, I changed my website a bit. I added Flickr gallery, tag could, and reorganized a few things. I’ll be posting up more photoshop tutorials in the future as well as continuing with my HTML adventures and soon-to-be Wordpress documentation. Thanks for subscribing to me, following me on twitter, and participating and commenting on my tutorials and other posts.

New projects are soon to come, so make sure you’re around when I start launching my ideas. I’ll be around and I’ll probably post again when I’m in Vegas if there’s WiFI in the hotel.

They’re not blogs, and they’re definitely not just a gallery of pictures. These sites are actual communities or a group of artists put together that strive to push forward the limits of art and graphics and show the art community their talent.

depthcore

Depthcore is probably my favorite art group that release large packs (they call them “Chapters“) of artworks that are usually themed to a subject. All sorts of digital media are included such as graphics, digital drawings, 3D modeling, photography, and even music. This group contains some pretty big designers like Justin Maller, Pete Harrison, Nik Ainley and Jeff Huang.

I enjoy their music and all of the artworks posted in these chapters. With over 30+ chapters, if this is your first time visiting depthcore, then make sure you have some spare time to browse through them. Depthcore has grown a lot since its first establishment in 2002.

Visit Depthcore – http://depthcore.com

The Raster Group

The Raster Group was created in 2001 and is more targeted to digital art and drawings however you will see some other types of art in there chapters as well. Similar to depthcore, Raster is comprised of a group of artists showing their best work.

slashTHREE

slashTHREE is much like the others however containing a different collective of artists and designers. They feature graphics, artwork, music, photography, and even motion videos. One noticeable feature is their forum. Other artists and designers are able to talk to each other and network and even submit artwork to their art packs.

Behance Network

Behance Network is a community that holds a lot of portfolios of designers and artists. They contain many different types of artists, from graphics, and all the way to interior design. If you’re a designer, you should check the portfolios here and even apply for one as they also have a job board that you can check out and even employers themselves will seek for potential workers here.

deviantART

Deviantart is probably the most popular art community that’s out there. Being a very public place, any type of art is posted here. However, some of the quality of the work may not be as great as the other design community listed. (That’s purely based on the fact that deviantart has more quantity of works than the other communities)

deviantART is also a great center for resources and tutorials. Many artists contribute and share their works and resources so others can use them and make great work from them. You can also join communities and groups so you can be around other artists and designers that have similar interests as you.

One of my favorite feature of deviantART is the ability to favorite works and follow artists. With this feature you can always be updated when your favorite artists post a new piece of work or also view your gallery of favorites for inspiration.

Design Flavr

DesignFlavr is not really a community nor a group, but another inspirational design gallery site. I added this in here because it is also another great source of inspiration and showcases art of many different fields. Digital, Web, CG, Flash, Illustrations, and more. You can submit your own, and be featured here as well.

Conclusion

I hope you enjoyed my post about design communities. These art groups and communities always showcases great work since the submissions to the packs and chapters are selectively chosen and filtered to show the best ones. Thanks for subscribing and following my inspiration posts. If you have other communities in mind, leave a comment and share a link. I’ll see you again next Monday.

Final Result

Here’s what you will be making at the end of this tutorial (maybe not exactly, but the shape in there will be made):

You’ve probably seen these shapes quite often, whether it be my portfolio or in general designs out there. They are pretty trendy and add a lot of decoration to a design. When used right, the colors can be a great addition to a design and add that sense of abstractness.

Let’s set up our canvas. You should be able to do this with Photoshop CS and up. (maybe even Photoshop 7, it’s been a long time since I used that so I forgot whether it had custom shapes or not)

Step 1 – Setting Up Your Canvas

I always like to make a new canvas that’s 500px by 500px for all of my testings and experimentation when making shapes or brushes. It’s enough space to mess around with, and it’s not too small.

Step 2 – Setting Up Your Tools

The next step is to set up the custom shape tools so that you’ll be able to make your new custom shape. The settings I have are pictured above.

I turned Shape Layers on so that I can see the shape with color. And since this is our first shape it’s automatically defaulted to Creating a New Shape Layer. So pick the circle shape and let’s make our first circle.

Don’t make too big of a circle since you’ll need the space to add additional shapes.

Step 3 – Adding Multiple Shapes

While your circle is still selected (you’ll see a little ring around it), change the option of the custom shape tool to Add to Shape Area (+). From here, you can just have a free for all in making circles just like the picture below.

HINT: You don’t have to necessarily switch to that custom shape option. Rather you can hold shift, and your cursor will have a little plus sign similar to the cursor when you choose that option.

Step 4 – Subtracting From Your Custom Shape

Sometimes you may have added too many shapes, or you want to give your shape some interesting cuts in it. By choosing the Subtract Area (-) option, you can make shapes that will cut/erase your current shape like below.

It may look a bit busy, but if you wanted to see how your shape looks like without the pen lines, you can just hide them by pressing Crtl/Cmd+H.

Step 5 – Defining Your Custom Shape

After you finishing make your shape, select the pen tool from your tool bar or press the Photoshop shortcut key “P” and right click on the shape. You will see the option to “Define Custom Shape…”

After you click on that, name your custom shape and press “Ok“. You now have a custom shape. To access this custom shape, go to your custom shapes menu and look for it. Usually, newly created ones will show up last on the list.

And now you can use your shape as many times as you want, and even resize it without losing any pixels because it’s not rasterized yet.

Here’s my result after messing around with the same shape. I flipped it, I duplicated it, I rotated and changed it’s colors.

You can do a lot by making your own shapes. You’re not even limited to circles. Use other shapes, or even use custom shapes you’ve already made. The sky’s your limit on this one.

Conclusion

Thanks for looking at my tutorial about creating abstract custom shapes for Photoshop. If you have any questions or confusion, comment below and I’ll get to them. Show off your results as well here, or share a link.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic List Tags – OL and UL

More or less, you’ll be running into a situation where you need to list a couple of items or have multiple similar elements together. Sure you can use DIVs and Paragraph tags to do the same, however semantically speaking, if you have a list of items (to-do list, list of images, list of terms, list of navigation items), then you want to use the HTML list tags. There are 2 major list tags (there are more, but for the purpose of common HTML use, the other tags don’t get used as much as these).

OL – Ordered Lists

Ordered lists are lists that are meant to be in order such as a list of things to do to clean the dishes. For example:

Here’s the tag needed for an ordered list:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Simple enough. <ol> stands for ordered lists and you will see that you need to have list items for a list, and so that’s what <li> is for. For every item in the list, you should use an LI tag.

By default, the browser will automatically generate the numbers for you if you didn’t style them. I inserted the above code and put it in our index.html file that we should have.

UL – Unordered lists

Another type of list is an Unorderd list. An unordered list is similar to an ordered list except it will use bullets instead of numbers so that it becomes a list of things rather than a list of things that should be done in order or have any importance to them like a grocery list.

To create an unordered list, we will use the <ul> tag:

<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

When placed in the code, you’ll notice the bullets. With CSS, you will be able to replace those bullets with other styles like disc styles, squares, or even have a bullet image that you created yourself.

Why should we use lists?

Obviously lists are great to use when you’re making a list. You can style them in a way so that they pop out easily rather than trying to format with spaces. Another reason why lists are used is that it’s one of those things that makes sense to use when you do. You will see many websites that uses lists for their navigation, site maps, sidebar, image gallery, and so forth. The reason why is because of styling the list items.

The list items within the list will most likely carry the same styles such as color, font, background, etc.. Since they are part of a list, then they should be the same style which makes it easy for coding because you can just style the <li> and all the list items will follow that style. Remember all your lists can look different from each other by using [[ids and classes]] that we learned last tutorial.

Make sure to check out the additional resources below for more information on why you should use lists and how you should use them. (Pretty much the same reason here but more in depth)

Let’s practice making lists

Let’s open our index.html file. Basically we are going to make two unordered lists, and one ordered list. One <ul> will be used for the navigation, and the other will be a regular one so that later one I can show you that you can style lists differently. And finally, an <ol> will be used just for an example.

Our navigation:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>

Our other Unordered List:

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

Our Ordered List:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Here’s how my index.html looks like in the end.

<div id="wrapper">

<div id="header">
<span class="titles">My site Name</span>
</div>

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>

<div id="content">
<p>This should be a paragraph of text, but I'm too lazy to make
a block of them.  You can do it on your free time.</p>
<p>This is another paragraph of text that will contain more information.</p>

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

</div>

<div id="sidebar">
<p class="sidebar-text">Tiny information about this blog can be put here.
This will act as a side bar soon.</p>

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

</div>

<div id="footer">
<div class="footer-info">
<span class="copyright">Copyright 2010 MySite.Com</span>
</div>
</div>

</div>

And there you have it. The picture above shows what it looks like in firefox after you check it out. The source files for this lesson is at the bottom so you can compare your code with it, if you get lost. Our next lesson is going to change your perspective of HTML a bit. You might be saying how all of this HTML can convert into those sites that you see today. Well, all I can say is CSS does wonders in creating sites. I’ll make sure to have that tutorial soon.

Conclusion

That’s it for this segment of Basic HTML and CSS. We covered how to make HTML lists using UL, OL, and LI. Check out the additional resources below to understand them better in detail. If you have any questions or comments, feel free to leave your say below. I’ll have the next tutorial coming up soon.

Download Source Files (.zip)

Additional Resources

W3 Schools – HTML Lists
Using HTML Lists Properly
Why use lists for site navigation?

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic Body Structure

Every site or blog contains the same HTML basic body structure. All sites roughly contain the following elements to their coding: Header, Navigation, Content, Sidebar, and Footer

Header – Usually comprises of big pictures, graphics, or a logo of your site. This part is what most people like to exaggerate on as it’s usually very appealing.

Navigation – Like its name, it’s the navigation part of your site. Your main links that will help navigate your audience through your site.

Content – The content section is usually where your main area will be that holds your content, posts, galleries, and such forth.

Sidebar – Although not really a necessity (it’s been a popular thing throughout many blogs), it contains additional information that may appeal to the user or even additional navigation items. (i.e Twitter Feed, Subscribe links, Search, etc…)

Footer – And finally, the footer is usually the place where the copyright is held although lately it’s been a trend where footers begin to hold extra information like recent posts, affiliates, short bios, and the list goes on.

If you break down any site to its core, you will begin to see the structure and also see that they are same. It’s the graphics, styling, and implementation of that structure that makes the website/blog all unique.

Let’s start off with some basic DIVs

The most common HTML tag you will see in a site other than a link tag or image tag is a DIV tag. I believe DIV stands for division which means, it makes a division or section on a site. This is true because that’s what it actually does. The DIV tags will take whatever’s inside them and treat them like it’s own section. So why is this useful?

DIVs will help your separate everything on your site and with CSS (Cascading Style Sheet), you can manipulate those sections. Let’s see how we can put it into use with what we know. Open up your HTML document (I’m using the index.html from the last tutorial)

The following is a basic html structure that will be put inside the <body> tags of your html site.

<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

You may notice my formatting on the picture is different from the posted code. Every designer have their coding preferences so it’s good to find yours as well. I like to tab in any element that’s a part of another element.

Speaking of that you may notice an additional div tag added in the beginning called “wrapper” and that div actually ends after footer meaning it contains all of those div inside. A “wrapper” is a popular div that most websites use to contain their site in. And with a wrapper you can do many things with CSS such as controlling how wide your site is, whether your site is left align, centered, or right aligned, and more.

To understand this better, I always like to think of the “wrapper” as wrapping paper and whatever is inside the wrapper is the gift. And from that analogy you can understand that all the stuff inside the wrapper is contained by the wrapper and takes the shape of it. In which case if my wrapper is 1200px wide, then all my contents inside is 1200px wide (unless it’s changed specifically with CSS).

In fact that’s how the DIV tag works in general. The DIV wraps all the elements that’s inside together, and these elements will follow the styling of that DIV.

Hopefully, you’re not lost with that. Let’s continue with something else you may have noticed.

What’s ID?

IDs and Classes

For any tags, we can give them a label: id or class

And they can be referenced as follows:

<div id="name"></div>
<div class="name"></div>

You may be already asking, what’s the difference? Well, here’s an article that explains well the difference between ids and classes. In short, we use ID for cases where the element is unique and will only be used once per page and we use CLASS for elements that are going to be used frequently.

Examples for ID include: Header and Footer. For the most part, sites only contain one header and one footer on one page.

Examples for CLASS include: Thumbnails and Post Titles. These elements will appear all over your blog if you have posts.

Reminder that you can give an element a class and id. To fully understand the difference and how to use them is one of those things you have to work with and experiment. Again, I recommend that article about ids and classes to help you understand them in more detail.

Other Useful Tags – Paragraph and Span Tags

Some other useful tags that we will be discussing now is the Paragraph Tag and the Span Tag.

The paragraph tag is simply what it says. It’s mainly used to break off paragraphs meaning whenever you have a paragraph of information you would want to include all of that into a paragraph like below:

<p>
This is a paragraph of information.  P tags work just like a DIV tag whereas
anything inside this P tag will take on the CSS styling of P tag.  You can even
add classes and an id to this so that it becomes unique to other
paragraphs.
</p>

When to use DIV tag or P tag?

It may be a stupid question but it’s a legit one. The real answer to it is “Yes, you could” but the preferred answer is “No, you shouldn’t”. You want to code your sites so that it’s semantically correct to a point. If you have a paragraph of text, then use <p> otherwise if your section contains a lot of elements in it then use <div>.

It’s up to you to figure out how to use these tags. The more you code the more you’ll understand them better. (Truth be told, as a freelancer, I didn’t know much on what these tags were. I just used them and the more I coded, the more I found out that it made sense to use P tags for blocks of texts and such forth).

And the last tag we’ll learn for today is the <span> tag.

<span> – from what I understand and use it for, is a tag mainly for text. So if you have a certain text or certain texts that require styling then I use <span> tags. Examples would be making certain text on the site a certain size if it’s a special word or something. You’ll see how I use it when we get to the real coding portion with CSS.

An example of using span would be like this:

<span>Red Text</span>

And that’s it.

Let’s put it all together

So we’re basically going to make a site right now. It won’t be styled, but it will be a functional page that has information, and that can link to another page.

We already have our Basic body structure in our <body> tag, so let’s fill in some of those sections.

<div id="wrapper">

<div id="header">
<span class="titles">My site Name</span>
</div>

<div id="navigation">
<a href="index.html">Home</a>  |  <a href="about.html">About</a>
</div>

<div id="content">
<p>This should be a paragraph of text, but I'm too lazy to make
a block of them.  You can do it on your free time.</p>
<p>This is another paragraph of text that will contain more information.</p>
</div>

<div id="sidebar">
<p class="sidebar-text">Tiny information about this blog can be put here.
This will act as a side bar soon.</p>
</div>

<div id="footer">
<div class="footer-info">
<span class="copyright">Copyright 2010 MySite.Com</span>
</div>
</div>

</div>

And there you have it. The above is what the page actually looks like rendered in Firefox. Copy that code for both your index.html and about.html and you have yourself a site. Don’t just copy and paste and wait for the next tutorial. Play around with it and add more div tags or p tags. You will begin to see how it all matters in the next tutorial.

Conclusion

That’s it for this segment of Basic HTML and CSS. We covered the basic structure that goes into most websites, went through a few tags: DIV, P, and SPAN, and also talked about the difference between IDs and Classes. In our next tutorial we’ll be starting to use CSS. Although the next thing on the list is UL, LI, and OL, I will be covering CSS as well, since the next lesson will be a short post.

Before you head out, comment if you have any questions or even suggestions. I’m open to learning more and also making my tutorials better since I want everyone to understand them. Thank you for viewing my tutorial, and I’ll see you next time.

Download Source Files (.zip)

Additional Resources

Differences of IDs and Classes
Semantic Uses of Tags