Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Designing websites; ideas and tutorials advice
New Posts  All Forums:Forum Nav:

Designing websites; ideas and tutorials advice

post #1 of 8
Thread Starter 
Hello everyone, I haven't done anything with html and CSS in about a year and a half, but I wanted to get back into it and came across a site that had some really useful HTML5 and CSS3 tutorials and I'm getting my chops back and learning new things. The coding is not what I have problems with, it is the design aspect. Anybody have any tutorials on how to make cool looking banners and backgrounds and icons for websites?

I want something that is going to teach me how to use my own stuff, not just copying someones work. I have some experience using Photoshop, I took a class in it two semesters back using CS4. I would prefer some tutorials using GIMP, because I would like to learn it, and also use it on Linux. I want to get back into using more open source programs than proprietary applications. Also, GIMP is cross platform, I can use it on my sig rig, and my macbook. Thanks
    
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge ASRock Z68 Extreme3 Gen3 Sapphire 6950 2GB Toxic Edition G.SKILL Sniper Low Voltage Series 8GB 
Hard DriveOptical DriveOSPower
256GB Corsair SSD ASUS Windows 7 Professional 64-bit CORSAIR CMPSU-750TX 750W 
CaseMouse
NZXT Phantom (Black and Orange) DeathAdder 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge ASRock Z68 Extreme3 Gen3 Sapphire 6950 2GB Toxic Edition G.SKILL Sniper Low Voltage Series 8GB 
Hard DriveOptical DriveOSPower
256GB Corsair SSD ASUS Windows 7 Professional 64-bit CORSAIR CMPSU-750TX 750W 
CaseMouse
NZXT Phantom (Black and Orange) DeathAdder 
  hide details  
Reply
post #2 of 8
google is your friend. search "gimp website design"
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #3 of 8
Thread Starter 
was looking for something a bit more helpful as far as ideas and tips, not only tutorials, but thanks anyways.
    
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge ASRock Z68 Extreme3 Gen3 Sapphire 6950 2GB Toxic Edition G.SKILL Sniper Low Voltage Series 8GB 
Hard DriveOptical DriveOSPower
256GB Corsair SSD ASUS Windows 7 Professional 64-bit CORSAIR CMPSU-750TX 750W 
CaseMouse
NZXT Phantom (Black and Orange) DeathAdder 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge ASRock Z68 Extreme3 Gen3 Sapphire 6950 2GB Toxic Edition G.SKILL Sniper Low Voltage Series 8GB 
Hard DriveOptical DriveOSPower
256GB Corsair SSD ASUS Windows 7 Professional 64-bit CORSAIR CMPSU-750TX 750W 
CaseMouse
NZXT Phantom (Black and Orange) DeathAdder 
  hide details  
Reply
post #4 of 8
Perhaps look into www.lynda.com they have some nice tutorials there that walk you through the process of learning software such as CS5 as well as programming languages step-by-step for beginners.
Bernard
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 3.71 Ghz | 1.17v Rampage III Extreme EVGA GTX 580 Corsair Dominators GTX 6gb 1925MHz 7-7-7-20 
Hard DriveOptical DriveOSMonitor
64Gb C300 SATA 6 Gb/s, 2 x 320 Gb F4's RAID 0 ASUS 24x -_- Windows 7 Home(Who needs ultimate?!) ASUS VH226H 21.5 Inch 1080p 
PowerCaseMouseMouse Pad
Corsair HX1000 + Custom Sleeving NZXT Tempest Evo Razer Naga NONE 
  hide details  
Reply
Bernard
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 3.71 Ghz | 1.17v Rampage III Extreme EVGA GTX 580 Corsair Dominators GTX 6gb 1925MHz 7-7-7-20 
Hard DriveOptical DriveOSMonitor
64Gb C300 SATA 6 Gb/s, 2 x 320 Gb F4's RAID 0 ASUS 24x -_- Windows 7 Home(Who needs ultimate?!) ASUS VH226H 21.5 Inch 1080p 
PowerCaseMouseMouse Pad
Corsair HX1000 + Custom Sleeving NZXT Tempest Evo Razer Naga NONE 
  hide details  
Reply
post #5 of 8
Quote:
Originally Posted by genji View Post
Hello everyone, I haven't done anything with html and CSS in about a year and a half, but I wanted to get back into it and came across a site that had some really useful HTML5 and CSS3 tutorials and I'm getting my chops back and learning new things. The coding is not what I have problems with, it is the design aspect. Anybody have any tutorials on how to make cool looking banners and backgrounds and icons for websites?

I want something that is going to teach me how to use my own stuff, not just copying someones work. I have some experience using Photoshop, I took a class in it two semesters back using CS4. I would prefer some tutorials using GIMP, because I would like to learn it, and also use it on Linux. I want to get back into using more open source programs than proprietary applications. Also, GIMP is cross platform, I can use it on my sig rig, and my macbook. Thanks
You're smart to start learning CSS3 and HTML5.. not that much changes in them. I know you said you don't need much help with the programming stuff, but I just want to point you to w3schools.com (just in case you weren't aware of it already).

As far as tutorials for designing websites visually, here's a decent article:

http://lifehacker.com/#!5753625/basi...ning-a-website

I know that uses photoshop, but you can take concepts from the article.

Advice on visual design.. keep it simple. It's easy to make things overly complicated and to use too many special effects and what not. Keep it simple and elegant, otherwise it will look unprofessional.

I don't know much about GIMP, I use Photoshop/Dreamweaver to do most of my design work. I also have a virtual server that I "host" my websites on, to view them in different browsers.
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
post #6 of 8
Interesting is Gimp better for designing a template over photoshop?
Nachielous
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II X6 1090T MSI 890FX GD65 Sapphire ATI Radeon 6950 X2 G.SKILL Ripjaws Series 4GB (2 x 2GB) 
Hard DriveOSMonitorKeyboard
1.5 TB Western Digital Win 7 64bit Ultimate  LG Flatron 23inch Steelseries Stealth 
PowerCaseMouseMouse Pad
Coolermaster 700w HAF 932 Black Interior Logitech MX518 Laser Mouse SteelPad Qck+ 
  hide details  
Reply
Nachielous
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II X6 1090T MSI 890FX GD65 Sapphire ATI Radeon 6950 X2 G.SKILL Ripjaws Series 4GB (2 x 2GB) 
Hard DriveOSMonitorKeyboard
1.5 TB Western Digital Win 7 64bit Ultimate  LG Flatron 23inch Steelseries Stealth 
PowerCaseMouseMouse Pad
Coolermaster 700w HAF 932 Black Interior Logitech MX518 Laser Mouse SteelPad Qck+ 
  hide details  
Reply
post #7 of 8
Quote:
Originally Posted by nachielous View Post
Interesting is Gimp better for designing a template over photoshop?
it is if you dont own photoshop
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #8 of 8
Quote:
Originally Posted by nachielous View Post
Interesting is Gimp better for designing a template over photoshop?
The adobe creative suite allows for many streamlining features that greatly speed up your workflow. Learning Photoshop and Dreamweaver can prove to be invaluable.

I would encourage you to learn it, just because the user base is gargantuan.
Bernard
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 3.71 Ghz | 1.17v Rampage III Extreme EVGA GTX 580 Corsair Dominators GTX 6gb 1925MHz 7-7-7-20 
Hard DriveOptical DriveOSMonitor
64Gb C300 SATA 6 Gb/s, 2 x 320 Gb F4's RAID 0 ASUS 24x -_- Windows 7 Home(Who needs ultimate?!) ASUS VH226H 21.5 Inch 1080p 
PowerCaseMouseMouse Pad
Corsair HX1000 + Custom Sleeving NZXT Tempest Evo Razer Naga NONE 
  hide details  
Reply
Bernard
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 3.71 Ghz | 1.17v Rampage III Extreme EVGA GTX 580 Corsair Dominators GTX 6gb 1925MHz 7-7-7-20 
Hard DriveOptical DriveOSMonitor
64Gb C300 SATA 6 Gb/s, 2 x 320 Gb F4's RAID 0 ASUS 24x -_- Windows 7 Home(Who needs ultimate?!) ASUS VH226H 21.5 Inch 1080p 
PowerCaseMouseMouse Pad
Corsair HX1000 + Custom Sleeving NZXT Tempest Evo Razer Naga NONE 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Designing websites; ideas and tutorials advice