PSD TO HTML ( Source PSD with High Width ) - psd

I have PSD with this specification :
2846 as Width.
The paragraph with this font size settings :
43.75 px
50 px
Metrics
VA 0
I'm familiar with 1170 px site width.
What should i do with this psd?
To determine site width and font spesification for each element?

Related

Image Downscaling

I need a bit of a clarification on this Process.
I am trying to downsize from 6000 * 4000 pixel to 960 * 960 for website space purpose using MagickImageMagic.
Would doing the same from 2000 * 2000 to 960 * 960 make any impact on the quality of the image.
I need some understanding weather I should proceed with capturing with resolution close to the target or should I go for high resolution for better quality.
var imageforLightbox = new MagickImage(Path.Combine(SOURCE_PATH, filename));
MagickGeometry size = new MagickGeometry(1920, 1080);
size.IgnoreAspectRatio = false;
imageforLightbox.Resize(size);

Three.js - scaling background image to fit window, without stretching it

When using scene.background the texture is stretched to fit the window size.
I'm trying to reproduce the CSS cover attribute behavior as described on the MDN page:
Scales the image as large as possible without stretching the image.
If the proportions of the image differ from the element, it is cropped
either vertically or horizontally so that no empty space remains.
I understand the repeat and offset texture attributes should be used, but I'm not sure how.
Same problem with you. After digging docs I resolved it. Below code should work for people struggle with this.
targetWidth is your surface or canvas width.
imageWidth is width of texture need fit to target.
const targetAspect = targetWidth / targetHeight;
const imageAspect = imageWidth / imageHeight;
const factor = imageAspect / targetAspect;
// When factor larger than 1, that means texture 'wilder' than target。
// we should scale texture height to target height and then 'map' the center of texture to target, and vice versa.
scene.background.offset.x = factor > 1 ? (1 - 1 / factor) / 2 : 0;
scene.background.repeat.x = factor > 1 ? 1 / factor : 1;
scene.background.offset.y = factor > 1 ? 0 : (1 - factor) / 2;
scene.background.repeat.y = factor > 1 ? 1 : factor;

how to compute image size from width and height pixels to bytes

image property
I try to compute image size in byte depend on that equation
width * height * bit depth / 8
depend on the image property
697 * 923 *24 = 15439944 /8 = 1929993 byte
but the size in byte not identical to the size in property ???

changing size and position of color bar

I want to change the size and position of my map colorbar. When I try to change the size and location of the colorbar, it is distorted in shape, I don't know why. Can anybody kindly help me. Please guide me why the set command distorts the clorbar? The location of the color bar should be 'southoutside'.The code is as under:
clear all,close all,clc
ax = worldmap('world');
load geoid
R = georasterref('RasterSize',[180 360],'Latlim',[-90 90],'Lonlim', [0 360]);
levels = [-70 -40 -20 -10 0 10 20 40 70];
geoshow(geoid, R, 'DisplayType', 'contour','LevelList',levels,'Fill','on','LineColor','black')
coast = load('coast.mat');
geoshow(coast.lat, coast.long, 'Color', 'white', 'LineWidth', 1.5)
cb = contourcbar('peer',ax,'Location','southoutside');
caxis([-110 90])
colormap(hsv)
set(get(cb,'XLabel'),'String','Geoid Undulation in Meters')
a=get(cb); %gets properties of colorbar
a.Position %gets the positon and size of the color bar
set(cb,'Position',[0.10 0.20 0.80 0.08])% To change size and position

Resizing images maintaining aspect ratio

I want to resize the images while maintaining the aspect ratio for displaying images on the web page. The maximum image size can be 640x480. What equation can be used to resize the images? I don't care about the newly resized image size. The resolution should be near to 640x480 pixels
I explain using C pseudo-code. First calculate the aspect ratio of the image you want to resize ("testImage"):
double rat = (double)testImage.Width / (double)testImage.Height;
Then we compare it with the aspect ratio of a 640x480 picture. If testImage's ratio ("rat") is bigger than the ratio of a 640x480 picture, then we know if we resize the picture so that its Width becomes 640, its height will not be more than 480. If testImage's aspect ratio is smaller, then we can resize the picture so that height becomes 480 without the width exceeding 640 pixels.
const double rat640x480 = 640.0 / 480.0;
if (rat > rat640x480)
testImage.Resize(Width := 640, Height := 640 / rat);
else
testImage.Resize(Width := 480 * rat, Height := 480);
Code in JAVA becomes
double ratio640x480 = 640.0 / 480.0;
double sourceRatio = (double) bitmap.getWidth() / (double) bitmap.getHeight();
if (sourceRatio > ratio640x480)
bitmap = Bitmap.createScaledBitmap(bitmap, 640, (int) (640 / sourceRatio), true);
else
bitmap = Bitmap.createScaledBitmap(bitmap, (int) (480 * sourceRatio), 480, true);

Resources