Department of Information Sciences and Computing Studies (DISCS) - New Era College Malaysia

Department of Information Sciences and Computing Studies (DISCS), a department which has more than 11 years of  experience with an exemplary record of delivering high quality Computing and IT education. The Department was established in 1998 and it is one of the pioneer faculty within the New Era College (the largest non-profit college in Malaysia, being funded by the Malaysian Chinese community). The DISCS is equipped with three computer laboratories, a multimedia computer laboratory, a student laboratory and a network laboratory.

The major goal of the DISCS is to prepare students for careers in Information and Communication Technology as Software Engineers, Systems Analysts, Network Administrators, Database Administrators, Web Developers, Web Designer, Multimedia Designer, Mobile Application Specialist, Systems Engineers, IT Managers, IT Strategic Planners and etc.

All our academic programmes have achieved the full accreditation standard from Malaysian Qualifications Agency (MQA) and also recognised by Jabatan Perkhidmatan Awam Malaysia (JPA), in addition to our ISO 9001:2000 quality standard.

The DISCS has established links with renowned universities and IT professional bodies in the world to provide our students with top notch tertiary higher education. Among our strategic partners are University of Gloucestershire (UK), University of Northumbria (UK), University of Hertfordshire (UK), University of the West of England (UK), Chaoyang University of Technology (Taiwan), National Cheng Kung University (Taiwan), Feng Chia University (Taiwan), Cisco Academy, EC Council, London Chamber of Commerce and Industry (LCCI), City & Guilds and etc.

The DISCS is involved in many research areas such as Human Computer Interfaces, Multimedia and Virtual Reality, Distributed Systems, Web Based Business Services, Multimedia Database Systems, Mobile Application, High Perfomance Computing and etc. The DISCS has been strengthening the academic programmes by periodical updates of curriculum, in order to keep abreast in the field of IT. In future, DISCS will offer more programmes to meet the increasing demands from both Malaysian and international students.

Lee Chyuan Chuan, William

Head, Department of Information Sciences and Computing Studies (DISCS)

My Workshop - Designing Professional Marketing Materials

Date: 13-15 December 2011 Venue: New Era College, Kajang Time: 9:00am – 5.00pm
Who Should Attend
This course is suitable for marketing executive, business executive and anyone who is new to adobe photoshop and illustrator publishing wishing to master the skills required for designing professional marketing materials.

Interested Please contact:

New Era College (SME Centre)
Dong Jiao Zong Higher Learning Centre Bhd
Tel: 03-87392770 ext.453 (Ms Jennifer Tan)
Fax: 03-87336799
Email: smecentre@newera.edu.my
Http://www.newera.edu.my/sme/English/index.php

Top 10 Student Graphical User Interface Assignment

Subject: Computer Graphics Editing

Lecturer: William Lee Chyuan Chuan

1. Title: Smart Phone OS User Interface Design
    Student Name: Lim Wooi Leong
    Course: Diploma in E-Commerce
    College: New Era College, Malaysia.

2. Title: Lift Controlling Systems User Interface Design
    Student Name: Haw Soo Wai
    Course: Diploma in E-Commerce
    College: New Era College, Malaysia.

3. Title: Smart Phone OS User Interface Design
    Student Name: Lee Eng Chen
    Course: Diploma in Web Development Technology
    College: New Era College, Malaysia.

4. Title: GPS Hologram User Interface Design
    Student Name: Jason Leng Hui Yee
    Course: Diploma in Web Development Technology
    College: New Era College, Malaysia.

5. Title: Wireless Restaurant Ordering Systems User Interface Design
    Student Name: See Kok Siang
    Course: Diploma in Web Development Technology
    College: New Era College, Malaysia.

6. Title: Touch Screen Panasonic Washing Machine Controlling Systems
    Student Name: Yap Weng Chun
    Course: Diploma in Information Technology
    College: New Era College, Malaysia.

7. Title: Touch Screen Bank ATM Machine Controlling Systems
    Student Name: Low Zhen Khean
    Course: Diploma in Web Development Technology
    College: New Era College, Malaysia.

8. Title: AGT Computer Utilities Software
    Student Name: Chai Chun Kae
    Course: Diploma in E-Commerce
    College: New Era College, Malaysia.

 9. Title: Entertainment Media Software
    Student Name: Chong Wing Son
    Course: Diploma in Information Technology
    College: New Era College, Malaysia.

10. Title: Computer Utilities Software
    Student Name: Chee Jian Jun
    Course: Diploma in Information Technology
    College: New Era College, Malaysia.

Adobe Photoshop Tutorial - Simple 3D Navigation Bar

Tutorial Written by fxzone

Step 1: Choose blue as the color for the bar, set foreground color to light blue and background color to dark blue. Create a bar with rounded corners on a layer then load a selection on the bar(fig. 1) and apply a vertical gradient(fig. 2). Set your gradient type to linear and the gradient from foreground to background.

Fig. 1

Fig. 2

Step 2: Then you need to create 4 button shaped patterns on a layer and position them accordingly on the bar(fig. 3). Load a selection on the patterns(fig. 4).

Fig. 3

Fig. 4

Step 3: This time using the same gradient settings, apply a vertical gradient but this time having it go the opposite direction. Apply the inset lines and place the text to complete the navigation bar.

Fig. 5

Fig. 6

Adobe Photoshop Tutorial - Blue Style Icon

Tutorial written by tutsbuzz

Step 1: With a white (#ffffff) background color. Create a new layer with 600 x 300 pixel document size. Press U to select the Shape Tool.And make sure that the Ellipse Tool is selected. Drag a shape layer about 175 x 175 pixels and name it "icon_bg". Apply these settings to the layer.

Step 2: After these settings, the icon should look like below.

Step 3: Next, create a new layer and select an area like the image below.

 

Step 4: Fill this area with color #ffffff and apply gaussian blur from filters with the settings below.

Step 5: And set the opacity of this layer to 50%. You will get this result.

 

Step 6: Then create a new layer and select an area at top-left side of the icon_bg shape layer. And fill it with color #ffffff. The icon should look like below at this level.

Step 7: Create a new layer and select an area like the image below. And fill it with color #ffffff. Set the opacity of the layer to 25%. The icon should look like below at this level.

Step 8: Add your icon and text. I simply added a question mark with "Book Antique" font and a text with "Century Gothic" font. Done!

Adobe Photoshop Tutorial - LCD Screen

Tutorial written by Man1c M0g

Step 1: Create a new document and fill the background with whatever colours, gradient, or pattern you desire.  In my example I've opted for a size of 200x85px and filled it with a white-grey gradient.

Step 2: Create a new layer called LCD. Using either the rounded Rectangle Tool, or your own method, create a box with rounded edges and fill with the colour #60A987.

Step 3: LCD screens are an irregular mix of liquid crystals. Recreate this effect by selecting Filter > Noise > Add Noise from the menu. Set the amount to 2, distribution to Gaussian, and check monochromatic.

Step 4: With the LCD layer active, click on Layer > Layer Style > Stroke in the menu and fill in the settings as they are on the left. This will create the black inner border present on many LCD interfaces (and probably your monitor too). Set the size to whatever you feel is appropriate to your interface - you'll see the effect immediately in the background.

Step 5: Without leaving the layer effects screen, progress onto the drop shadow section and enter the settings on the left.  This step can be omitted if your background is of the darker variety - its only included with my light background because step 6 doesn't generate a very discernable inset otherwise.

Step 6: Progress onto the 'outer glow' section and fill in the settings on the left.  This will create a light halo around the LCD screen and help it look like its inset into the background.  If the effect is a little too strong in your project, consider reducing the opacity setting a little.

Step 7: Ok, now we're getting towards the main meat of the tutorial.  Enter these settings into the inner shadow section of layer effects.  The result is almost imperceptible, but it'll slightly lighten the top edges of the LCD, but not show through the stroke effect.  If you want more highlighting, adjust this setting accordingly AFTER you have gone through steps 12 to 14.

Step 8: This is an optional step, but will make the 3D effect a bit more realistic.  Enter the 'bevel and emboss' section and duplicate these settings.  This will add a slight glow at the bottom of the LCD, almost like light is reflecting off the inside.  You can change the shape and intensity of the effect by altering the depth and opacity accordingly. You can now leave the layer effects dialog by clicking OK.

Step 9: Looking good isn't it? Now you should add some text using the text tool and an appropriate font.  I use DS-Digital and LcdD extensively - you can download them from all good font resource websites.

Step 10: Now create a new text layer beneath the main text layer with lots of 8's to mimic LCD burn-in.   Change the blending options in the layer palette to 'soft light' and the opacity to 50%.  Then move it about until it looks good.

Step 11: OK, now for the hardest part of the tutorial. Select the pen tool and draw a path similar to the one on the left.  Create a new layer on top of everything else called highlight. Make it the active layer. Go to the path palette, right-click the path, and select 'make selection'. Then pick Edit > Fill from the menu and fill the selection with white.

Step 12: Press Control + D to lose the current selection. Then run the Filter > Blur > Gaussian Blur filter with a setting of 5-10 pixels.  With the layer palette active, Press CTRL on your keyboard and click on the LCD layer to establish a new LCD-shaped selection.

Step 13: Invert the selection by clicking on Select > Inverse from the menu.  Then, with the highlight layer active, press delete on the keyboard once.   As a final step, select Layer > Layer Style > Gradient Overlay and enter in the settings on the left.   Press ok and reduce the highlight layer's opacity to 50%.

Step 14: You have finished masterpiece!  If the highlight layer is a little too bright or sharp, try reducing the opacity further or Gaussian Blur it a little more.

Step 15: Play around with the layers to achieve the result you desire.  Adding a drop shadow to the active LCD text using layer effects can also be helpful.  Remember that the screen doesn't have to be green!

Adobe Photoshop Tutorial - Control Button

Tutorial written by Abduzeedo

Step 1: Open Photoshop and create a new document. I am using 2560x1440 pixels. After that fill the background layer with grey using the Paint Bucket Tool (G)

Step 2: Go to Filter>Texture>Craquelure. Use 9 for the Crack Spacing, 2 for Crack Depth and 10 for Crack Brightness.

Step 3: Go to Layer>Layer Styles>Color Overlay. Use black for the color and Multiply at 70% Opacity.

Step 4: Go to Image>Adjustments>Levels. Use 120 for the black input, 1.00 for the grey and 181 for the white input.

Step 5: With the Ellipse Tool (U) create a circle in the center of your design.

Step 6: Select the Gradient Tool (G) then click on the color preset. Change the colors so you have something like the image below.

Step 7: Add a new layer and the with the Gradient Tool (G) select the Angle Gradient type and fill the layer with the gradient preset we created in the previous step. After that create a marquee selection of the circle we created in the step 5, to do that is super simple, just click holding Command (mac)/Control (PC) on the thumb of the circle layer.

Step 8: Go to Layer>Layer Mask>Reveal Selection.

Step 9: Duplicate the circle layer and fill it with white. Change the order so it is on top of the other layers. After that change the Fill Opacity to 0%.

Step 11: Go to Layer>Layer Styles>Inner Shadow. Use Color Dodge for the Blend Mode, white for the Color, 90 for the Angle and 70% for Opacity. After that use 8 pixels for the Distance, 11% for the Choke and 7 pixels for the Size. For the Quality change the Contour for the one we used in the image below.

Step 12: Select Inner Glow. For the Blend Mode use Overlay, for the Opacity 36% and for the Color use White. Also change the Source to Center, Choke to 12% and 65 pixels for the Size. Also change the Contour to the one I used below.

Step 13: Select Bevel and Emboss. Use Emboss for the Style, Smooth for the Technique, 1000% for the Depth, Up for the Direction, 50 pixels for the Size, 0 pixels for the Soften. For the Shading, change the Angle to 90º at 30 º Altitude. Also change the Gloss Contour to the one I am using below. For the Highlight Mode change the Opacity to 0 while for the Shadow Mode use black with Multiply at 100%.

Step 14: Duplicate the circle layer and move to the top, make sure it is white. After that go to Filter>Pixelate>Mezzotint. Use Fine Dots.

Step 15: Create a marquee selection of the circle and then go to Filter>Blur>Radial Blur. Use 20 for the Amount, Spin for the Blur Method and Best for the Quality.

Step 16: Change the Blend Mode to Multiply.

Step 17: Select all layers used to create the button/tuner, then go to Layer>Group Layers. After that duplicate the group and resize it like the image below.

Step 18: Select the layer with the layer styles inside the group and then change the Color Overlay to Black with black for the Blend Mode at 45%.

Step 19: Add drop shadow to both circles the bigger and the smaller. Like the first circle in the stack of layers that were used to create the effect.

Step 20: With the Rectangle Tool (U) create a square holding Shift. After that rotate the square 45º and position it like the image below.

Step 21: Go to Layer>Layer Style>Drop Shadow. Use Normal for the Blend Mode and Black for the Color at 100%. For the Angle use 120º, 5 pixels for the Distance and 5 pixels for the Size.

Step 22: Select Inner Glow. For the Blend Mode use Color Dodge, for the Opacity use 70%. Change the Choke to 10% and the SIze to 9 pixels. For the Quality use the preset I used in the image below.

Step 23: Select Gradient Overlay. Use dark red and light red for the gradient colors like the image below. Also change the Style to Linear and the Angle to 180º.

Step 24: This is the effect you will get after all the layer styles. It's pretty good but it is still to uniform and with the computer look.

Step 25: To change that lets use a metal texture. The one I am using is courtesy of Shutterstock and you can find it at: http://www.shutterstock.com/pic-20761540/stock-photo-metal-plate-background-texture.html

Step 26: Change the Blend Mode of the metal texture to Overlay at 30% and mask it using the big circle as reference, this way the texture will be on top of the other layers. Done!