Member Avatar for chris_j_haines

Hello people

I have been learning HTML/CSS and PHP for some time now, I am getting alot better with the coding side of things and I am slowly developing.

I am now geting to the point where I can do the coding side and layout in CSS but the pages I produce are very basic from the graphical point of view.

I really need to learn web graphics so I can produce logos and graphical elements of a web page but I dont know where to start. I have very little experience with graphics software and would like some advice about where to start learning this online. Has anyone got any site which has beginners tutorials which are step by step.

I know its a big ask but any advice would be appreciated

Thanks
Chris

  • 8 Contributors
  • 9 Replies
  • 245 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by WebStudio Pros

Dani AI

Generated

A compact, practical plan for the OP and anyone who can code but needs usable graphic skills. Several replies in this thread point toward tutorials and practice; the notes below turn that advice into a stepwise, repeatable design->code workflow so a programmer can produce clean logos, UI elements and page art without becoming a full-time designer.

Start with fundamentals then practice in small pieces. Learn basic layout, visual hierarchy, spacing, contrast and typography first. Make short exercises: recreate a simple site header, a card, and a call-to-action block. Use one raster editor and one vector editor and focus on mastering layer organization, guides, and export settings rather than juggling many tools.

Design-to-code workflow (practical steps)

  1. Wireframe at tablet/desktop widths. Decide 1–3 breakpoints.
  2. Build a full mockup on an artboard (name and group layers clearly).
  3. Export assets with a consistent naming convention (logo.svg, hero-800.jpg, icon-32.png). Prefer vector for logos and icons; export raster photos at multiple sizes.
  4. Translate the mockup into semantic HTML, then recreate visuals with CSS (flexbox/grid, fonts, spacing). Avoid slicing whole sections into images when CSS can do the job.

Immediate, copy-paste examples:

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w"
     sizes="(max-width:600px) 100vw, 800px"
     alt="Marketing hero">
.button {
  display:inline-block;
  padding:10px 16px;
  border-radius:4px;
  background:linear-gradient(#fafafa,#e6e6e6);
  box-shadow:0 2px 4px rgba(0,0,0,0.12);
  text-decoration:none;
}

Quick troubleshooting and workflow tips: export 1x and 2x assets for high-density screens; use inline SVG for colorable logos; add meaningful alt text; test layouts in browser dev tools at your breakpoints; compress images and enable lazy loading for large visuals. Turn the suggestions from , , and into ten small projects (header, hero, form, card, footer, etc.) and iterate—each mini-project builds practical skill faster than long theory.

Recommended Answers

All 9 Replies

Member Avatar for Monstette

I use GIMP, Flash and Photoshop, find every tutorial i need from YouTube. You can use the GIMP site for tutorials but i find YouTube is best. A few youTube channels that might help: Gimp- GIMPtricks , Photoshop - photoshopmama or iceFlowStudios . . . cant help much with flash cause I'm searching for the right channel

Edited by Monstette because: n/a
Member Avatar for srajanbill

you can download full site open the index deamweaver then see the port which is the connection css apply that same thing work your website.

Member Avatar for pgmco

Practice makes perfect. Spend as much time testing and learning and take some tutorials and you will slowly get better. The more time spent the faster you will learn.

Member Avatar for IkramMirza

Hello people

I have been learning HTML/CSS and PHP for some time now, I am getting alot better with the coding side of things and I am slowly developing.

I am now geting to the point where I can do the coding side and layout in CSS but the pages I produce are very basic from the graphical point of view.

I really need to learn web graphics so I can produce logos and graphical elements of a web page but I dont know where to start. I have very little experience with graphics software and would like some advice about where to start learning this online. Has anyone got any site which has beginners tutorials which are step by step.

I know its a big ask but any advice would be appreciated

Thanks
Chris

you have to learn CSS ,HTML and for graphics photoshop and flash is best option for this pupose.

Member Avatar for chris_j_haines

you have to learn CSS ,HTML and for graphics photoshop and flash is best option for this pupose.

I know CSS and HTML and am looking for good tutorial sites where they have step by step illustrated tutorials in designing website in photoshop and converting them the CSS and HTML.

I am a programmer not a designer

Member Avatar for IkramMirza

Hello people

I have been learning HTML/CSS and PHP for some time now, I am getting alot better with the coding side of things and I am slowly developing.

I am now geting to the point where I can do the coding side and layout in CSS but the pages I produce are very basic from the graphical point of view.

I really need to learn web graphics so I can produce logos and graphical elements of a web page but I dont know where to start. I have very little experience with graphics software and would like some advice about where to start learning this online. Has anyone got any site which has beginners tutorials which are step by step.

I know its a big ask but any advice would be appreciated

Thanks
Chris

If you want to be a web designer then visit w3school. It will teach you CSS and HTML.

Member Avatar for shiva07

You can take the help of youtube and some graphics websites.

Edited by shiva07 because: n/a
Member Avatar for xiÇŽo

hey, you have already got some good suggestions here but I would also recommend deviantart for tutorials there are really talented designers on there and most will be happy to help! another place is ndesign-studios they have step by step tutorials for drawing graphics in photoshop/ illustrator I did it the other way around studying graphics and web design first and then development..not a good plan most of my designs were unrealistic for my level of programming for ages but I got there and so will you, good luck!

Member Avatar for WebStudio Pros

I had the same dilemma a couple of years ago, so that lead me to study Visual Graphics Design.. it really helps a lot. and one thing more, you can buy magazines and try to copy color schemes and design your own. download brushes for your photoshop, learn vector.. buy a pen tablet. and just design.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.