Icon-A-Day, Icon # 25, My Pictures Folder
The Last of the "My" Folders. 11:54pm. Made it in :)
Monday, January 31, 2005 by mormegil | Discussion: Icons
| Icon 25 (My Pictures Folder) It's a bit late tonight, but I promised the My Pictures Folder today, and I don't want to make a liar of myself. So lets get moving before time runs out. |
||
| Step 1:
First thing first, we copy our Open Folder icon. .jpg) |
Step 2: Now I want to have some photos in the folder, and a brush in front, leaning on the folder. This should match the My Music and My Video folder and help us keep a consistent style. I mock these up with some rectangles and the mesh tool. .jpg) |
Step 3: Once I am happy with the overall layout of my elements, I go in with the mesh tool and start doing some details. See the Mesh Fill Video for more on how I do this. .jpg) |
| Step 4: Once I have my brush looking ok, I give the brush handle some gloss; (See Gloss video for more on this) .jpg) |
Step 5: I want the brush to be trailing some paint, so I use the mesh tool to give myself a blob of paint trailing off the brush head. .jpg) |
Step 6: Now, most people will use this folder for Photos so lets make some. I take some pictures that I stole from the Galactic Civilizations Artwork folder. Using the Node edit tool I crop them so they fit on our Photo shapes I have already done. .jpg) |
|
Step 7: Using basic drawing techniques I make a border for the Photos, as well as corners to make them look a bit more stylized. .jpg) |
Step 8: Now using the Drop Shadow Techniques we have gone over I make some drop shadows for the brush, to make it look a bit more realistic. .jpg) |
Step 9: Now using the Reflection Techniques we have used before, I make a subtle reflection on the folder, and one on the floor in front of the folder.
|
|
Finished Icon Image
|
SS.jpg){kind=icon} Click here to download the finished icon. |
|
|
Tomorrow we will try a more obscure, but important
none-the-less, folder, so check back in then. |
||
.jpg)
.jpg)
PHP vs. ASP.NET Part 2
All alone in a sea of information...
Monday, January 31, 2005 by Zoomba | Discussion: Websites
After the little piece of advice from mick_k, I was able to get a large chunk of my current task done. Now however I'm facing a new problem in my transition from PHP to ASP.NET but this time it has nothing to do with the languages or technology. In fact this is purely an information problem. Namely, where do I go for help?
With PHP, the official site is an amazing resource for how to get functions and commands to work right. Each and every bit of the language has an online manual entry that gives the syntax, the programmer manual definition plus a few REAL examples of how it could be implemented. Then on every entry there is space for user comments where people share their own solutions and implementations. The official reference is a bounty of information that is much more practical than academic. Then there's the flood of online PHP help and resource sites out there. PHPBuilder.com is one of my all-time favorites for its forums and great code library.
The same does not hold true for the ASP.NET, C# or VB.NET MSDN sites. It's all a programmer reference that shows the syntax in cryptic programmer-ese that scares away the casual coder or complete newcomer. Even the official forums and "community" site GotDotNet.com are of limited use. the ASP.NET forums are moderated, you can't even post a question or respond to a question without someone reviewing it and approving it. Makes it take forever for simple questions to be addressed. Their community site supposedly has tons of sample code, but the interface is so cumbersome and the descriptions so vague, that you really have to work hard to find anything related to what you need.
In terms of books for the two. I have the PHP Bible for PHP4 and ASP.NET Unleashed 2nd Edition for ASP.NET. Both have been highly recommended by their respective communities as the best books for anyone learning the language and looking for a good reference book. I can honestly say that ASP.NET Unleashed 2nd Edition does not do the job as well as the PHP Bible does. For one, it assumes you know the chosen underlying programming language (this is a failing of ASP.NET IMO) and doesn't really explain how to work between normal pages and ASP.NET. ASP.NET is great and all, but there are many times you'll likely have to move around with static pages too. The language and writing style of PHP Bible is also infinitely more readable.
Why is it that PHP, a free language and server implementation that has but a small company (Zend) backing it has so many better resources of information that ASP.NET, a language that is supported by Microsoft and ties in to their biggest development initiative in recent memory (.NET) is harder to find good information on? Is it the added layer of complexity when working with ASP.NET that prevents this? In order to do what I'm doing right now I also needed a book on C# to program the logic behind the scenes. C# sites are even harder to come by.
Online resources are incredibly important for developers both new and old. They should be easy to find, and comprehensive in the information they present. To those of you who have worked on either side (PHP or ASP.NET) What are your favorite resource sites and books? What was the greatest help to you when you were first learning?
Spread the joy
Icon-A-Day, Icon # 24, My Video Folder
Let us move away from globes and start a string of Folders.
Sunday, January 30, 2005 by mormegil | Discussion: Icons
| Icon 24 (My Video Folder) Now that I have had just about enough of Network icons I want to move on to something different. Today we will take a stab at the My Video folder. | ||
| Step 1: First thing first, we copy our Open Folder icon. |
Step 2: Now using a bunch of Rectangles I make myself a section of film. .jpg) |
Step 3: I combine the small rectangles and together with the big background to make our sprocket holes. Then I take my big rectangles, and Trim the background. This gives us our black film area, then I move my big rectangles up to make the "picture" section of the film. .jpg) |
| Step 4: Now I have my piece of film. I make it a group. Then I use the Envelope tool to distort the film, so it looks more realistic. .jpg) |
Step 5: I ungroup the piece of film and give the black portion of the film a gradient of black, dark red, and dark blue. I fill the center of the film with a cloud fractal. I also make the center portions slightly transparent. .jpg) |
Step 6: Using the Contour tool I inline the Black portion of the film and give it some glare. I do the same with the center of the film. For more on making Glare check out the Gloss 101 Video. .jpg) |
| Step 7: Now I want a film reel to be leaning on the folder, so I use the circle tool to make a 2d reel and Combine it into one shape. .jpg) |
Step 8: I take the Perspective tool, and distort the reel till it looks right. Then once again I copy the new reel and shrink it and offset it a bit to make the back of our reel. .jpg) |
Step 9: Using the Circle tool and a the Spiral tool I make some film to go inside our real. I use the perspective tool to distort it a bit to fit inside properly.
|
| Step 10: I use the Contour tool to create a few inside lines that I can duplicate a few times to make a bit of groove on our reel. I also fill all our shapes in the real with some gradient fills.
|
Step 11: Using the Techniques from Reflection 101 and Drop Shadows 101 I make some shadow and reflection for the reel and the folder. .jpg) |
Finished Icon Image.jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. | ||
|
Moving on now I think we shall do the My Picture folder tomorrow. So check back in then. | ||
.jpg)
.jpg)
Icon-A-Day, Icon # 23, Email
Ok, so I forgot one globe.
Saturday, January 29, 2005 by mormegil | Discussion: Icons
| Icon 23 (Email) After all my talk about being done with the globes I realized that I forgot one, and one of the most important icons at that: The Email icon. For some time now I have been using the convention of an envelope and a globe for email. I am quite sick of it, but it is the most easily understood symbol and probably the most popular so we will go with it again here. |
||
| Step 1:
First we copy our Internet icon and remove the cord and plug. .jpg) |
Step 2: I decided to keep the bottom cord of the Internet icon so I move it back, I also offset the globe to the left of my Guide box. Now with a Rectangle and the Mesh tool I block in our envelope. .jpg) |
Step 3: I place a few more mesh rectangles over my envelope to make doing the details easier. .jpg) |
| Step 4: I go though the new shapes with the mesh tool and mold them into the envelopes folds and flap. .jpg) |
Step 5: Once I am happy with the envelope I use the same Reflection technique we have been using and give the envelope a reflection. .jpg) |
Step 6: I quickly pull a drop shadow off the cord and give the envelope some texture with the Interactive Transparency tool. .jpg) |
Finished Icon Image.jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
|
|
Ok, now I am done with the globes. Really this time I
mean it... I think... Later this weekend: CorelDRAW For Skinners, Part
3. |
||
Icon-A-day, Icon # 22, Sharing Overlay.
Sick and tired of Globes.
Friday, January 28, 2005 by mormegil | Discussion: Icons
| Icon 22 (Sharing Overlay) We have had enough of globes for awhile, but we have a lot of non-glamorous icons to create if we are planning on completing a full icon pack. One of the icons that always seems to be a problem is the Sharing Overlay. The thing you have to keep in mind with this one is where it is going to be used. We have established a convention with this pack of using cables to represent network connections, so I am going to go with that for our Overlay, something similar to what we have used in the Network Computer icon. |
||
| Step 1:
First thing I do is mock up the general shape of our overlay. I place it on top the existing folder icon, to make sure it fits. .jpg){kind=icon} |
Step 2: Now since what is shared the most are folders and drives, I make sure it looks ok overlaying the Hard Drive icon as well. .jpg){kind=icon} |
Step 3: Now I copy over the Network Computer Cable just to use as a guideline for our new cable. I use the Mesh Tool and a Rectangle to start molding our new cable. .jpg){kind=icon} |
| Step 4: To save a bit of work I copy the join I used in the Network Computer Cable and tweak its size, making it useful for our new cable. Then I create another cable with the mesh tool. .jpg){kind=icon} |
Step 5: Now using some circles and Radial fills I make my "Plug" that will connect to the icon that we are overlaying. .jpg){kind=icon} |
Step 6: Now I pull a shadow off our cord, and using the Interactive Transparency tool I fade out the edges of the cables and shadows. .jpg){kind=icon} |
| Step 7: Last step is to place these overlays over the folder and drive icons to see how they look. .jpg){kind=icon} |
Finished Icon Image.jpg){kind=icon} |
SS.jpg){kind=icon} Click here to download the finished icon. |
|
Tomorrow I will try and do something a bit more exiting.
Also check in for the next installment of CorelDRAW for skinners. |
||
Icon-A-Day, Icon # 21, Network Computer.
Just about done with the network icons.
Thursday, January 27, 2005 by mormegil | Discussion: Icons
| Icon 21 (Network Computer) This should be the the last of the Network related icons for now. Most people never see this icon, but I always feel bad if I don't include all the supported icons. It is also nice to have since people use it for a lot of other things. |
||
| Step 1:
First we copy our My Computer icon. .jpg) |
Step 2: Now I take our image of Earth from the other night and crop it down a bit. .jpg) |
Step 3: Using the Bitmap Perspective effect I give it a bit of a taper, and Crop it down to fit in our monitor as our screen image. .jpg) |
| Step 4: Now that I have our bitmap in place I give it some Gloss. .jpg) |
Step 5: Using some rectangles and the Mesh Fill tool I draw in a cord below the monitor. .jpg) |
Step 6: I using some more rectangles and the Mesh Fill tool, I draw in some graphics that will be my cable joins. .jpg) |
| Step 7: With the Mesh Fill tool I sculpt our Cable joins to look more metal. .jpg) |
Step 8 I finish up the cord with the Mesh Tool, and make a drop shadow off the cord. I also use the Interactive Transparency tool to fade out the edges of the bitmap and shadow. .jpg) |
Finished Icon Image..jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
||
|
Now I am sure everyone is sick of Network Icons for
awhile, so tomorrow I am going to do something different. Tune in then
to find out what. |
||
PHP vs ASP.NET Part 1
Revelations I've Had While Trying To Learn ASP.NET
Thursday, January 27, 2005 by Zoomba | Discussion: Websites
So, I've been trying to learn ASP.NET for the purpose of building this tool. In the short time I've been at this, I've been frustrated by the needless layers of complexity Microsoft introduces into the process of building a dynamic web page. This is the first part in what will likely be a multipart series of articles in which I compare and contrast PHP and ASP.NET. This will be the foundation for a later report I've been asked to write for the head of the Architecture Practice here to show the relative merits of adding PHP to the supported list.
I admit I'm biased here by the fact that I am familiar with one, but not the other. However, I'm going to try and limit my points to items where there is a clear difference between the two... Each of these articles will compare and contrast the two on a specific problem I'm encountering.
1.) How Much Do You Need To Know?
Ok, lets say you want to create the most basic dynamic page. All you want to do is have a form with a text field that you fill in with whatever text you like, and when you click submit, it loads a page that displays that text and nothing more. No databases, nothing complicated. How much do you need to know to do that in either language? Well, let's take a look...
PHP
Languages Needed: PHP, HTML
Solution method: The form page is simple HTML form, all it does is POST to the target php page to display the text. The target PHP page grabs the posted field, assigns it to a variable and prints it to the screen. Lines of code in PHP... 2.
ASP.NET
Langauges Needed: ASP.NET tags, HTML, VB.NET/C#/Whatever your desired .NET language is... so in essence, 3 languages
Solution method: Well, in ASP.NET, you don't POST to other pages, you POST back to the same form, write a button click event that processes the information and assigns it to a variable. Then either redirect everything to a second page, or load the variable as a label somewhere on the original page. Lines of code? Too damn many. I still haven't figured this out properly. I know for damn sure it's a lot more than 2 lines though.
Icon-A-Day, Icon # 20, Web Folder.
Twenty Icon down, forty or so to go.
Wednesday, January 26, 2005 by mormegil | Discussion: Icons
| Icon 20 (Web Folder) As we move down though the Network related icons, we come to the Web Folder. I want this folder to meet some of the standards that we set with the My Music folder, so here we go. |
||
| Step 1:
First we copy the Open Folder icon. .jpg) |
Step 2: Now we simply copy the globe and cord from our My Network Computer icon. .jpg) |
Step 3: We place them together to get the basics of our folder. .jpg) |
| Step 4: Now I take the HTML File from earlier and remove the glare and the color band from it. Group it, and using the Perspective tool make look like it is sitting in the folder. I also place it behind the front of the folder. .jpg) |
Step 5: Now using the Gloss techniques we have been using, I add a new glare that fits a bit better than the old one. .jpg) |
Step 6: Now using the mesh tool I tweak our existing cord to make it look like it is going behind the folder. .jpg) |
| Step 7: Now the changes I made to the Cord have left me with a shadow that is not correct, so I quickly crop it down to look right, again using the Node Edit tool. .jpg) |
Step 8 I copy the globe and convert it to a bitmap, Crop it and make it 60% Transparent and offset it a bit to get a little reflection on our folder front. .jpg) |
Finished Icon Image..jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
||
|
Now we have once more set the standards for our our
folders, and we have a style to match from here on out. Also we have
cemented the convention of using the cord to unite all of our Internet
related icons to the "world" |
||
Icon-A-Day, Icon # 19, My Network
Once more we find new homes for the icons we have done already.
Tuesday, January 25, 2005 by mormegil | Discussion: Icons
| Icon 19 (My Network) Now we move on to our My Network icon. I would like to think of some really cleaver convention for this, but I have not had any luck so far. What I, and most other icon makers seam to do, is a computer with a globe or two computers together. Since we have a neat looking globe I figured we go with it one more time. |
||
| Step 1:
We will get started by copying our My Computer icon, and shrinking it down about 80%. .jpg) |
Step 2: Now we Copy our Internet icon over, and shrink it down and place to the lower right of our guide box. I also delete the cord and its shadow. .jpg) |
Step 3: Now I make a new cord, leaving our plug on the globe and running off behind the Computer. I do this with the Mesh Fill tool. .jpg) |
| Step 4: I pull a shadow off the new cord, and break it apart. Then I crop it down to make sure it looks right, using the Node Edit tool. .jpg) |
Finished Icon Image..jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
|
This is an important icon, though it was pretty simple to
make. Tomorrow we will move on to the Web folder. |
||
Icon-A-Day, Icon # 18, Network Drive - Offline
A few more tweeks and we have one more Icon.
Monday, January 24, 2005 by mormegil | Discussion: Icons
| Icon 18 (Network Drive - Offline) Today's icon is pretty much the same as yesterdays icon but with some tweaks. I almost included it with yesterdays icon, but there is a bit more work to it than I had thought, so I decided it was worthy of its own day. |
||
| Step 1:
First thing we do is copy our Network Drive icon from yesterday. .jpg) |
Step 2: I move the cord out of the way, and Convert the globe to one bitmap. Then I make it slightly Transparent. I will tweak this later. .jpg) |
Step 3: Now I move my globe out of the way, and with the Mesh tool I add some length to the cord, and bring it around to the back of the drive. .jpg) |
| Step 4: With my Mesh Tool I polish up the cord and pull a drop shadow off of it. I want the cord to look like it is missing the globe. .jpg) |
Step 5 I Crop and Fade the shadow and cord so they do not run out of our guide box. I move our globe back in position and adjust the Transparency until I can see the cord through it. I bring back our plug from the other icon and make its center blue instead of red. .jpg) |
Finished Icon Image. .jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
||
|
That finishes up the Default Hard Drive icons in our
pack. We still might do some more as bonus icons, but that will be
later. |
||